Cum să vă aliniați vertical cu sistemul FlexBox de la Divi 5

Crearea unor machete echilibrate vizual și receptive este esențială în designul web modern, iar noul sistem de aspect FlexBox de la Divi 5 facilitează obținerea alinierii verticale. Această nouă caracteristică puternică permite utilizatorilor DIVI să proiecteze machete flexibile, dinamice, oferind un control complet asupra poziționării verticale. Indiferent dacă aliniează textul într-o secțiune, echilibrarea conținutului în rânduri cu mai multe coloane sau crearea de proiecte receptive, Divi 5 simplifică procesul cu controale intuitive încorporate direct în constructorul vizual.

În această postare, vă vom parcurge pașii pentru a stăpâni alinierea verticală, pentru a oferi exemple din lumea reală și pentru a oferi sfaturi pentru crearea unor machete sensibile și lustruite. Să explorăm modul în care sistemul FlexBox de la Divi 5 vă poate transforma abordarea în aliniere verticală.

Înțelegerea sistemului de aspect FlexBox Divi 5

FlexBox, sau aspectul cutiei flexibile, este un model de aspect CSS conceput pentru a simplifica aranjarea elementelor dintr -un recipient, ceea ce îl face ideal pentru alinierea orizontală și verticală. Spre deosebire de metodele tradiționale precum plutele sau marjele, FlexBox oferă o abordare simplă pentru organizarea conținutului. Permite elementelor să -și ajusteze dinamic dimensiunea, ordinea și alinierea pe baza dimensiunilor containerului și a Viewportului, asigurând că machetele sunt consecvente și receptive pe toate dimensiunile ecranului.

Cu FlexBox, puteți centra fără efort conținutul, distribui spațiul uniform sau stivați elemente într -o anumită ordine. Această flexibilitate îl face o necesitate pentru proiectanții web, iar Divi 5 își valorifică puterea pentru a permite utilizatorilor să creeze machete sofisticate fără a avea nevoie de cunoștințe avansate de CSS.

Cum se integrează Divi 5 FlexBox

Divi 5 a introdus recent sistemul său de aspect FlexBox. Acest sistem integrează FlexBox direct în Visual Builder, permițând utilizatorilor să controleze aranjamentele secțiunii, rândului, coloanei și modulului cu setări intuitive.

Caracteristicile cheie includ o varietate de șabloane de rând noi, de la coloane unice până la secțiuni cu mai multe rânduri, ceea ce face mai ușor decât oricând construirea machetei în divi.

Controalele FlexBox de la Divi 5 vă permit să controlați direcția machetei dvs., să reglați lacunele orizontale și verticale, să justificați conținutul la pornire, centru sau sfârșit, activați ambalarea și multe altele.

Noua caracteristică a structurii coloanelor de schimbare a Divi 5 vă oferă mai mult control asupra modului în care coloanele se comportă pe dispozitive mai mici. Puteți modifica cu ușurință numărul de coloane sau le puteți reordona, făcând modelele să arate excelent pe orice dimensiune a ecranului.

Divi 5 se îndepărtează de secțiunile de specialitate și de lățime completă, deoarece rândurile pot fi acum cuibărite unul în altul pentru a crea modele complexe, sensibile, fără a se baza pe tipuri de secțiuni învechite. Aceste progrese fac din sistemul de aspect FlexBox Divi 5 un instrument puternic pentru construirea unor machete moderne, adaptabile, direct în cadrul constructorului.

Configurarea alinierii verticale în Divi 5

Sistemul de aspect FlexBox al DIVI 5 este integrat perfect în constructorul vizual, ceea ce face accesibil pentru utilizatori să creeze modele flexibile și receptive. Pentru început, deschideți constructorul vizual pe o pagină nouă sau existentă și adăugați o secțiune și un rând. Am creat un aspect întreg, astfel încât să putem parcurge pașii pentru a alinia articolele vertical în diverse scenarii.

Aliniere verticală pe o secțiune

În setările secțiunii, navigați în fila de proiectare și localizați opțiunile de aspect , unde veți găsi controalele FlexBox.

Asigurați -vă că flexul este selectat în stilul de aspect . Acest lucru asigură că FlexBox este activat pentru secțiune.

În mod implicit, Start (Flex-Start) este selectat sub Conținut Justify . Aceasta aliniază toate articolele de la începutul containerului. În acest exemplu, atunci când doriți să centrați pe obiecte pe verticală, puteți alege să le aliniați la centru , spațiu în jur sau spațiu uniform . Deoarece avem un singur rând cu un rând cuibărit inclus, toate elementele de proiectare din secțiunea noastră se vor concentra pe verticală cu orice opțiune menționată mai sus.

Aliniere verticală la rând

De asemenea, puteți alinia vertical conținutul la nivelul rândului. Cu toate acestea, în acest exemplu, vom folosi elemente de aliniere, mai degrabă decât să justificăm conținutul pentru a alinia vertical modulele din rând. În fila Design pentru rând, localizați setările de aspect . Asigurați -vă că activați Flex și găsiți setările elementelor de aliniere . În mod implicit, este selectat Start , iar aceasta aliniază toate modulele din rând în partea de sus a containerului.

Există câteva opțiuni în funcție de modul în care doriți să aliniați elementele. Alegeți centru dacă doriți articolele din rând pentru a vă centra pe verticală. Când alegeți sfârșitul, toate elementele se vor alinia în partea de jos a rândului. Stretch face ca toate articolele să umple înălțimea rândului.

Aliniere verticală pe secțiuni cu mai multe rânduri

În acest scenariu, avem trei rânduri într-o secțiune, inclusiv un rând cu o singură coloană și două rânduri cu trei coloane. Vom folosi setările de conținut justificați pentru a alinia vertical tot conținutul din rânduri.

Când o secțiune folosește coloanele ca direcție de aspect, justificați conținutul își va alinia verticală rândurile. Start este selectat în mod implicit. Aliniază toate rândurile în partea de sus a secțiunii. Rândurile vor fi ambalate împreună, pornind de la marginea superioară. Centrul aliniază toate rândurile din secțiune pe verticală. Rândurile vor fi ambalate împreună pornind de la marginea de jos. Când alegeți End , toate rândurile se aliniază în partea de jos a secțiunii. Rândurile se vor împacheta împreună, pornind de la marginea de jos.

Spațiul dintre distribuie rândurile uniform de -a lungul axei principale (vertical). Primul rând va fi aruncat în sus pe partea de sus a secțiunii, ultimul rând pe partea de jos, iar orice rânduri între ele vor avea o cantitate egală de spațiu care le separă. Spațiul din jur distribuie rândurile cu un spațiu egal în jurul fiecărui articol.

Spațiul dintre rândurile adiacente va dubla spațiul de la capetele rândurilor (spațiul dintre primul rând și partea superioară a secțiunii și spațiul dintre ultimul rând și partea inferioară a secțiunii). În cele din urmă, spațiul uniform este similar cu spațiul din jur, dar asigură că spațiul dintre fiecare rând este același, iar spațiul de la începutul și sfârșitul secțiunii este, de asemenea, egal cu acea distanță.

Aliniere verticală în grupuri de module

Sistemul FlexBox al Divi 5 simplifică, de asemenea, alinierea verticală în cadrul grupurilor de module, în special atunci când utilizați funcții precum Bucla Builder pentru conținut dinamic. Luați în considerare un grup de module care afișează postări de blog cu o imagine, titlu de postare, extras de postare și un buton. Fără aliniere adecvată, elemente precum butoanele pot apărea greșit pe coloane. În versiunile anterioare Divi, aceasta a necesitat înălțimi egale de coloană și CSS personalizate. Divi 5 simplifică acest proces cu FlexBox.

Pentru a alinia elemente, faceți clic pe prima coloană a grupului de module, navigați la fila Design și localizați setările Flex. Setați justificați conținutul în spațiu între . Acest lucru distribuie uniform modulele din coloană, alinând perfect mai multe butoane citite pe toate coloanele fără CSS personalizate. Această abordare asigură machete consistente și profesionale pentru conținut dinamic, cum ar fi grilele de blog sau listările de produse.

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!

Sfaturi pentru alinierea verticală receptivă

Sistemul de aspect FlexBox al Divi 5 face ușor alinierea verticală a conținutului, dar există câteva sfaturi de luat în considerare. Divi 5 oferă instrumente robuste pentru proiectarea receptivă, permițându-vă să reglați alinierea verticală pe toate dispozitivele. Indiferent dacă centrați conținutul într-o secțiune Hero sau aliniați butoane într-un aspect pe mai multe coloane, următoarele sfaturi vă vor ajuta să utilizați caracteristicile Divi 5 pentru a menține machete profesionale consecvente.

Utilizați punctele de întrerupere personalizabile ale Divi 5

Sistemul FlexBox al Divi 5 vă permite să personalizați comanda și alinierea modulului pentru diferite dimensiuni ale ecranului, asigurându -vă că machetele dvs. se adaptează la toate dimensiunile ecranului. În Visual Builder, puteți utiliza șapte puncte de întrerupere responsabile personalizabile pentru a controla modul în care apar machete pe dispozitive.

Pentru a optimiza alinierea verticală, puteți regla structurile de coloane pe tabletă și dispozitive mobile. Acest lucru asigură că machetele dvs. arată perfect pe fiecare dimensiune a ecranului. De exemplu, este posibil să doriți două coloane pe o tabletă și doar una pe dispozitivele mobile.

Sistemul de aspect FlexBox Divi 5 vă permite, de asemenea, să schimbați ordinea coloanelor dvs. pe dispozitive mobile, controlând ceea ce utilizatorii de telefonie mobilă văd mai întâi într -o secțiune sau un rând.

Utilizați variabilele de design Divi 5

Caracteristica Variabilelor de design Divi 5 este perfectă pentru menținerea distanțării și alinierii constante în viziuni receptive. Variabilele de proiectare vă permit să definiți valori reutilizabile pentru proprietăți precum căptușirea, marjele și dimensiunile fontului, asigurând uniformitatea în machete. Pentru aliniere verticală, puteți crea o variabilă pentru căptușeală verticală pentru a standardiza distanța în rânduri sau secțiuni. De exemplu, setați o variabilă de proiectare numită Padding vertical la 30px în managerul variabil al DIVI.

Pentru a aplica variabila la un rând, navigați la fila Design, faceți clic pe meniul derulant Spacesing și faceți clic pe pictograma conținut dinamic pentru a o utiliza.

FlexBox face ușoară alinierea verticală

Sistemul de aspect FlexBox al Divi 5 face ușoară alinierea verticală, oferind o soluție flexibilă și receptivă pentru crearea unor machete lustruite. Prin integrarea FlexBox în constructorul vizual, DIVI 5 permite utilizatorilor să controleze alinierea secțiunilor, rândurilor, coloanelor și grupurilor de module cu precizie, toate fără a avea nevoie de cunoștințe avansate de CSS. Caracteristicile sale asigură proiecte consistente și profesionale pe toate dispozitivele. Indiferent dacă centrați conținut, aliniați grupuri de module dinamice sau construiți machete cu mai multe rânduri, Divi 5 simplifică procesul în timp ce furnizează rezultate.

Descărcați cea mai recentă Alpha Divi 5 și experimentați cu sistemul FlexBox Layout pe un nou proiect.