Cum se creează înălțimi de coloane egale cu FlexBox în Divi 5

Crearea unor machete profesionale curate este o piatră de temelie a unui design web eficient, iar înălțimile egale ale coloanei contribuie la un aspect echilibrat. Indiferent dacă afișați produse, servicii sau articole de portofoliu, coloane care aliniază perfect experiența utilizatorului. În Divi 4, au fost posibile coloane egale, dar Divi 5 aduce mult mai mult pe masă.

În Divi 5, integrarea sistemului său de aspect FlexBox îmbunătățește procesul, oferind un mod mai simplu și mai flexibil de a crea înălțimi egale de coloană. Această postare vă va ghida prin crearea unor machete curate, echilibrate. Hai să ne scufundăm!

Înălțimi egale de coloană în Divi 4

În Divi 4, realizarea coloanelor cu înălțimi egale a fost simplă, dar limitată. O comutare a activat toate coloanele dintr -un rând pentru a se potrivi cu înălțimea celei mai înalte coloane. Această caracteristică a fost un salvator pentru menținerea consistenței vizuale, dar a avut limitări care au necesitat adesea soluții de rezolvare.

Efectul de înălțime egală în Divi 4 a fost aplicat la containerele coloanelor, ceea ce înseamnă că culorile de fundal, imaginile sau marginile trebuiau setate la nivelul coloanei. Această abordare nu s -a extins la modulele din coloane, ceea ce ar putea duce la lacune incomode. De exemplu, un buton de sub un modul de text scurt dintr -o coloană ar lăsa un spațiu incomod sub el, în timp ce un buton sub un modul de text mai lung dintr -o altă coloană îl umple, creând un aspect dezechilibrat.

Când designerii doreau mai mult control, cum ar fi alinierea conținutului modulului vertical sau reglarea distanțării, CSS personalizat era adesea necesar. Aceasta a reprezentat o provocare, în special pentru începători, deoarece au trebuit să se scufunde în câmpurile CSS personalizate ale Divi pentru a obține rezultate lustruite. De exemplu, dacă doriți ca butoanele să se alinieze în partea de jos a coloanei din Divi 4, ar trebui să utilizați CSS pentru a o realiza.

Modul în care FlexBox în Divi 5 se adresează coloanelor egale

FlexBox este integrat perfect în Divi 5, ceea ce face ca crearea de înălțimi egale de coloană mai ușor de realizat. Spre deosebire de opțiunea bazată pe comutarea Divi 4, DIVI 5 utilizează FlexBox pentru a oferi controale încorporate care facilitează proiectarea paginilor web.

Cu FlexBox, puteți întinde automat coloanele pentru a se potrivi cu cea mai înaltă, oferind în același timp opțiuni de aliniere precise atât pentru coloane, cât și pentru conținutul acestora. Acest lucru elimină nevoia de CSS personalizate, ceea ce face posibilă machete avansate pentru fiecare utilizator Divi, pentru începători și profesioniști deopotrivă. Sistemul de aspect FlexBox al Divi 5 permite proiectanților să creeze cu ușurință modele profesionale consistente.

Cum să creezi înălțimi egale de coloană în Divi 5

Crearea de coloane cu înălțime egală în Divi 5 este o adiere datorită integrării sale FlexBox. În pașii de mai jos, vom demonstra cum să configurați lucrurile și să ne asigurăm că totul se aliniază perfect.

Pasul 1: Creați -vă designul

Deschideți constructorul vizual pe o pagină nouă sau existentă. Faceți clic pe pictograma Black + pentru a adăuga un rând nou .

Când apare caseta de dialog a noii secțiuni, selectați aspectul cu trei coloane sub coloane egale .

Adăugați un modul de grup în prima coloană.

Apoi, adăugați un modul de pictogramă în modulul de grup din prima coloană.

Selectați pictograma de verificare din fila Conținut.

În fila Design , setați culoarea pictogramei pe #2EA3F2 și dimensiunea pictogramei la 36px.

Apoi, adăugați un modul de rubrică sub modulul pictogramei. Asigurați -vă că adăugați rubrica la modulul de grup făcând clic pe pictograma Black + în locul celui gri.

Tastați designul web ca titlu în fila Conținut .

În fila Design, alegeți H5 ca nivel de rubrică , Inter ca font de rubrică și mediu ca greutatea fontului . Setați stilul fontului de rubrică la majuscule , alinierea textului la stânga la stânga , culoarea textului de titlu la #000000 și păstrați dimensiunea textului la dimensiunea implicită de 16px .

Apoi, adăugați un modul de text sub rubrica din modulul grupului. Puteți părăsi setările așa cum este.

Vom adăuga un modul de buton pentru modulul final din coloană. Cu toate acestea, în loc să -l adăugăm la modulul de grup, îl vom adăuga sub el. Acest lucru ne va permite să creăm înălțimi egale ale coloanei, dar alinierea butonului în partea de jos, ceea ce face ca designul să fie mai coeziv.

Faceți clic pe fila Design și alocați setările de stil dorite în modulul butonului. Verificați butonul dvs. pentru a vă asigura că este în afara modulului de grup, uitându-vă la vizualizarea straturilor din meniul din stânga. Când este finalizat, butonul ar trebui să arate ca imaginea de mai jos-aliniată la stânga cu un fundal albastru și un text alb.

Pasul 2: Duplicarea coloanelor

Odată ce prima coloană va fi completată cu conținut, vom copia conținutul din prima coloană în a doua și a treia coloană și vom face câteva modificări. Puteți șterge a doua și a treia coloană și puteți dubla prima, sau puteți copia și lipi modulul de grup și butonul în a doua și a treia coloană.

Apoi, schimbați titlul de rubrică din a 2 -a coloană la codificare și titlul de rubrică din coloana a 3 -a la marketing . De asemenea, vom șterge o parte din conținutul din modulul de text din a doua coloană, astfel încât să putem demonstra modul în care Divi 5 gestionează FlexBox cu lungimi diferite de conținut. După cum puteți vedea, coloanele sunt inegale.

Înainte de a trece la următorul pas, faceți clic pe prima coloană și adăugați distanță de 25px în toate părțile coloanei noastre.

Vom adăuga, de asemenea, o rază de frontieră de 15px și o lățime de graniță de 1px cu numărul 666666 ca culoare.

Ultimul pas în proiectarea rândului nostru este de a copia atributele de design din prima coloană și de a le lipi în coloanele rămase. Faceți clic dreapta pe prima coloană și selectați Copiați stiluri de element . În continuare, faceți clic dreapta pe a 2-a coloană și selectați stilul de lipire . Repetați această acțiune și pentru a 3 -a coloană.

Pasul 3: Configurați setările FlexBox pentru înălțimi egale

În continuare, va trebui să configuram setările noastre FlexBox pentru rând. DIVI 5 integrează controalele FlexBox în sistemul său de aspect, trecând dincolo de Egalizarea culmilor Egalizați înălțimi. Navigați la fila de proiectare pentru rând și asigurați -vă că Flex este selectat sub aspect .

În continuare, asigurați -vă că rândul este selectat sub direcția de dispunere , porniți sub conținut justificați și întinderea este selectată sub elemente de aliniere . Acest lucru va spune Divi 5 să păstreze structura coloanei, să alinieze toate elementele din rândul din stânga și să completeze spațiul disponibil în containerul părinte.

Apoi, faceți clic pe Setări pentru prima coloană. Faceți clic pe meniul derulant Layout pentru a dezvălui setările sale din fila Design . În mod implicit, Flex va fi selectat sub aspect . În câmpul de direcție de aspect , selectați coloana . Sub Justify Conținut , selectați spațiu între . Aliniați toate articolele la start (stânga) și lăsați setul de ambalare la aspect la nicio înveliș .

Repetați pașii de mai sus pentru a 2 -a și a 3 -a coloane. Puteți utiliza, de asemenea, caracteristicile de copiere/lipire sau extindere pentru a aplica aceleași setări pe coloanele rămase ale rândului.

Toate modulele din grup vor fi întinse pentru a umple spațiul disponibil, iar butoanele din afara grupului vor fi aliniate la partea de jos.

Pasul 4: Răspunderea testelor

Punctele de întrerupere personalizabile ale Divi 5 facilitează asigurarea înălțimilor egale ale coloanei dvs. să arate excelent pe toate dispozitivele. Utilizați comutatoarele de vedere receptive pentru a previzualiza aspectul dvs. în Visual Builder. În mod implicit, există trei puncte de întrerupere. Cu toate acestea, Divi 5 are acum 7, care poate fi activat cu ușurință făcând clic pe meniul Elipsis din bara de instrumente din partea de sus a constructorului vizual. Activați punctele de întrerupere pe care doriți și faceți clic pe Salvați pentru a le aplica.

Faceți clic pentru a previzualiza aspectul dvs. în vizualizarea tabletei . După cum puteți vedea, FlexBox menține coloanele stivuite cot la cot.

Puteți schimba structura coloanei pentru a permite coloanelor să se stiveze vertical pe dispozitive mai mici. În timp ce vă aflați în punctul de întrerupere a tabletei, faceți clic pe fila Conținut pentru rând . Faceți clic pe Schimbare structura coloanei .

Când apare caseta de dialog, faceți clic pentru a activa un singur rând sub coloane egale . Acest lucru va schimba rândul cu 3 coloane într-o singură coloană pe tabletă și dispozitive mobile, păstrând în același timp structura cu 3 coloane pe desktop.

Când previzualizați modificările din toate punctele de întrerupere, veți vedea cum Divi tranziționează aspectul pentru ecrane mici.

Prin automatizarea alinierii înălțimii, designerii se pot concentra pe creativitate, mai degrabă decât pe corecții tehnice, ceea ce face mai ușor construirea de site -uri profesionale într -o fracțiune a timpului. Sistemul FlexBox de la Divi 5 acceptă, de asemenea, o organizație de conținut mai bună prin grupuri de module, facilitând modulele de aliniere fără CSS personalizate ca niciodată.

Cazuri de utilizare obișnuită

Sistemul FlexBox al Divi 5 face ca crearea înălțimilor egale de coloană versatilă și eficientă pentru diverse cazuri de utilizare. Mai jos sunt câteva moduri comune în care sistemul FlexBox al Divi 5 strălucește:

1. Listele de produse

În machete de comerț electronic, cardurile de produs variază adesea în lungimea conținutului din cauza titlurilor sau descrierilor. Cu FlexBox -ul Divi 5, puteți crea o grilă de cărți de produs în care fiecare coloană menține o înălțime egală, asigurând un aspect curat și profesional. De exemplu, un produs cu o scurtă descriere se aliniază perfect cu unul cu o descriere mai lungă. Sistemul FlexBox al Divi 5 vă permite să evitați lacunele incomode și să creați o experiență coezivă care să favorizeze încrederea și implicarea utilizatorului.

2. Secțiuni prezentate

Secțiunile de servicii sau caracteristici sunt potrivite pentru sistemul FlexBox al DIVI. FlexBox în Divi 5 asigură că toate modulele din rând au înălțimi egale ale coloanei, creând un aspect echilibrat și lustruit. Indiferent dacă afișarea bios -ului echipei, a serviciilor sau a evidențierii caracteristicilor, coloanele egalizate fac ca paginile dvs. web să fie ușor de scanat, îmbunătățind experiența utilizatorului.

3. Grile de portofoliu

O grilă de portofoliu este carcasa de utilizare perfectă pentru FlexBox, în special pentru freelancerii care își afișează munca. FlexBox asigură că elementele din galerie precum imaginile se aliniază uniform, chiar și cu raporturi de aspect diferite. Puteți utiliza un modul de grup, a -i atribui o imagine de fundal și puteți regla distanța în consecință. Acest lucru creează o grilă profesională ordonată, care îți prezintă activitatea în mod constant, ceea ce o face ideală pentru fotografi, designeri sau agenții care urmăresc să impresioneze potențialii clienți.

Descărcați fișierele

Descărcați gratuit

Alăturați -vă buletinului informativ Divi și vă vom trimite prin e -mail o copie a pachetului de aspect final al paginii Divi Divi, plus tone de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmați -vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți pur și simplu adresa de e -mail de mai jos și faceți clic pe Descărcare pentru a accesa pachetul de aspect.

Descărcare

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 aspect Divi gratuit săptămânal!

Familiarizați -vă cu funcția FlexBox Divi 5 astăzi

Sistemul FlexBox de la DivI 5 marchează un salt semnificativ înainte de modul Divi 4 de egalizare a înălțimilor coloanei, transformând modul în care utilizatorii Divi creează coloane egale. În cazul în care Divi 4 s-a bazat pe o metodă rigidă, dependentă de fundal, care a necesitat adesea CSS personalizat pentru rafinament, Divi 5 are calea Flexbox pentru a oferi controale intuitive și o reacție fără probleme. Rezultatul este un sistem mai eficient care elimină nevoia de soluții personalizate CSS și permite utilizatorilor DIVI să construiască cu ușurință machete profesionale lustruite.

Sunteți gata să vă ridicați site -urile Divi? Scufundați -vă în setările FlexBox Divi 5 și experimentați cu posibilitățile creative pe care le deblochează. Împărtășiți comentariile dvs. de mai jos sau conectați -vă cu noi pe canalele noastre de socializare pentru a vă împărtăși gândurile despre noua noastră funcție FlexBox.