Come allineare verticalmente con il sistema di layout Flexbox di Divi 5

La creazione di layout visivamente bilanciati e reattivi è essenziale nel web design moderno e il nuovo sistema di layout Flexbox di Divi 5 rende più facile che mai ottenere l'allineamento verticale. Questa nuova potente funzionalità consente agli utenti Divi di progettare layout flessibili e dinamici, offrendo un controllo completo sul posizionamento verticale. Che si tratti di allineare il testo all'interno di una sezione, bilanciare il contenuto in righe multi-colonna o creare progetti reattivi, Divi 5 semplifica il processo con controlli intuitivi integrati direttamente nel Visual Builder.

In questo post, ti accompagneremo attraverso i passaggi per padroneggiare l'allineamento verticale, fornire esempi del mondo reale e offrire suggerimenti per la creazione di layout reattivi e raffinati. Esploriamo come il sistema di layout Flexbox di Divi 5 può trasformare il tuo approccio all'allineamento verticale.

Comprensione del sistema di layout Flexbox di Divi 5

Flexbox, o layout a scatola flessibile, è un modello di layout CSS progettato per semplificare la disposizione degli elementi all'interno di un contenitore, rendendolo ideale per l'allineamento orizzontale e verticale. A differenza dei metodi tradizionali come carri o margini, Flexbox fornisce un approccio semplice all'organizzazione dei contenuti. Consente agli elementi di regolare dinamicamente le loro dimensioni, ordine e allineamento in base alle dimensioni del contenitore e al Viewport, garantendo che i layout siano coerenti e reattivi in ​​tutte le dimensioni dello schermo.

Con Flexbox, è possibile centrare senza sforzo il contenuto, distribuire lo spazio uniformemente o impilare elementi in un ordine specifico. Questa flessibilità lo rende un must per i web designer e Divi 5 sfrutta il suo potere per consentire agli utenti di creare layout sofisticati senza bisogno di una conoscenza avanzata del CSS.

Come Divi 5 integra Flexbox

Divi 5 ha recentemente introdotto il suo sistema di layout Flexbox. Questo sistema integra Flexbox direttamente nel Visual Builder, consentendo agli utenti di controllare la sezione, la riga, la colonna e le disposizioni del modulo con impostazioni intuitive.

Le caratteristiche chiave includono una varietà di nuovi modelli di riga, dalle singole colonne alle sezioni multi-file, rendendo più facile che mai la creazione di layout in Divi.

I controlli Flexbox di Divi 5 ti consentono di controllare la direzione dei layout, regolare le lacune orizzontali e verticali, giustificare il contenuto all'inizio, al centro o alla fine, abilita avvolgimento e altro ancora.

La nuova funzione della struttura della colonna di modifica di Divi 5 offre un maggiore controllo su come le colonne si comportano su dispositivi più piccoli. È possibile modificare facilmente il numero di colonne o riorderle, rendendo i disegni fantastici su qualsiasi dimensione dello schermo.

Divi 5 si allontana dalle sezioni di specialità e larghezza completa, poiché le righe possono ora essere nidificate l'una nell'altra per creare progetti complessi e reattivi senza fare affidamento su tipi di sezione obsoleti. Questi progressi rendono il sistema di layout Flexbox di Divi 5 uno strumento potente per la costruzione di layout moderni e adattabili direttamente all'interno del costruttore.

Impostazione dell'allineamento verticale in Divi 5

Il sistema di layout Flexbox di Divi 5 è perfettamente integrato nel Visual Builder, rendendo accessibile agli utenti la creazione di progetti flessibili e reattivi. Per iniziare, aprire il Visual Builder su una pagina nuova o esistente e aggiungere una sezione e una riga. Abbiamo creato un intero layout in modo da poter camminare attraverso i gradini per allineare gli oggetti verticalmente in vari scenari.

Allineamento verticale su una sezione

Nelle impostazioni della sezione, vai alla scheda Design e individua le opzioni di layout , dove troverai i controlli Flexbox.

Assicurarsi che Flex sia selezionato in stile layout . Ciò garantisce che Flexbox sia abilitato per la sezione.

Per impostazione predefinita, Start (Flex-Start) è selezionato sotto il contenuto di giustifica . Ciò allinea tutti gli articoli all'inizio del contenitore. In questo esempio, quando si desidera centrare gli oggetti in verticale, puoi scegliere di allinearli al centro , allo spazio o allo spazio uniformemente . Dal momento che abbiamo una singola riga con una riga nidificata inclusa, tutti gli elementi di design nella nostra sezione si incentreranno verticalmente con qualsiasi opzione sopra menzionata.

Allineamento verticale di fila

Puoi anche allineare verticalmente il contenuto a livello di riga. Tuttavia, in questo esempio, utilizzeremo gli elementi allineati anziché giustificare il contenuto per allineare verticalmente i moduli all'interno della riga. Nella scheda Design per la riga, individuare le impostazioni di layout . Assicurati di abilitare Flex e trovare le impostazioni degli elementi allineati . Per impostazione predefinita, viene selezionato Start e questo allinea tutti i moduli nella riga nella parte superiore del contenitore.

Ci sono alcune opzioni a seconda di come si desidera allineare gli elementi. Scegli il centro se desideri che gli articoli nella riga per centra in verticale. Quando si sceglie la fine, tutti gli elementi si allineano alla parte inferiore della riga. L'allungamento fa riempire tutti gli articoli all'altezza della riga.

Allineamento verticale su sezioni multi-file

In questo scenario, abbiamo tre righe in una sezione, tra cui una riga a colonna singola e due file a tre colonne. Utilizzeremo le impostazioni del contenuto giustificere per allineare verticalmente tutti i contenuti all'interno delle righe.

Quando una sezione utilizza le colonne come direzione del layout, giustificare il contenuto allineerà verticalmente le sue righe. Inizio è selezionato per impostazione predefinita. Allinea tutte le file alla parte superiore della sezione. Le righe saranno imballate insieme, a partire dal bordo superiore. Il centro allinea tutte le righe nella sezione verticalmente. Le righe saranno imballate insieme a partire dal bordo inferiore. Quando scegli End , tutte le righe si allineano alla parte inferiore della sezione. Le righe si imballano insieme, a partire dal bordo inferiore.

Lo spazio tra distribuisce le righe uniformemente lungo l'asse principale (verticale). La prima riga sarà a filo contro la parte superiore della sezione, l'ultima riga contro il fondo e qualsiasi file in mezzo avrà una quantità uguale di spazio che li separa. Lo spazio intorno distribuisce le file con spazio uguale attorno a ciascun articolo.

Lo spazio tra le file adiacenti sarà raddoppiato lo spazio alle estremità delle righe (lo spazio tra la prima riga e la parte superiore della sezione e lo spazio tra l'ultima riga e la parte inferiore della sezione). Infine, lo spazio è uniformemente simile allo spazio intorno, ma assicura che lo spazio tra ogni riga sia lo stesso e lo spazio all'inizio e alla fine della sezione è uguale a quella spaziatura.

Allineamento verticale nei gruppi di moduli

Il sistema Flexbox di Divi 5 semplifica anche l'allineamento verticale all'interno dei gruppi di moduli, in particolare quando si utilizzano funzionalità come il Builder Loop per contenuti dinamici. Prendi in considerazione un gruppo di moduli che mostra post di blog con un'immagine, il titolo di posta, post estratto e un pulsante. Senza un corretto allineamento, elementi come i pulsanti possono apparire disallineati tra le colonne. Nelle precedenti versioni Divi, ciò richiedeva altezze di colonna uguali e CSS personalizzati. Divi 5 semplifica questo processo con Flexbox.

Per allineare gli elementi, fare clic nella prima colonna del gruppo del modulo, passare alla scheda Design e individuare le impostazioni Flex. Imposta giustificare il contenuto nello spazio tra . Ciò distribuisce uniformemente i moduli all'interno della colonna, allineando perfettamente i pulsanti di lettura in tutte le colonne senza CSS personalizzati. Questo approccio garantisce layout coerenti e professionali per contenuti dinamici come griglie di blog o elenchi di prodotti.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Suggerimenti per l'allineamento verticale reattivo

Il sistema di layout Flexbox di Divi 5 semplifica l'allineamento verticalmente, ma ci sono alcuni suggerimenti da considerare. Divi 5 offre strumenti robusti per un design reattivo, che consente di perfezionare l'allineamento verticale su tutti i dispositivi. Che tu stia centrando contenuti in una sezione di eroi o allineando i pulsanti in un layout multicolunno, i seguenti suggerimenti ti aiuteranno a sfruttare le caratteristiche di Divi 5 per mantenere layout coerenti e professionali.

Usa i punti di interruzione personalizzabili di Divi 5

Il sistema Flexbox di Divi 5 consente di personalizzare l'ordinamento e l'allineamento dei moduli per diverse dimensioni dello schermo, garantendo che i layout si adattino a tutte le dimensioni dello schermo. Nel Visual Builder, è possibile utilizzare sette punti di interruzione reattive personalizzabili per controllare come appaiono i layout su tutti i dispositivi.

Per ottimizzare l'allineamento verticale, è possibile regolare le strutture di colonne su tablet e dispositivi mobili. Questo garantisce che i tuoi layout sembrino perfetti su ogni dimensione dello schermo. Ad esempio, potresti desiderare due colonne su un tablet e solo una sui dispositivi mobili.

Il sistema di layout Flexbox di Divi 5 consente inoltre di modificare l'ordine delle colonne sui dispositivi mobili, controllando ciò che gli utenti mobili vedono per primo in una sezione o riga.

Usa le variabili di progettazione di Divi 5

La funzione Variabili di progettazione di Divi 5 è perfetta per mantenere una spaziatura e un allineamento coerenti attraverso viste reattive. Le variabili di progettazione consentono di definire valori riutilizzabili per proprietà come imbottitura, margini e dimensioni dei caratteri, garantendo l'uniformità nei layout. Per l'allineamento verticale, è possibile creare una variabile per l'imbottitura verticale per standardizzare la spaziatura all'interno di righe o sezioni. Ad esempio, impostare una variabile di progettazione denominata imbottitura verticale su 30px nel gestore variabile di Divi.

Per applicare la variabile a una riga, accedi alla scheda Design, fare clic sul menu a discesa di spaziatura e fare clic sull'icona del contenuto dinamico per utilizzarla.

Flexbox rende facile l'allineamento verticale

Il sistema di layout Flexbox di Divi 5 semplifica l'allineamento verticale, offrendo una soluzione flessibile e reattiva per la creazione di layout lucido. Integrando Flexbox nel Visual Builder, Divi 5 consente agli utenti di controllare l'allineamento di sezioni, righe, colonne e gruppi di moduli con precisione, il tutto senza bisogno di una conoscenza avanzata di CSS. Le sue caratteristiche garantiscono progetti coerenti e professionali su tutti i dispositivi. Che tu stia centrando contenuti, allineando gruppi di moduli dinamici o creando layout multi-riga, Divi 5 semplifica il processo fornendo risultati.

Scarica l'ultimo Alpha Divi 5 e sperimenta il sistema di layout Flexbox su un nuovo progetto.