Righe nidificate vs sezioni speciali in Divi 5 (e perché le stiamo ammorando)

Divi è stato a lungo una centrale elettrica per la costruzione di bellissimi siti Web. Le sezioni speciali hanno esteso le capacità di layout di Divi per anni consentendo strutture di colonna nidificate complesse che le sezioni regolari non potevano gestire. Ma questo approccio è arrivato con la sua complessità e limitazioni, legato profondamente al vecchio framework di shortcode di Divi.

Ora, Divi 5 viene fornito con righe nidificate: una caratteristica nativa che consente di posizionare le righe all'interno delle colonne ovunque, all'interno di sezioni regolari. Questa funzione rimuove i vincoli precedenti e unifica la costruzione di layout in un unico tipo di sezione flessibile. Con le righe nidificate, è possibile costruire lo stesso complesso layout asimmetrico che le sezioni speciali consentono, ma in modo più intuitivo.

In questo post, discuteremo di allontanarsi dalle sezioni speciali e di come le file nidificate e il sistema di layout riprogettato di Divi 5 forniscono un modo migliore per creare layout complessi. Il futuro di Divi è qui ed è più semplice, più flessibile e costruito per una creatività illimitata.

Iscriviti al nostro canale YouTube

Divi 5 è pronto per essere utilizzato su nuovi siti Web oggi.

Una retrospettiva di sezioni speciali

Sezioni speciali sono state introdotte in Divi (2014) per affrontare i limiti delle sezioni regolari. Hanno permesso a strutture di colonne più complesse, tra cui barre laterali e layout asimmetrici, che erano impossibili con sezioni regolari.

Framework basato su code di Divi Fondamentalmente limitato complessità di layout limitando la profondità di nidificazione e introducendo colli di bottiglia per le prestazioni. I layout nidificati complessi erano difficili da costruire e soggetti a problemi di rendering, quindi non erano possibili fino alle sezioni speciali.

Tuttavia, hanno introdotto ulteriore complessità perché le sezioni speciali erano le loro cose (nota che il passaggio della colonna extra e le opzioni CSS per queste sezioni). Questi non erano male, ma si sono sicuramente comportati in modo diverso rispetto alle sezioni, alle file e alle colonne regolari.

Le sezioni speciali hanno aggiunto campi di imbottitura aggiuntivi e CSS Classe/ID necessari ma incongruenti con il resto delle opzioni del costruttore.

Le sezioni speciali hanno abilitato le strutture di colonne pseudo-nidificate piegando le regole del code, creando ciò che non era possibile nelle sezioni regolari.

Non sarebbe bello se le sezioni regolari fossero abbastanza potenti da fare ciò di cui hai bisogno?

Righe nidificate e un modo migliore per costruire pagine

Con Divi 5, le righe nidificate consentono ufficialmente il posizionamento di righe (e le loro colonne) all'interno di altre righe e colonne. Ciò significa che puoi creare layout profondamente nidificati con colonne e righe illimitate l'una verso l'altra. Elimina la necessità di sezioni speciali.

Questa nuova funzionalità ha anche aggiunto le opzioni di dimensionamento alle colonne, il che significa che esiste un modo coerente per dimensioni e modella tutti gli elementi del contenitore.

Come ricreare facilmente una sezione specializzata con righe nidificate

Il pacchetto di layout a noleggio scooter (in particolare la sezione Hero Page) utilizza una sezione di specialità per posizionare gli elementi chiave. Tuttavia, invece di utilizzare una sezione speciale con le sue impostazioni uniche, useremo le righe nidificate per ottenere un effetto simile.

Nota: Divi 5 ha attualmente sezioni speciali, ma alla fine saranno deprecate (ma funzionano comunque e saranno duplicabili sulle pagine in cui attualmente esistono).

Aggiungi una sezione standard alla tua pagina e imposta il colore di sfondo su Black (se hai importato il layout nella tua pagina, hai l'immagine a punto punto da utilizzare come immagine di sfondo con una posizione centrale superiore e dimensioni effettive).

Imposta la larghezza della sezione e la larghezza massima al 100%.

Assicurarsi che la riga all'interno della sezione abbia una struttura a due colonne e una divisione 3/5 + 2/5. Inoltre, imposta la larghezza della riga e la larghezza massima al 100%.

Se si desidera utilizzare altre nuove funzionalità, aggiungi solo una singola colonna con due gruppi di moduli all'interno. Utilizzerai opzioni di dimensionamento per i gruppi invece di fare affidamento sulle strutture di colonna predefinite di Divi.

La colonna sinistra ospiterà il lato più complicato (in termini di moduli) e la colonna destra ospiterà l'immagine in primo piano.

Aggiungeremo tutti i nostri moduli per avere un'idea del layout. Ciò include prima un modulo di intestazione o di testo, quindi una riga nidificata (due colonne di uguale larghezza), un modulo di immagine nella colonna sinistra e un modulo di testo e un modulo pulsante nella colonna destra. Torna alla riga principale, nella colonna di destra, aggiungi un modulo immagine.

Replicheremo solo la spaziatura/dimensionamento sul desktop per illustrare come possiamo ricreare la sezione specializzata usando le righe nidificate. Vai avanti e aggiungi il contenuto e le immagini (di nuovo, le immagini sono disponibili quando si importano il layout in una pagina sul tuo sito). Puoi anche modificare gli stili di testo e colori da abbinare come si vede opportuno. L'immagine principale nella colonna destra deve essere applicata come immagine di sfondo e il modulo immagine con l'immagine accento che arriveremo in seguito.

Per la colonna sinistra della riga direttamente sotto la sezione, aggiungi ~ 10% di imbottitura sinistra per spazio dal lato sinistro (farlo in questo modo significa che dovrai ridimensionare le cose per ogni punto di interruzione).

Ora, apri le impostazioni della colonna destra direttamente sotto la riga principale. Usa un'immagine di sfondo della colonna.

Il modulo di immagine all'interno di questa colonna dovrebbe avere un filtro> Blend> Overlay impostato su di esso. In una posizione avanzata, l'immagine è assolutamente posizionata e ancorata in basso a sinistra.

E questo è quasi per la ricreazione della sezione specializzata (sul desktop). Poiché abbiamo usato la struttura della colonna preimpostata (colonne 3/5 + 2/5), Divi ha un dimensionamento e un posizionamento predefiniti in vari punti di interruzione che devono essere affrontati. Potresti evitarlo usando una colonna genitore single ma i gruppi di moduli per contenere il contenuto per i lati sinistro e destro di questa sezione.

Ma almeno a questo punto, sai che è possibile nidificare le file e ricreare sezioni speciali.

Entrando in un nuovo futuro

Divi 5 è vicino a un rilascio beta, ma abbiamo già fatto sforzi significativi per revisionare il sistema di progettazione di Divi.

• Layout Flexbox (in arrivo) : offrirà un maggiore controllo sull'allineamento e sulla distribuzione dello spazio all'interno delle righe.
• Righe nidificate : infinita nidificazione di strutture di riga e colonna per creare un bel po 'di complessità con il sistema di riga basato su galleggiante nativo.
• Dimensizzazione di colonne avanzate : aggiunto di controlli di dimensionamento mancanti per larghezze e altezze della colonna.
• Gruppi di moduli : abilita il raggruppamento di moduli per una gestione e uno stile più facili.
• Variabili di progettazione : definire e riutilizzare le variabili globali (colori, caratteri, spaziatura, immagini, testo) in tutti gli elementi e campi.
• Colori relativi con HSL (in arrivo) : controllo del colore dinamico e coerente basato su tonalità, saturazione e leggerezza.

Queste caratteristiche fanno tutte parte della reinvenzione di Divi e sono fondamentali per il suo ritorno. Stiamo dimostrando che la fondazione che abbiamo costruito negli ultimi due anni ne è valsa la pena. Possiamo costruire caratteristiche che non sono state possibili su D4 e stiamo realizzando ciascuna nel giro di poche settimane.

Divi 5 è pronto per essere utilizzato su nuovi siti Web oggi.

Scarica Divi 5Learn Altro su Divi 5