Cum să creați modele mobile pentru prima dată cu Divi

Multe site-uri web primesc tone de vizitatori de pe dispozitive mobile. Acest lucru duce la întrebarea dacă proiectele dvs. sunt sau nu suficient de optimizate pentru dimensiuni de ecran mai mici. Cu Divi, un design conceput pentru o experiență de desktop ajunge să fie și instantaneu receptiv. Dar doar pentru că ceva este receptiv nu înseamnă că este optimizat și el.

Dacă mobilul este principala dvs. sursă de vizitatori, vă poate ajuta cu adevărat să începeți proiectarea și construirea dintr-o perspectivă mobilă în loc de una desktop. În această postare, vă vom arăta exact cum să faceți acest lucru. După ce ați parcurs câteva sfaturi și trucuri pe care ar trebui să le aveți în vedere, vom recrea, de asemenea, un exemplu de la zero, care ia în considerare aceste sfaturi.

Să ajungem la asta!

previzualizare

După cum am menționat anterior, vom începe prin a trece peste câteva sfaturi și trucuri. Ulterior, vom recrea un exemplu de la zero care folosește aceste sfaturi. Să aruncăm o privire asupra rezultatului.

Mobil

Desktop

Abordare

Abonați-vă la canalul nostru Youtube

1. Treceți la Vizualizare mobil imediat după adăugarea unei pagini noi

Primul lucru pe care trebuie să-l faceți, după adăugarea unei noi pagini, este trecerea imediată la vizualizarea mobilă. Acest lucru vă va permite să creați un design orientat spre mobil și precis.

2. Activați opțiunile responsive pentru fiecare element de design și modificați mai întâi valorile mobile

Odată ce ați început să proiectați orice design doriți, veți dori să activați opțiunile responsive pentru elementele de design. Aceasta include, dar nu se limitează la dimensiunea textului, umplutura și marginea. Primele valori pe care le veți adăuga vor fi valorile pentru mobil (în loc de cele pentru desktop) pentru a vă asigura că designul este optimizat mai întâi pentru mobil.

3. Eliminați spațiul implicit dintre coloane și adăugați manual căptușeala dacă este necesar

Pentru a crea mai mult spațiu orizontal, se recomandă, de asemenea, să eliminați toate padding-urile personalizate implicite dintre coloane. Dacă este necesar, puteți adăuga întotdeauna căptușeala manual la fiecare coloană sau element de proiectare și puteți alege singură câtă distanță doriți să existe.

4. Amplasați 2 sau 3 coloane una lângă cealaltă pentru a crea un design orizontal

Structura receptivă din Divi este orientată vertical. Aceasta înseamnă că modulele și coloanele apar una sub cealaltă. Acest lucru, însă, necesită o defilare mai verticală. În funcție de designul la care lucrați, crearea unui flux mai orizontal poate face cu adevărat diferența.

5. Modificați vizualizările pentru desktop și tabletă pe parcurs sau după aceea

Chiar dacă proiectați pentru un scop mobil, este important să păstrați și celelalte vizualizări în ordine. Opțiunile receptive care sunt incluse în fiecare element de design vă vor ajuta să realizați acest lucru. Puteți alege să modificați aceste valori ulterior sau pe tot parcursul procesului de proiectare.

Să începem să recreăm exemplul!

Adăugați o secțiune nouă

Deschideți o pagină nouă, treceți la vizualizarea mobilă și adăugați o nouă secțiune pentru a începe.

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou în secțiunea dvs. utilizând următoarea structură de coloane:

Adăugați un modul de text la rând

Adăugați conținut H2

Adăugați un modul de text în coloana rândului dvs. și introduceți un conținut de titlu H2.

Setări text H2

Apoi, accesați setările pentru textul antetului și schimbați aspectul titlului.

• Rubrica 2 Font: Didact Gothic
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 333333
• Rubrica 2 Dimensiune text: 5,5vw (telefon), 5vw (tabletă), 2vw (desktop)

Adăugați modul divizor la rând

Vizibilitate

Chiar sub modulul text pe care l-ați adăugat, continuați și adăugați 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: # 333333

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 48%
• Alinierea modulului: centru

Adăugați rândul # 2

Structura coloanei

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

Culoare de fundal

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

• Culoare fundal: # ffe69e

Coloana 2 Culoare fundal

Adăugați și o culoare de fundal la a doua coloană a rândului.

• Coloana 2 Culoare fundal: # ffd65b

Aliniere

Apoi, schimbați alinierea rândurilor.

• Alinierea rândurilor: la stânga

Dimensionare

Deschideți setările de dimensionare în continuare. Aici, vom dori să eliminăm tot spațiul implicit dintre coloane. De asemenea, folosim lățimea personalizată pentru coloană pentru a face să arate bine pe desktop.

• Utilizați lățimea personalizată: da
• Unitate: PX
• Lățime personalizată: 700 px
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Continuați accesând setările de spațiere și adăugați manual câteva valori de marjă și umplere personalizate.

• Marja superioară: 5vw
• Marja inferioară: 5vw
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală superioară: 10vw (telefon), 8vw (tabletă), 4vw (desktop)
• Coloana 1 Căptușeală inferioară: 10vw (telefon), 8vw (tabletă), 4vw (desktop)

Frontieră

Adăugați și câteva colțuri rotunjite la rând.

• În dreapta sus: 10 px
• Jos dreapta: 10 px

Box Shadow

Și dă-i și o umbră de cutie subtilă.

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

CSS personalizat

Nu în ultimul rând, vom plasa coloanele una lângă cealaltă pe dimensiuni de ecran mai mici pentru a ne asigura că profităm pe deplin de spațiul orizontal pe care îl avem. Accesați fila avansată și adăugați o singură linie de cod CSS la elementul principal.

display: flex;

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

Adăugați conținut H3

E timpul să începeți să adăugați module! Adăugați un titlu Text Module în prima coloană și introduceți conținut H3.

Setări text H3

Apoi, accesați fila de proiectare și modificați setările pentru textul antetului.

• Rubrica 3 Font: Didact Gothic
• Titlul 3 Greutate font: îndrăzneț
• Titlul 3 Aliniere text: centru
• Rubrica 3 Culoarea textului: # ee6f49
• Rubrica 3 Dimensiune text: 4vw (telefon), 3vw (tabletă), 1,5vw (desktop)

Adăugați un modul divizor în coloana 1

Vizibilitate

Adăugați un modul divizor în continuare. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, schimbați culoarea separatorului.

• Culoare: #ffffff

Dimensionare

Împreună cu setările de dimensionare.

• Greutatea divizorului: 4 px
• Lățime: 30%
• Alinierea modulului: centru

Spațiere

Adăugați și câteva margini superioare personalizate la modul.

• Marja superioară: 4vw (telefon), 2vw (tabletă), 1,5vw (telefon)

Adăugați modulul buton la coloana 1

Adăugați o copie

Următorul și ultimul modul necesar în prima coloană este un modul buton. Introduceți o copie.

Aliniere

Apoi accesați fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: centru

Setări buton

Modificați și aspectul butonului în setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 3vw (telefon), 2vw (tabletă), 1,5vw (desktop)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ee6f49
• Lățimea chenarului butonului: 0 px
• Buton Font: Didact Gothic
• Greutatea fontului: Bold

Adăugați modulul de imagine în coloana 2

Pictogramă de încărcare

Singurul modul de care vom avea nevoie în coloana 2 este un modul de imagine. Puteți utiliza orice imagine la alegere, dar dacă doriți să utilizați exact aceleași pictograme care au fost folosite în acest exemplu, puteți merge la pachetul de amenajare a magazinului de mobilă și le puteți descărca la sfârșitul postării.

Aliniere

Apoi, accesați fila de proiectare și modificați alinierea imaginii.

• Aliniere imagine: centru

Clona rândul # 2

După ce ați terminat modificarea rândului, puteți continua și clona.

Schimbați culoarea de fundal a rândului

Va trebui să facem câteva modificări la acest duplicat, începând cu culoarea de fundal a rândului.

• Culoare fundal: # 8ee5cf

Eliminați Culoarea 2 Culoarea de fundal

Continuați eliminând culoarea de fundal a coloanei 2.

Adăugați Coloana 1 Culoare de fundal

În schimb, adăugăm o culoare de fundal în prima coloană.

• Coloana 1 Culoare fundal: # 47e5bd

Schimbați modulele din coloane

De asemenea, schimbăm coloane pentru module.

Schimbați pictograma în modulul de imagine

Apoi, schimbați pictograma din modulul de imagine.

Adăugați un filtru la modulul de imagine

Și faceți-o să se potrivească cu noile culori de fundal de rând și coloană, schimbând nuanța din setările filtrelor.

• Nuanță: 65 grade

Schimbați alinierea rândurilor

Schimbați alinierea rândului în continuare.

• Alinierea rândurilor: corect

Schimbați marginea rândului

Împreună cu colțurile rotunjite.

• În stânga sus: 10 px
• În partea stângă jos: 10 px

Schimbați culoarea textului modulului de text din coloana 2

De asemenea, folosim o altă culoare de text pentru modulul de text din coloana 2.

• Rubrica 3 Culoarea textului: # 7b9710

Schimbați culoarea de fundal a butonului

Și folosim aceeași culoare pentru fundalul butonului.

• Culoarea fundalului butonului: # 7b9710

Clonați ambele rânduri

Acum că avem ambele părți ale rândului, le putem clona pe amândouă de câte ori avem nevoie și le putem ordona.

Modificați duplicatul # 1

Schimbați culoarea de fundal a rândului

Vom începe prin a schimba culoarea de fundal a rândului primului duplicat.

• Culoare fundal: # ffc9cf

Schimbați culoarea coloanei

Apoi, vom modifica și culoarea de fundal a coloanei 2.

• Coloana 2 Culoare fundal: # ffadb6

Schimbați pictograma în modulul de imagine

Schimbați pictograma din modulul de imagine cu alta la alegere.

Adăugați un filtru la modulul de imagine

Și modificați nuanța din setările filtrelor pentru a se potrivi cu noile culori de fundal ale rândurilor și coloanelor.

• Nuanță: 309 grade

Schimbați culoarea textului

Schimbăm și culoarea textului.

• Rubrica 3 Culoarea textului: # f862b0

Schimbați culoarea de fundal a butonului

Și folosim aceeași culoare pentru fundalul butonului.

• Culoarea fundalului butonului: # f862b0

Modificați duplicatul # 2

Schimbați culoarea de fundal a rândului

La următorul și ultimul duplicat! Schimbați culoarea de fundal a rândului.

• Culoare fundal: # b2c4ff

Schimbați culoarea coloanei

Faceți același lucru pentru culoarea de fundal a coloanei 1.

• Coloana 1 Culoare fundal: # 9eb4ff

Schimbați pictograma în modulul de imagine

Apoi, schimbați pictograma utilizată.

Adăugați un filtru la modulul de imagine

Împreună cu nuanța din setările filtrelor din modulul de imagine.

• Nuanță: 221 grade

Schimbați culoarea textului

Apoi modificați culoarea textului modulului de imagine.

• Rubrica 3 Culoarea textului: # 6287f9

Schimbați culoarea de fundal a butonului

Și utilizați aceeași culoare pentru fundalul butonului.

• Culoarea fundalului butonului: # 6287f9

previzualizare

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

Mobil

Desktop

Gânduri finale

Dacă sursa principală de vizitatori provine de pe dispozitive mobile, este important să optimizați totul pentru acea dimensiune a ecranului. Cu Divi, totul devine instantaneu receptiv. Dar doar pentru că ceva este receptiv, nu înseamnă că este optimizat și pentru acea dimensiune a ecranului. O altă modalitate de abordare a proiectării pentru telefoane mobile este pornirea proiectării dvs. dintr-o perspectivă mobilă. În această postare, v-am împărtășit câteva sfaturi și trucuri despre cum să faceți acest lucru. Ulterior, am recreat un exemplu care respectă aceste reguli și ne permite să creăm un rezultat uimitor. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!