Cum să creați un modul Divi Fluid Responsive

Pentru a simplifica și mai mult procesul de implementare a unui design receptiv consistent pentru un modul Divi, putem aplica practicile de design web fluid. Spre deosebire de metodele mai tradiționale de design receptiv, web design-ul fluid nu se rupe sau trece brusc la o dimensiune / stil diferit la diferite puncte de întrerupere. Acesta încorporează unități de lungime receptive în raport cu lățimea ferestrei, astfel încât designul să se adapteze (sau să se coreleze) fluid, păstrând designul consecvent pe toate dispozitivele.

În acest tutorial, vă vom arăta cum să creați un modul Divi fluid. Folosind practici similare de proiectare a fluidelor pentru a crea tipografie fluidă și / sau butoane fluide, vom crea un modul Divi fluid care se va dimensiona perfect cu vizualizarea browserului. După cum vom afla, combinația secretă este adăugarea unei dimensiuni a fontului corpului rădăcinii cu o unitate de lungime relativă (sau fluidă) la modul și apoi încorporarea unității de lungime em (care este relativă la dimensiunea fontului corpului rădăcină) în întregul modul setări atunci când este necesar.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Iată un codepen care demonstrează funcționalitatea acestui modul fluid.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl 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!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Cum să creați un modul Divi Fluid Responsive

Randul

Pentru început, creați un nou rând cu o singură coloană în secțiunea obișnuită implicită.

Deschideți setările rândului și actualizați următoarele:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: automată
• Lățime maximă: 100%
• Garnitura: 5vw sus, 5vw jos

Proiectarea unui modul de apel la acțiune fluid

Deși aceleași tehnici de proiectare a fluidelor pot fi adăugate la aproape orice modul Divi, vom merge la unul dintre modulele de apel la acțiune ale Divi pentru acest tutorial.

Adăugați un nou modul de apel la acțiune în coloană / rând.

Setari de continut

Sub setările de conținut, adăugați o adresă URL a linkului butonului fals și actualizați culoarea de fundal după cum urmează:

• Adresă URL a butonului: #
• Culoare fundal: # 5e6472

Adăugarea unei dimensiuni a fontului rădăcină fluid la modul

Când proiectăm un modul fluid, trebuie să adăugăm o dimensiune a fontului rădăcină fluid la modul. Odată adăugat la modul, această dimensiune a fontului rădăcină va fi încorporată dinamic în restul setărilor de proiectare a modulului nostru folosind unitatea de lungime em.

Pentru a adăuga dimensiunea fontului rădăcină fluidă la modul, accesați fila avansată și adăugați următorul CSS personalizat la elementul principal:

font-size: clamp(16px, 2vw, 24px);

Pentru această dimensiune a fontului, folosim funcția CSS Clamp () pentru a seta o dimensiune minimă a fontului, o dimensiune fluidă a fontului (atunci când este necesar) și o dimensiune maximă a fontului.

Înlocuirea oricăror elemente cu spațierea implicită cu valorile unităților în lungime

Deși nu este absolut necesar, pentru a obține un adevărat design fluid pentru modul, trebuie să înlocuim orice spațiu implicit (din culise) pe care îl folosește modulul în prezent cu o valoare a unității de lungime em pentru acea proprietate. Puteți să le identificați inspectându-vă elementul folosind unelte de dezvoltare a browserelor. În acest caz, modulul de apel la acțiune are o umplutură de jos atât pe descrierea promoției, cât și pe elementul titlului promoției. Deoarece proprietatea de umplere de jos folosește o unitate de lungime pixel (px), trebuie să le suprascrieți pe fiecare cu o unitate de lungime em care va încorpora dimensiunea fontului corpului rădăcină pe care tocmai l-am adăugat elementului principal.

Actualizarea designului cu unități de lungime em

Acum că dimensiunea fontului nostru rădăcină fluidă pentru modul este la locul său, tot ce trebuie să facem este să actualizăm designul modulului folosind unități de lungime em. Deoarece unitatea de lungime em este relativă la dimensiunea fontului rădăcină, orice proiectare care utilizează unitatea de lungime em va moșteni fluiditatea dimensiunii fontului și va scala în mod fluid cu dimensiunea fontului atunci când este necesar.

Corpul textului

Mărimea fontului personalizat rădăcină pe care l-am adăugat mai devreme este creat în mod intenționat, având în vedere textul corpului. Prin urmare, putem atribui textul corpului cu o valoare de 1em care moștenește valoarea exactă a dimensiunii fontului rădăcină. De asemenea, putem adăuga o înălțime a liniei corpului. Pentru a face acest lucru, actualizați următoarele:

• Dimensiunea textului corpului: 1em
• Înălțimea liniei corpului: 1,8em

Textul titlului

Pentru elementul text al titlului modulului, îi putem oferi o dimensiune mai mare folosind unitatea de lungime em. Actualizați următoarele:

• Dimensiune text titlu: 1.7em
• Înălțimea liniei de titlu: 1.3em

Pentru a vă face o idee despre dimensiunea textului titlului, înmulțim pur și simplu valoarea lungimii em cu valoarea fontului rădăcină. Amintiți-vă, dimensiunea fontului rădăcină utilizează clamp () pentru a stabili dimensiunea fontului min (16px), fluid (2vw) și max (24px). Prin urmare, dimensiunea minimă a textului titlului va fi de 1,7 ori 16 px, care este aproape de 27,2 px. Dimensiunea fontului fluid va fi de 1,7 ori 2vw (2% din lățimea ferestrei). Și dimensiunea maximă a fontului va fi de 1,7 ori 24px, care este aproape de 69,36px.

Design de butoane

Al treilea element al modulului este butonul. Putem actualiza setările de proiectare ale butonului folosind valorile unității de lungime a em pentru a încorpora și designul fluidului.
Actualizați următoarele setări ale butonului:

• Dimensiune text buton: 1.3em
• Lățimea chenarului butonului: 0,12 em
• Raza chenarului butonului: 1,5em
• Distanța dintre litere și butoane: 0,1em
• Garnitura butonului: 0,1em sus, 0,1em jos, 2em stânga, 2em dreapta

Dimensiune și spațiu

Pentru a ne asigura că modulul are dimensiunea fluidului și spațierea fluidului, trebuie să folosim și unități de lungime em pentru acele valori.

Actualizați următoarele setări de dimensionare și spațiere:

• Lățime maximă: 40em
• Înălțime minimă: 0vw
• Marja: 0,5em sus, 0,5em jos, auto stânga, auto dreapta
• Garnitura: 2,5em sus, 2,5em jos, 2em stânga, 2em dreapta

Rezultatul

Acum, să vedem rezultatul modulului nostru fluid atunci când ajustăm lățimea browserului pe o pagină live.

Adăugarea mai multor module de fluid într-un rând cu grila CSS

Pentru a adăuga mai multe module de fluid adiacente la un rând, trebuie să ne asigurăm că proiectarea modulului nostru de fluid nu este limitată sau oprită de lățimile containerului părinte. Cu alte cuvinte, dorim ca containerul părinte al modulelor noastre (coloana) să fie setat la automat, astfel încât să se potrivească cu dimensiunea modulului. Putem face acest lucru folosind CSS Grid la nivelul coloanei pentru a seta fiecare modul într-o grilă, fiecare coloană având o lățime automată.

Reglați dimensiunea și spațiul modulului

Înainte de a crea grila CSS pentru module, trebuie să ajustăm lățimea maximă și marja pentru modulul nostru la o dimensiune mai potrivită pentru un aspect cu două coloane cu două module.

Deschideți setările pentru modul și actualizați următoarele:

• Alinierea textului: stânga
• Lățime maximă: 24em
• Marja: 0,5em stânga, 0,5em dreapta

Modul duplicat

Acum copiați modulul pentru a crea altul în aceeași coloană.

Adăugați grila CSS în coloană

Acum putem adăuga CSS personalizat în coloană pentru a crea grila CSS pentru module.

Sub fila avansată, adăugați următorul CSS la Elementul principal de pe ecranul desktop:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Apoi adăugați următorul CSS la Elementul principal din vizualizarea telefonului:

display:grid;
grid-template-columns: auto;
justify-content:center;

Aceasta va seta cele două module într-o grilă cu două coloane (fiecare având o lățime automată) pe desktop. Apoi, pe telefon, modulele vor reveni la o grilă cu o coloană (lățime automată).

Rezultatul

Acum verificați rezultatul.

Rezultate finale

Odată ce modulele fluide sunt complete, puteți actualiza stilurile modulului folosind setările de proiectare încorporate pentru a-i oferi fonturi, culori etc.

Iată un aspect al rezultatului final folosind un font diferit, culoarea fontului, culoarea butonului și culoarea de fundal.

Gânduri finale

Așa cum am văzut în acest tutorial, încorporarea designului fluid pe un modul Divi poate fi o modalitate convenabilă de a vă asigura că modulul arată frumos și consecvent pe toate dimensiunile browserului, fără a fi nevoie să actualizați designul la puncte de întrerupere specifice.

Nu uitați să consultați celelalte articole despre designul fluidelor, inclusiv ghidul nostru pentru crearea de tipografie fluidă și butoane Divi fluide.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!