Cum să prezinți frumos serviciile pe dispozitive mobile cu Divi (descărcare gratuită!)

Dacă vă concentrați pe design-urile mobile, acest post vă poate ajuta. Am creat două exemple frumoase de vitrine de servicii care arată excelent pe dimensiuni de ecran mai mici. Mai mult, au fost concepute special pentru a arăta cât mai bine pe mobil, păstrând în același timp un design bun pe desktop. În această postare, vă vom arăta pas cu pas cum să le recreați de la zero. Sperăm că acest tutorial vă va inspira să vă dezlănțuiți creativitatea atunci când proiectați secțiuni de servicii pentru orice site web pe care îl creați. La sfârșitul tutorialului, veți putea descărca și fișierele JSON ale ambelor secțiuni.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra celor două exemple mobile pe care le vom recrea.

Exemplul nr. 1

Exemplul nr. 2

Să începem să recreăm exemplul # 1

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Fundal de gradient

Creați o pagină nouă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și adăugați un fundal de gradient.

• Culoare 1: # ff0f83
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: stânga
• Poziția inițială: 20%
• Poziție finală: 20%

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Adăugați modulul de text nr. 1

Adauga continut

Primul modul de care avem nevoie este un modul de text. Adăugați conținut în caseta de conținut.

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Font text: Poppins
• Greutate font text: greu
• Culoarea textului: #ffffff
• Dimensiune text: 20vw
• Înălțimea liniei de text: 1em

• Text Forța de estompare a umbrei: 0,95em
• Culoare umbră text: rgba (0,0,0,0.13)
• Orientare text: centru

Adăugați modulul de text nr. 2

Adăugați conținut H2

Adăugați un alt modul de text chiar sub cel precedent. Introduceți un conținut H2 la alegere.

Setări text H2

Apoi, accesați fila de proiectare și modificați setările de text H2.

• Rubrica 2 Font: Poppins
• Titlul 2 Greutate font: îndrăzneț
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Dimensiune text: 10vw (telefon și tabletă), 10vw (desktop)

Spațiere

Creați o suprapunere între ambele module de text folosind o marjă superioară negativă.

• Marja superioară: -12vw (telefon), -10vw (tabletă), -8vw (desktop)

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un alt rând folosind următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și adăugați un fundal de gradient.

• Culoare 1: # 3239ff
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: dreapta
• Poziția inițială: 30%
• Poziție finală: 30%

Dimensionare

Accesați setările de dimensionare următoare și permiteți rândului să ocupe întreaga lățime a ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați și câteva valori de spațiere. Aceste valori se vor asigura că totul arată bine pe toate dimensiunile ecranului.

• Căptușeală stângă: 0vw (telefon și tabletă), 15vw (desktop)
• Căptușeală dreaptă: 0vw (telefon și tabletă), 15vw (desktop)

CSS personalizat

De asemenea, plasăm cele două coloane una lângă alta adăugând o linie de cod CSS în fila avansată.

display: flex;

Adăugați un modul de text în coloana 1

Adăugați conținut H3 și link

Acum putem începe să adăugăm module! Adăugați un modul de text în prima coloană cu o copie H3 și un link.

Culoare de fundal

Apoi, accesați setările de fundal ale modulului și adăugați o culoare de fundal.

• Culoare fundal: rgba (255.255.255,0.95)

Setări text

Continuați schimbând orientarea textului în setările de text ale modulului.

• Orientare text: centru

Setări text link

Modificați și setările pentru textul linkului.

• Link Font: Poppins
• Greutatea fontului Linke: Bold
• Stil Font Link: Subliniat
• Culoare subliniere link: # 000000
• Culoare text link: # 000000
• Dimensiune text link: 3vw (telefon), 2vw (tabletă), 1vw (desktop)

Setări text H3

Împreună cu setările de text H3.

• Rubrica 3 Font: Poppins
• Rubrica 3 Greutate font: Ultra ușor
• Rubrica 3 Culoarea textului: # 000000
• Rubrica 3 Dimensiune text: 4vw (telefon), 3vw (tabletă), 2vw (desktop)
• Titlul 3 Înălțimea liniei de text: 1.9em pentru o formă de cerc sau 3em pentru una ovală

Spațiere

Pentru a crea o formă din acest modul, vom adăuga câteva marje personalizate și valori de umplere în setările de spațiere.

• Marja stângă: 5vw
• Marja dreaptă: -5vw
• Căptușeală superioară: 17vw (telefon), 20vw (tabletă), 15vw (desktop)
• Căptușeală inferioară: 17vw (telefon), 20vw (tabletă), 15vw (desktop)

Frontieră

Transformăm pătratul într-un cerc folosind colțuri rotunjite adăugând „100vw” la fiecare colț.

Box Shadow

Și pentru a crea o anumită adâncime, vom adăuga o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 100 px
• Culoare umbră: rgba (0,0,0,0.12)

Clonați modulul de text de 4 ori

Acum, după ce am terminat de modificat primul modul de text, putem merge mai departe și îl putem clona de patru ori. Plasați două dintre duplicatele în a doua coloană.

Modificați duplicatul # 1

Spațiere

Continuați modificând setările de spațiu ale primului duplicat.

• Marja superioară: 20vw
• Marja stângă: -5vw
• Marja dreaptă: 5vw

Modificați duplicatul # 2

Culoare de fundal

Deschideți al doilea duplicat în continuare și schimbați culoarea de fundal.

• Culoare fundal: rgba (255.248.209,0.92)

Spațiere

Modificați și setările de spațiere.

• Marja superioară: -5vw

Modificați duplicatul nr. 3

Culoare de fundal

Apoi, deschideți al treilea duplicat și schimbați culoarea de fundal.

• Culoare fundal: rgba (219.255.223,0.95)

Spațiere

Modificați apoi setările de spațiere.

• Marja superioară: -5vw
• Marja stângă: -5vw
• Marja dreaptă: 5vw

Modificați duplicatul # 4

Spațiere

Deschideți și ultimul duplicat și adăugați o marjă superioară negativă pentru a termina proiectarea.

• Marja superioară: -5vw

Să începem să recreăm exemplul # 2

Adăugați o secțiune nouă

Trecem la al doilea exemplu! Adăugați o nouă secțiune la pagina dvs.

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Adăugați un modul de text

Adăugați conținut H2

Primul modul de care avem nevoie este un modul de text. Introduceți un conținut H2 la alegere.

Setări text H2

Apoi, accesați fila de proiectare și modificați setările de text H2.

• Rubrica 2 Font: Poppins
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 333333
• Rubrica 2 Dimensiune text: 7vw (telefon și tabletă), 4vw (desktop)

Adăugați un modul divizor

Vizibilitate

Adăugați un modul divizor chiar sub modulul text. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

Culoare

Apoi, accesați fila de proiectare și modificați culoarea separatorului.

• Culoare: # 333333

Dimensionare

Joacă-te și cu setările de dimensionare.

• Greutatea divizorului: 5 px
• Lățime: 12%
• Alinierea modulului: centru

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și adăugați o culoare de fundal albă.

• Culoare fundal: #ffffff

Dimensionare

Accesați setările de dimensionare următoare și permiteți rândului să ocupe întreaga lățime a ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați câteva valori de marjă personalizate și umplutură pentru a optimiza designul pentru toate dimensiunile ecranului.

• Marja superioară: 2vw
• Marja inferioară: 2vw
• Căptușeală superioară: 10vw (telefon și tabletă), 5vw (desktop)
• Căptușeală inferioară: 10vw (telefon și tabletă), 5vw (desktop)
• Căptușeală stângă: 2vw (telefon și tabletă), 20vw (desktop)
• Căptușeală dreaptă: 2vw (telefon și tabletă), 20vw (desktop)

Box Shadow

Folosim și o umbră de cutie subtilă.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.07)

CSS personalizat

Nu în ultimul rând, plasați ambele coloane una lângă alta adăugând o singură linie de cod CSS la elementul principal din fila avansată.

display: flex;

Adăugați Blurb Module la coloana 1

Selectați pictograma

Acum putem începe să adăugăm module! Singurul modul de care avem nevoie în coloana 1 este un modul Blurb. Selectați o pictogramă la alegere.

Fundal de gradient

Apoi, adăugați un fundal de gradient.

• Culoare 1: # 7b28ef
• Culoare 2: # 29b6e5
• Direcția gradientului: 142 grade

Setări pictograme

Modificați setările pictogramei în continuare.

• Culoare pictogramă: #ffffff
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 5vw (telefon și tabletă), 4vw (desktop)

Dimensionare

Și schimbați setările de dimensionare.

• Lățime: 48% (telefon și tabletă), 78% (desktop)

Spațiere

De asemenea, adăugăm niște valori de marjă și umplere personalizate pentru a optimiza designul pe toate dimensiunile ecranului.

• Marja superioară: 2vw (telefon)
• Căptușeală superioară: 8.5vw (telefon), 9vw (tabletă), 6vw (desktop)
• Căptușeală inferioară: 3vw (telefon), 5vw (tabletă), 4vw (desktop)

Frontieră

Transformă modulul într-un cerc următor adăugând „100vw” la fiecare colț din setările de margine.

Box Shadow

Adăugăm și o umbră de cutie.

• Box Shadow Vertical Position: 10 px
• Puterea răspândirii umbrei cutiei: 5 px
• Culoare umbră: rgba (2.185.252,0.35)

Adăugați modulul de text nr. 1 în coloana 2

Adăugați conținut H3

Trecem la a doua coloană! Primul modul de care avem nevoie este un titlu Modul text. Adăugați conținut H3.

Setări text H3

Apoi, accesați fila de proiectare și modificați setările de text H3.

• Rubrica 3 Font: Poppins
• Rubrica 3 Dimensiune text: 4vw (telefon), 3vw (tabletă), 2vw (desktop)

Spațiere

Adăugați câteva valori de spațiere personalizate în continuare.

• Marja superioară: 0vw (telefon), 3vw (tabletă și desktop)
• Marja stângă: -20vw (telefon și tabletă), 0vw (desktop)
• Marja dreaptă: 0vw
• Căptușeală inferioară: 2vw (telefon și tabletă), 1vw (desktop)
• Căptușeală stângă: 5vw (telefon și tabletă), 2vw (desktop)

Frontieră

Împreună cu o margine stângă.

• Lățimea marginii stânga: 5 px
• Culoarea chenarului stâng: # f4f4f4
• Stilul marginii stângi: dublu

Adăugați modulul divizor în coloana 2

Arată divizorul

Al doilea modul de care avem nevoie este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, accesați fila de proiectare și schimbați culoarea separatorului.

• Culoare: # f4f4f4

Stiluri

Schimbați stilul divizorului în setările de stiluri următoare.

• Stil divizor: Dublu

Dimensionare

Continuați modificând diferitele opțiuni din setările de dimensionare.

• Greutatea divizorului: 5 px
• Înălțime: 0px

Spațiere

Și jucați-vă și cu valorile de spațiere.

• Marja stângă: -20vw (telefon și tabletă), 0vw (desktop)

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Următorul modul de care avem nevoie în a doua coloană este un alt modul de text. Adăugați un conținut de corp la alegere.

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Dimensiune text: 2vw (telefon), 1,7vw (tabletă), 0,8vw (desktop)
• Orientare text: stânga

Spațiere

Joacă-te și cu valorile spațierii.

• Marja superioară: 0vw
• Marja stângă: -20vw (telefon și tabletă), 0vw (desktop)
• Marja dreaptă: 0vw
• Căptușeală superioară: 3vw (telefon și tabletă), 2vw (desktop)
• Căptușeală stângă: 5vw (telefon și tabletă), 2vw (desktop)

Frontieră

Și adăugați o margine stângă.

• Lățimea marginii stânga: 5 px
• Culoarea chenarului stâng: # f4f4f4
• Stilul marginii stângi: dublu

Adăugați un modul buton la coloana 2

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în a doua coloană este un modul buton. Adăugați o copie.

Setări buton

Apoi, accesați fila de proiectare și modificați setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 2,5vw (telefon), 2vw (tabletă), 1vw (desktop)
• Culoarea textului butonului: # 4f77e8
• Lățimea chenarului butonului: 1 px
• Culoarea chenarului butonului: # 4f77e8

• Raza chenarului butonului: 1 px
• Buton Font: Poppins

Spațiere

Modificați și valorile de spațiere.

• Marja superioară: 4vw (telefon și tabletă), 2vw (desktop)
• Marja stângă: -20vw (telefon și tabletă), 0vw (desktop)

Clone Row de două ori

Acum, după ce am terminat de modificat rândul și toate modulele sale, îl putem clona de două ori.

Schimbați pictogramele

Asigurați-vă că schimbați pictogramele pentru ambele module Blurb.

Schimbați fundalurile de gradient

Modificați și fundalurile de gradient.

• Culoare 1: # ff2885
• Culoare 2: # d6ac24

• Culoare 1: # 70ff1e
• Culoare 2: # 2699ff

Schimbați culorile umbrelor

Potriviți culoarea umbrei casetei cu noul fundal degradat.

• Culoare umbră: rgba (255.208,2,0.37)

• Culoare umbră: rgba (42.255,0,0.37)

Schimbați marginea butonului și culorile textului

Și finalizați designul schimbând marginea butonului și culorile textului.

• Culoarea textului butonului: # e96c54
• Culoarea chenarului butonului: # e96c54

• Culoarea textului butonului: # 4dcb93
• Culoarea chenarului butonului: # 4dcb93

Descărcați secțiunile de servicii mobile GRATUIT

Pentru a pune mâna pe secțiunile gratuite de servicii mobile, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului mobil al ambelor exemple.

Exemplul nr. 1

Exemplul nr. 2

Gânduri finale

În această postare, v-am arătat două moduri creative despre cum să prezentați serviciile pe dispozitivele mobile folosind doar opțiunile încorporate ale Divi. Sperăm că această abordare mobilă primul te va inspira să devii creativ și. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!