Cum se creează un aspect al grilei CSS pentru modulele Divi

Pentru cei deja familiarizați cu crearea de site-uri web în Divi, crearea unor planuri de rețea personalizate este un aspect esențial al Divi Builder. Pur și simplu creați un rând și alegeți din mai multe machete de coloane încorporate pentru acel rând. Odată ce aspectul coloanei este la locul său, adăugăm pur și simplu conținutul / modulele pe care le dorim în fiecare coloană. Dar, dacă am fi vrut un aspect suplimentar pentru aceste module?

În acest tutorial, vom explora cum să extindem aspectele de grilă Divi prin crearea de structuri de grilă CSS pentru modulele Divi într-o singură coloană. Proprietatea Grilă CSS (împreună cu CSS Flex) este o modalitate populară de a crea planuri de grilă previzibile și receptive pentru conținut cu doar câteva linii de CSS. Cu acesta, putem organiza toate modulele dintr-o coloană într-o grilă complet receptivă. Gândiți-vă la acesta ca la un aspect suplimentar al grilei pentru module pe care le puteți adăuga la orice coloană Divi. Dar unul dintre cele mai bune lucruri legate de această tehnică este că fiecare modul adiacent va avea aceeași înălțime și lățime, fără a face tot felul de probleme în încercarea de a face acest lucru folosind valori de înălțime personalizate sau înălțime pe fiecare modul.

Poate că cel mai bine este să saltăm și să vă arătăm cum funcționează acest lucru.

Să începem!

Trage cu ochiul

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

Și iată o privire asupra aceleiași tehnici, folosind diferite module și modele din pachetul de gimnastică pentru fitness.

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.

Crearea unui aspect de grilă CSS personalizat pentru modulele Divi

Partea 1: Adăugarea modulelor la o coloană Divi

Înainte de a ne organiza modulele într-un aspect de grilă, să adăugăm mai întâi toate modulele pe care dorim să le folosim în coloana noastră.

Pentru a începe, creați un nou rând cu o coloană în secțiunea obișnuită implicită din Divi Builder.

Crearea modulelor

În coloana rândului, adăugați un nou modul de text. Apoi actualizați setările de conținut ale modulului după cum urmează:

1. Adăugați un titlu H2 deasupra textului de paragraf al conținutului implicit al corpului
2. Culoare fundal: # 333333

Apoi actualizați setările de proiectare după cum urmează:

1. Font text: Poppins
2. Culoarea textului: deschis
3. Selectați fila H2 sub Textul antetului
4. Rubrica 2 Stil font: TT
5. Căptușeală: 10% sus, 10% jos, 10% stânga 10% dreapta

NOTĂ : Pentru simplitate, vom rămâne cu utilizarea mai multor module de text cu diferite culori de fundal pentru a arăta o distincție între fiecare modul. Dar, așa cum vă voi explica mai târziu, puteți utiliza orice combinație de module doriți (module blurb, module call to action, module formular de contact etc.).

Deschideți vizualizarea straturilor (opțional) și creați următorul modul de text după cum urmează:

1. Duplicați modulul text.
2. Deschideți setările de text pentru modulul duplicat.
3. Actualizați culoarea de fundal
   • Culoare fundal: # 4c6085

Repetați acest proces pentru a crea al treilea modul de text după cum urmează:

1. Duplicați modulul text anterior.
2. Deschideți setările de text pentru modulul duplicat.
3. Actualizați culoarea de fundal
   • Culoare fundal: # 39a0ed

Repetați acest proces încă o dată pentru a crea al patrulea modul de text după cum urmează:

1. Duplicați modulul text anterior.
2. Deschideți setările de text pentru modulul duplicat.
3. Actualizați culoarea de fundal
   • Culoare fundal: # 13c4a3

Pentru a crea următoarele patru module, utilizați caracteristica multiselectare pentru a selecta toate cele patru module. Apoi copiați și lipiți modulele în aceeași coloană pentru a crea un total de opt module de text.

Partea 2: Crearea aspectului grilei CSS pentru module

Acum că modulele noastre sunt la locul lor, suntem pregătiți să creăm grila CSS pentru aceste module.

Setări rând

Pentru acest exemplu, folosim un aspect cu o coloană, astfel încât să putem afișa grila modulului nostru într-un aspect cu lățime completă. Deci, va trebui să actualizăm setările rândului pentru a ne asigura că rândul se întinde pe toată lățimea paginii. De asemenea, trebuie să eliminăm lățimea implicită a jgheabului, astfel încât să nu fie adăugate margini suplimentare la modulele noastre.

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

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Adăugarea grilei CSS la coloană pentru a construi aspectul grilei pentru module

Acesta este pasul cheie din tutorialul care creează aspectul modulelor folosind proprietatea CSS Grid.

Pentru a face acest lucru, vom adăuga trei linii de CSS în Coloană care vor determina aspectul modulelor noastre.

Deschideți setările coloanei și, sub fila avansată, lipiți următorul CSS în Elementul principal:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

Prima linie a CSS prezintă conținutul (sau modulele) în conformitate cu modulul grilă CSS.

afișaj: grilă

A doua linie a CSS definește șablonul de coloană al grilei. În acest caz, grila va avea patru coloane cu lățimea de 25% fiecare (vezi captura de ecran de mai sus).

grilă-șablon-coloane: 25% 25% 25% 25%

A treia linie a CSS specifică faptul că rândurile vor fi generate automat, după cum este necesar, cu o dimensiune (sau înălțime) setată la auto. Aceasta înseamnă că înălțimea fiecărui rând va fi determinată de înălțimea verticală a conținutului (sau modulelor) din rând (a se vedea captura de ecran de mai sus).

grilă-auto-rânduri: auto

Reglați aspectul grilei pe mobil

De asemenea, va trebui să ajustăm aspectul grilei de pe dispozitivele mobile, după cum este necesar.

Pentru a face acest lucru, trebuie pur și simplu să adăugăm CSS suplimentar la fiecare tabletă pe un dispozitiv mobil care modifică numărul de coloane și lățimea fiecărei coloane.

În acest exemplu, vom schimba aspectul grilei pentru modulele de pe tabletă pentru a avea două coloane care au fiecare 50% lățime.

Deschideți opțiunile responsive și selectați fila tabletă sub elementul principal și lipiți următorul CSS:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

Pentru afișarea telefonului, dorim un aspect cu o singură coloană. Pentru a crea acest lucru, lipiți următorul CSS în fila Telefon Element principal:

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

Partea 3: Efectuarea de modificări la elementele din grilă (sau module)

Adăugarea unui nou modul la grilă și modul în care reacționează

Acum că fiecare modul se află în grila CSS, adăugarea unui nou modul va împinge celelalte module spre dreapta și va crea automat noi rânduri, după cum este necesar.

Deoarece oricum mai avem nevoie de un modul pentru acest aspect, copiați primul modul de text pentru a vedea cum se ajustează celelalte module în grilă.

Cum răspunde grila la module cu cantități diferite de conținut

În acest moment, toate modulele de text au aceeași cantitate de conținut, astfel încât este greu de văzut modul în care aspectul grilei gestionează modulele cu cantități diferite de conținut. Pentru a vedea cum funcționează, modificați cantitatea de text al paragrafului din fiecare modul. Observați că modulele vor rămâne la aceeași înălțime ca modulul cu cel mai mare conținut din același rând. Și înălțimea rândului va fi, de asemenea, determinată de modulul cu cel mai mare conținut (sau înălțime verticală).

Schimbarea poziției modulelor (sau elementelor de grilă)

Elementele CSS Grid pot fi poziționate utilizând sistemul de numerotare a liniei încorporat al modulului grid. Fiecare linie de pe grilă reprezintă un număr. Pentru coloane, numerele de linie încep de la 1 și continuă orizontal. Fiecare număr de linie se află la începutul și la sfârșitul fiecărei coloane. Deci, pentru structura noastră cu patru coloane, numărul liniei începe la 1 în stânga primei coloane și se termină la 5 în partea dreaptă a celei de-a patra coloane. Și, deoarece avem trei rânduri, numerele de linie pentru rânduri încep de la 1 în partea de sus a primului rând și continuă până la 4 în partea de jos a celui de-al treilea rând.

Pentru a schimba poziția unui modul (sau a unui element de grilă) în CSS Grid, putem stabili unde dorim să fie plasat un anumit modul în grilă. Aceasta va suprascrie plasarea implicită a modulului în grilă.

Pentru acest exemplu, vom muta primul modul de text într-o poziție diferită. Pentru a face acest lucru, trebuie să adăugăm două linii de CSS la modul.

Deschideți setările pentru primul modul de text și lipiți următorul CSS personalizat în elementul principal:

grid-column: 2/4;
grid-row: 2/3;

Prima linie a CSS definește poziția modulului (sau elementului de grilă) orizontal, spunând modulului să înceapă pe linia 2 a coloanei și să se termine pe linia 4 a coloanei.

coloana-grilă: 2/4

A doua linie a CSS definește poziția modulului (sau elementului de grilă) pe verticală, spunând modulului să înceapă pe rândul 2 și să se termine pe rândul 3.

grilă-rând: 2/3

Pentru afișarea tabletelor și a telefonului, dorim să readucem modulul în locația inițială. Acest lucru este util pentru păstrarea antetului principal în partea de sus a paginii.

Pentru a face acest lucru, selectați fila tabletei sub opțiunea de reacție pentru elementul principal și lipiți următorul CSS:

grid-column: auto;
grid-row: auto;

Acum poziția modulului va reveni la fluxul original (automat) al elementelor din grilă.

Să mergem mai departe și să poziționăm încă câteva module (sau elemente de grilă) folosind această metodă.

Vom poziționa cel de-al treilea modul de text (acum în a doua coloană a rândului de sus) într-o nouă locație setată în grilă. Această nouă poziție va începe de la linia de coloană 1 și se va termina pe linia de coloană 2 și va începe, de asemenea, de la rândul 2 și se va termina pe rândul 4.

Pentru aceasta, deschideți setările pentru al treilea modul de text și lipiți următorul CSS personalizat în elementul principal:

grid-column: 1/2;
grid-row: 2/4;

Acum putem schimba poziția înapoi pe dispozitivul mobil adăugând următorul CSS pentru tabletă:

grid-column: auto;
grid-row: auto;

Pentru plasarea noastră finală a grilei de module personalizate, vom poziționa cel de-al șaptelea modul de text (acum în ultima coloană a celui de-al doilea rând) într-o nouă locație setată în grilă. Această nouă poziție va începe de la linia de coloană 4 și se va termina pe linia de coloană 5 și va începe, de asemenea, de la rândul 2 și se va termina pe rândul 4.

Pentru aceasta, deschideți setările pentru al șaptelea modul de text și lipiți următorul CSS personalizat în elementul principal:

grid-column: 4/5;
grid-row: 2/4;

Apoi lipiți următorul CSS pentru afișarea tabletei, așa cum am făcut pentru modulele anterioare.

grid-column: auto;
grid-row: auto;

Alinierea conținutului modulului (sau elementului grilei) la centru

Ne-am putea opri aici, dar am pierde o modalitate utilă de a alinia (sau a centra) conținutul modulului nostru pe verticală. A avea un conținut modul (sau element de grilă) centrat vertical este o caracteristică convenabilă a unui aspect de grilă, deoarece face totul mai simetric și mai plăcut din punct de vedere estetic.

Pentru a face acest lucru, putem adăuga un fragment de CSS care utilizează proprietatea flex CSS pentru a alinia și justifica conținutul la centru. Trebuie să adăugăm acest fragment la fiecare dintre module. Pentru a face acest lucru, putem utiliza multiselectarea pentru a selecta toate modulele (sau elementele de grilă) care nu au deja CSS personalizat la elementul principal (nu vrem să înlocuim acele module cu poziții personalizate). Apoi deschideți setările elementului deschizând setările pentru unul dintre modulele selectate. Sub fila Advanced, lipiți următorul CSS pentru elementul principal:

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

Acum putem să ne întoarcem la celelalte trei module (modulul # 1, # 3 și # 7) individual și să adăugăm același fragment de CSS în plus față de CSS care a fost folosit pentru a da modulului o poziție personalizată pe grilă. Asigurați-vă că adăugați fragmentul CSS sub CSS-ul existent atât pentru desktop, cât și pentru tabletă.

Adăugați CSS la primul modul de text

Adăugați CSS la al treilea modul de text

Adăugați CSS la al șaptelea modul de text

Rezultat final

Iată rezultatul final al aspectului personalizat al grilei CSS pentru modulele noastre de text.

Observați modul în care modulele (sau elementele din grilă) se reglează ușor pe diferite lățimi ale browserului pentru un design plăcut și receptiv.

Exemplu Utilizarea diferitelor module și modele

Este greu de văzut potențialul total al utilizării grilei CSS pentru a crea machete de module folosind doar module text. Așa că m-am gândit să vă arăt un design pe care l-am creat aplicând aceiași pași în acest tutorial folosind diferite module și elemente de design din pachetul nostru de fitness Fitness Gym.

Iată-l…

De asemenea, am inclus acest aspect împreună cu aspectul modulului text cu descărcarea gratuită prezentată la începutul acestui post.

Simțiți-vă liber să o luați la o rotație!

Gânduri finale

În acest tutorial, v-am arătat cum să creați un aspect al grilei CSS pentru modulele Divi. Deși procesul se bazează pe unele CSS personalizate, este surprinzător că nu prea mult, având în vedere rezultatele puternice pe care le poate avea. Este plăcut să puteți controla aspectul tuturor modulelor dvs. la nivel de coloană atunci când este necesar pentru mai multe machete Divi unice. Pentru mai multe informații despre grila CSS, ar trebui să consultați acest ghid complet pentru a lua în considerare mai multe posibilități.

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

Noroc!