Rânduri cuibărite și secțiuni de specialitate din Divi 5 (și de ce le depreciem)

Divi a fost mult timp o centrală pentru construirea de site -uri frumoase. Secțiunile de specialitate au extins capacitățile de dispunere a Divi de ani de zile, permițând structuri complexe de coloane cuibărite pe care secțiunile obișnuite nu le puteau gestiona. Dar această abordare a venit cu complexitatea și limitările sale, legată profund de vechiul cadru al codului scurt al lui Divi.

Acum, Divi 5 vine cu rânduri cuibărite - o caracteristică nativă care vă permite să plasați rânduri în coloane oriunde, în secțiuni obișnuite. Această caracteristică elimină constrângerile anterioare și unifică clădirea aspectului sub un singur tip de secțiune flexibil. Cu rânduri cuibărite, puteți construi aceleași machete complexe, asimetrice, pe care le permit secțiunile de specialitate, dar mai intuitiv.

În această postare, vom discuta despre îndepărtarea de secțiunile de specialitate și modul în care rândurile cuibărite și sistemul de dispunere reproiectat Divi 5 oferă o modalitate mai bună de a crea machete complexe. Viitorul lui Divi este aici și este mai simplu, mai flexibil și construit pentru creativitate nelimitată.

Abonați -vă la canalul nostru YouTube

Divi 5 este gata de a fi utilizat astăzi pe site -urile noi.

O retrospectivă a secțiunilor de specialitate

Secțiunile de specialitate au fost introduse în Divi (2014) pentru a aborda limitările secțiunilor obișnuite. Au permis structuri de coloane mai complexe, inclusiv bare laterale și machete asimetrice, care au fost imposibile cu secțiuni obișnuite.

Complexitatea de dispunere bazată pe cod scurt Divi, complexitatea de dispunere fundamental, prin restricționarea adâncimii de cuibărit și introducerea blocajelor de performanță. Aspectele complexe cuibărite au fost greu de construit și predispuse la probleme de redare, astfel încât nu au fost posibile până la secțiuni de specialitate.

Cu toate acestea, au introdus complexitate suplimentară, deoarece secțiunile de specialitate au fost propriile lor (observați trecerea în plus a coloanei și opțiunile CSS pentru aceste secțiuni). Acestea nu erau rele, dar cu siguranță s -au comportat diferit decât secțiunile, rândurile și coloanele obișnuite.

Secțiunile de specialitate au adăugat câmpuri suplimentare de padding și clasa CSS/ID care au fost necesare, dar incongruente cu restul opțiunilor de constructor.

Secțiunile de specialitate au activat structurile de coloane pseudo-cuibate prin îndoirea regulilor codului scurt, creând ceea ce nu a fost posibil în secțiunile obișnuite.

Nu ar fi frumos dacă secțiunile obișnuite ar fi suficient de puternice pentru a face ceea ce ai nevoie de ele?

Rânduri cuibărite și o modalitate mai bună de a construi pagini

Cu Divi 5, rândurile cuibărite permit oficial plasarea rândurilor (și coloanele lor) în alte rânduri și coloane. Acest lucru înseamnă că puteți crea machete profund cuibărite cu coloane și rânduri nelimitate în interiorul celuilalt. Elimină nevoia secțiunilor de specialitate.

Această nouă caracteristică a adăugat, de asemenea, opțiuni de dimensionare la coloane, ceea ce înseamnă că există o modalitate consecventă de dimensiune și stil de toate elementele de containere.

Cum să recreezi cu ușurință o secțiune de specialitate cu rânduri cuibărite

Pachetul de aspect de închiriere a scuterului (în special secțiunea erou a paginii de pornire) folosește o secțiune de specialitate pentru a poziționa elemente cheie. Cu toate acestea, în loc să folosim o secțiune de specialitate cu setările sale unice, vom folosi rânduri cuibărite pentru a obține un efect similar.

Notă: Divi 5 are în prezent secțiuni de specialitate, dar în cele din urmă vor fi depreciate (dar vor funcționa în continuare și vor fi duplicabile la paginile în care există în prezent).

Adăugați o secțiune standard pe pagina dvs. și setați culoarea de fundal la negru (dacă ați importat aspectul pe pagina dvs., aveți imaginea cu cerc punct pe care să o utilizați ca imagine de fundal cu o poziție de centru de sus și dimensiune reală).

Setați lățimea secțiunii și lățimea maximă la 100%.

Asigurați-vă că rândul din secțiune are o structură cu două coloane și o despărțire 3/5 + 2/5. De asemenea, setați lățimea rândului și lățimea maximă la 100%.

Dacă doriți să utilizați alte funcții noi, adăugați doar o singură coloană cu două grupuri de module în interior. Veți utiliza opțiuni de dimensionare pentru grupuri, în loc să vă bazați pe structurile implicite ale coloanelor DIVI.

Coloana din stânga va găzdui partea mai complicată (în ceea ce privește modulele), iar coloana din dreapta va adăposti imaginea mare prezentată.

Vom adăuga toate modulele noastre pentru a înțelege aspectul. Aceasta include mai întâi un titlu de titlu sau un modul de text, apoi un rând cuibărit (două coloane cu lățime egală), un modul de imagine în coloana din stânga și un modul de text și un modul de butoane din coloana din dreapta. Coborâți la rândul părinte, în coloana din dreapta, adăugați un modul de imagine.

Vom reproduce doar distanța/dimensionarea de pe desktop pentru a ilustra modul în care putem recrea secțiunea de specialitate folosind rânduri cuibărite. Continuați și adăugați conținutul și imaginile (din nou, imaginile sunt disponibile atunci când importați aspectul într -o pagină de pe site -ul dvs.). De asemenea, puteți modifica stilurile de text și culori pentru a se potrivi după cum considerați potrivit. Imaginea principală din coloana din dreapta trebuie aplicată ca imagine de fundal, iar modulul de imagine cu imaginea de accent la care vom ajunge mai târziu.

Pentru coloana din stânga a rândului direct sub secțiune, adăugați ~ 10% căptușeală la stânga pentru a -l spaționa din partea stângă (a face acest lucru înseamnă că va trebui să redimensionați lucrurile pentru fiecare punct de întrerupere).

Acum, deschideți setările coloanei din dreapta direct sub rândul părinte. Utilizați o imagine de fundal a coloanei.

Modulul de imagine din această coloană ar trebui să aibă un filtru> Blend> Suprapunere setată la acesta. În poziție avansată>, imaginea este absolut poziționată și ancorată la stânga jos.

Și asta este aproape pentru recrearea secțiunii de specialitate (pe desktop). Deoarece am folosit structura coloanei presetate (coloane 3/5 + 2/5), DIVI are o dimensiune și poziționare implicită la diferite puncte de întrerupere care trebuie abordate. Puteți evita acest lucru folosind o coloană unică părinte, dar grupuri de module pentru a ține conținutul pentru laturile din stânga și din dreapta acestei secțiuni.

Dar cel puțin în acest moment, știi că este posibil să cuibărești rânduri și să recreezi secțiuni de specialitate.

Intrând într -un viitor nou

Divi 5 este aproape de o versiune beta, dar am depus deja eforturi semnificative pentru revizuirea sistemului de proiectare Divi.

• Layouts FlexBox (în curând) : va oferi mai mult control asupra alinierii și distribuției spațiului în rânduri.
• Rânduri cuibărite : cuibărit interminabil al structurilor de rând și coloane pentru a crea destul de mult complexitate cu sistemul de rânduri bazat pe float nativ.
• Dimensiune avansată a coloanei : Controluri de dimensionare care lipsesc adăugate pentru lățimile și înălțimile coloanei.
• Grupuri de module : Permite gruparea modulelor pentru o gestionare și un stil mai ușor.
• Variabile de proiectare : definiți și reutilizați variabilele globale (culori, fonturi, distanțare, imagini, text) pe toate elementele și câmpurile.
• Culorile relative cu HSL (în curând) : control dinamic, constant de culoare, bazat pe nuanță, saturație și lejeritate.

Aceste caracteristici fac parte din reinventarea lui Divi și sunt esențiale pentru revenirea sa. Ne dovedim că fundamentul pe care l -am construit în ultimii doi ani a meritat. Putem construi funcții care nu erau posibile pe D4 și facem fiecare în câteva săptămâni.

Divi 5 este gata de a fi utilizat astăzi pe site -urile noi.

Descărcați Divi 5Learn mai multe despre Divi 5