Come creare altezze di colonne uguali con Flexbox in Divi 5

La creazione di layout pulito e professionale è una pietra miliare di Web design efficace e le uguali altezze della colonna contribuiscono a un layout bilanciato. Che tu stia visualizzando prodotti, servizi o articoli di portafoglio, colonne che allineano perfettamente l'esperienza dell'utente. In Divi 4, erano possibili colonne uguali, ma Divi 5 porta molto di più al tavolo.

In Divi 5, l'integrazione del suo sistema di layout Flexbox migliora il processo, offrendo un modo più semplice e flessibile per creare altezze di colonna uguali. Questo post ti guiderà attraverso la creazione di layout puliti ed equilibrati. Immergiamoci!

Altezze di colonna uguali in Divi 4

In Divi 4, il raggiungimento di colonne a pari altezze era semplice ma limitata. Un interruttore ha permesso a tutte le colonne in una riga di abbinare l'altezza della colonna più alta. Questa caratteristica era un salvavita per il mantenimento della coerenza visiva, ma aveva limiti che spesso richiedevano alternative.

L'effetto di altezza uguale in Divi 4 è stato applicato ai contenitori della colonna, il che significa che i colori di sfondo, le immagini o i bordi dovevano essere impostati a livello di colonna. Questo approccio non si estendeva ai moduli all'interno delle colonne, il che poteva portare a lacune imbarazzanti. Ad esempio, un pulsante sotto un breve modulo di testo in una colonna lascerebbe uno spazio scomodo sotto di esso, mentre un pulsante sotto un modulo di testo più lungo in un'altra colonna lo riempiva, creando un look sbilanciato.

Quando i progettisti desideravano un maggiore controllo, come allineare il contenuto del modulo in verticale o regolare la spaziatura, era spesso necessario CSS personalizzato. Ciò rappresentava una sfida, soprattutto per i principianti, in quanto dovevano immergersi nei campi CSS personalizzati di Divi per ottenere risultati raffinati. Ad esempio, se volevi che i pulsanti si allineino alla parte inferiore della colonna in Divi 4, dovresti usare CSS per raggiungerlo.

Come Flexbox in Divi 5 affronta colonne uguali

Flexbox è perfettamente integrato in Divi 5, rendendo più facile la creazione di altezze di colonna uguali. A differenza dell'opzione basata su levetta di Divi 4, Divi 5 sfrutta Flexbox per fornire controlli integrati che semplificano la progettazione di pagine Web.

Con Flexbox, è possibile allungare automaticamente le colonne per abbinare le più alte mentre offre opzioni di allineamento precise per entrambe le colonne e il loro contenuto. Ciò elimina la necessità di CSS personalizzati, rendendo possibili layout avanzati per ogni utente Divi, sia per principianti che per professionisti. Il sistema di layout Flexbox di Divi 5 consente ai progettisti di creare facilmente progetti professionali coerenti.

Come creare altezze di colonna uguali in Divi 5

Creare colonne a parità di altezza in Divi 5 è un gioco da ragazzi grazie alla sua integrazione Flexbox. Nei passaggi seguenti, dimostreremo come impostare le cose e garantire che tutto si allinea perfettamente.

Passaggio 1: crea il tuo design

Apri il Visual Builder su una pagina nuova o esistente. Fai clic sull'icona Black + per aggiungere una nuova riga .

Quando viene visualizzata la finestra di dialogo Nuova sezione, selezionare il layout a tre colonne in colonne uguali .

Aggiungi un modulo di gruppo nella prima colonna.

Quindi, aggiungi un modulo icona nel modulo di gruppo nella prima colonna.

Seleziona l' icona Controlla nella scheda Contenuto.

Nella scheda Design , imposta il colore icona su #2ea3f2 e la dimensione dell'icona a 36px.

Quindi, aggiungi un modulo di intestazione sotto il modulo icona. Assicurati di aggiungere l'intestazione al modulo di gruppo facendo clic sull'icona Black + invece di quella grigia.

Digita il web design come titolo nella scheda Contenuto .

Nella scheda Design, scegli H5 come livello di intestazione , Inter come carattere di intestazione e medio come peso del carattere di intestazione . Impostare lo stile del carattere di intestazione in maiuscolo , l'allineamento del testo intestazione a sinistra , il colore del testo di intestazione a #000000 e mantenere la dimensione del testo dell'intestazione alla dimensione predefinita di 16px .

Quindi, aggiungi un modulo di testo sotto l'intestazione all'interno del modulo di gruppo. Puoi lasciare le impostazioni così com'è.

Aggiungeremo un modulo pulsante per il modulo finale nella colonna. Tuttavia, invece di aggiungerlo al modulo di gruppo, lo aggiungeremo sotto di esso. Questo ci consentirà di creare altezze di colonna uguali, ma allineare il pulsante verso il basso, rendendo il design più coeso.

Fai clic sulla scheda Design e assegna le impostazioni di stile desiderate al modulo pulsante. Controlla il tuo pulsante per assicurarti che si trovi al di fuori del modulo di gruppo guardando la vista Livelli nel menu a sinistra. Al termine, il pulsante dovrebbe apparire come lo screenshot in basso, allineato a sinistra con uno sfondo blu e un testo bianco.

Passaggio 2: duplicando colonne

Una volta che la prima colonna è piena di contenuto, copriremo il contenuto dalla prima colonna nella seconda e terza colonne e apporteremo alcune modifiche. È possibile eliminare la seconda e la terza colonna e duplicare la prima, oppure copiare e incollare il modulo e il pulsante del gruppo nella seconda e terza colonne.

Successivamente, modifica il titolo di intestazione nella 2a colonna in codifica e il titolo di intestazione nella terza colonna al marketing . Elimineremo anche parte del contenuto nel modulo di testo nella 2a colonna in modo da poter dimostrare come Divi 5 gestisce Flexbox con diverse lunghezze del contenuto. Come puoi vedere, le colonne sono irregolari.

Prima di passare al passaggio successivo, fai clic nella prima colonna e aggiungi la spaziatura di 25px a tutti i lati della nostra colonna.

Aggiungeremo anche un raggio del bordo 15px e una larghezza del bordo 1px con #666666 come colore.

L'ultimo passo nella progettazione della nostra riga è copiare gli attributi di progettazione dalla prima colonna e incollarli nelle colonne rimanenti. Fare clic con il pulsante destro del mouse sulla prima colonna e selezionare Copia gli stili elementi . Quindi, fare clic con il pulsante destro del mouse sulla seconda colonna e selezionare Incolla lo stile dell'elemento . Ripeti questa azione anche per la terza colonna.

Passaggio 3: configurare le impostazioni Flexbox per uguali altezze

Successivamente, dovremo configurare le nostre impostazioni Flexbox per la riga. Divi 5 integra i controlli Flexbox nel suo sistema di layout, spostandosi oltre le altezze della colonna di Equalize di Divi 4. Passare alla scheda Design per la riga e assicurarsi che Flex sia selezionato in layout .

Successivamente, assicurarsi che la riga sia selezionata in direzione del layout , avvia sotto il contenuto di giustificare e che lo stretch sia selezionato in elementi di allineamento . Ciò dirà a Divi 5 di mantenere la struttura della colonna, allineare tutti gli elementi all'interno della riga a sinistra e riempire lo spazio disponibile all'interno del contenitore genitore.

Quindi, fare clic sulle impostazioni per la prima colonna. Fai clic sul menu a discesa layout per rivelare le sue impostazioni nella scheda Design . Per impostazione predefinita, Flex verrà selezionato in layout . Nel campo della direzione del layout , selezionare la colonna . In base al contenuto di giustifica , seleziona lo spazio tra . Allinea tutti gli elementi all'inizio (a sinistra) e lascia impostare avvolgimento del layout .

Ripeti i passaggi precedenti per la 2a e la terza colonne. È inoltre possibile utilizzare la copia/incolla o estendere le funzionalità per applicare le stesse impostazioni alle colonne rimanenti della riga.

Tutti i moduli all'interno del gruppo saranno allungati per riempire lo spazio disponibile e i pulsanti all'esterno del gruppo saranno allineati al fondo.

Passaggio 4: test reattività

I punti di interruzione personalizzabili personalizzabili di Divi 5 semplificano che le altezze uguali della colonna abbiano un bell'aspetto su tutti i dispositivi. Usa la vista reattiva azionaria per visualizzare in anteprima il layout nel Builder Visual. Per impostazione predefinita, ci sono tre punti di interruzione. Tuttavia, Divi 5 ora ha 7, che può essere facilmente abilitato facendo clic sul menu Ellipsis nella barra degli strumenti nella parte superiore del Visual Builder. Abilita i punti di interruzione che desideri e fai clic su Salva per applicarli.

Fare clic per visualizzare in anteprima il layout nella vista tablet . Come puoi vedere, Flexbox mantiene le colonne impilate fianco a fianco.

È possibile modificare la struttura della colonna per consentire alle colonne di impilare verticalmente su dispositivi più piccoli. Mentre nel punto di interruzione del tablet, fare clic sulla scheda Contenuto per la riga . Fai clic su Cambia la struttura della colonna .

Quando viene visualizzata la finestra di dialogo, fare clic per abilitare la riga singola in colonne uguali . Ciò cambierà la riga a 3 colonne in una singola colonna su dispositivi tablet e mobili, preservando la struttura a 3 colonne sui desktop.

Quando previsti in anteprima le modifiche in tutti i punti di interruzione, vedrai come Divi transita il layout per piccoli schermi.

Automatizzando l'allineamento in altezza, i progettisti possono concentrarsi sulla creatività piuttosto che sulle correzioni tecniche, rendendo più facile costruire siti professionali in una frazione del tempo. Il sistema di layout Flexbox di Divi 5 supporta anche una migliore organizzazione dei contenuti attraverso gruppi di moduli, rendendo i moduli di allineamento senza CSS personalizzati più facili che mai.

Casi d'uso comuni

Il sistema Flexbox di Divi 5 rende la creazione di uguali altezze della colonna versatile ed efficace per vari casi d'uso. Di seguito sono riportati alcuni modi comuni in cui il sistema Flexbox di Divi 5 brilla:

1. Elenchi dei prodotti

Nei layout di e-commerce, le schede di prodotto spesso variano in lunghezza del contenuto a causa di titoli o descrizioni. Con Flexbox di Divi 5, è possibile creare una griglia di schede di prodotto in cui ogni colonna mantiene la stessa altezza, garantendo un aspetto pulito e professionale. Ad esempio, un prodotto con una breve descrizione si allinea perfettamente con uno con una descrizione più lunga. Il sistema Flexbox di Divi 5 ti consente di evitare lacune imbarazzanti e creare un'esperienza coesa che promuove la fiducia e il coinvolgimento dell'utente.

2. Sezioni in primo piano

Le sezioni di servizio o funzionalità si adattano bene al sistema Flexbox di Divi. Flexbox in Divi 5 garantisce che tutti i moduli all'interno di una riga abbiano altezze di colonna uguali, creando un aspetto bilanciato e lucido. Che si tratti di visualizzare il BIOS, i servizi o i punti salienti del team, le colonne equalizzate rendono le pagine Web facili da scansionare, migliorando l'esperienza dell'utente.

3. Gride di portafoglio

Una griglia di portafoglio è il caso d'uso perfetto per Flexbox, in particolare per i liberi professionisti che mostrano il loro lavoro. Flexbox garantisce che gli elementi della galleria come le immagini si allineino in modo uniforme, anche con diversi rapporti di aspetto. È possibile utilizzare un modulo di gruppo, assegnare un'immagine di sfondo e regolare la spaziatura di conseguenza. Questo crea una griglia ordinata e professionale che mette in mostra il tuo lavoro in modo coerente, rendendolo ideale per fotografi, designer o agenzie che mirano a impressionare i potenziali clienti.

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!

Acquisire familiarità con la funzione Flexbox di Divi 5 oggi

Il sistema di layout Flexbox di Divi 5 segna un salto significativo in avanti dal modo di Edilizzare le altezze della colonna di Divi 4, trasformando il modo in cui gli utenti Divi creano colonne uguali. Laddove Divi 4 si basava su un metodo rigido e dipendente dallo sfondo che spesso richiedeva CS personalizzati per il raffinamento, Divi 5 sfrutta Flexbox per fornire controlli intuitivi e una reattività senza soluzione di continuità. Il risultato è un sistema più efficiente che rimuove la necessità di soluzioni CSS personalizzate e consente agli utenti Divi di costruire facilmente layout professionali raffinati.

Sei pronto a elevare i tuoi siti Web Divi? Immergiti nelle impostazioni di Flexbox di Divi 5 e sperimenta le possibilità creative che sbloccano. Condividi i tuoi commenti qui sotto o connettiti con noi sui nostri canali di social media per condividere le tue opinioni sulla nostra nuova funzione Flexbox.