Come allineare sezioni, righe, colonne e moduli verticalmente e orizzontalmente in DIVI Builder

Quando si costruisce un sito utilizzando Divi, l'opzione per allineare verticalmente il contenuto potrebbe essere un'aggiunta preziosa al kit di strumenti di progettazione. A seconda del layout, potrebbe essere necessario allineare verticalmente il contenuto in vari modi (centrato, inferiore, superiore). La necessità più comune è che il materiale sia allineato verticalmente. Aggiunge un bel tocco di spaziatura simmetrica ai tuoi contenuti, il che è molto utile quando si utilizzano layout di più colonne. Inoltre, il contenuto centrato verticalmente rimane centrato sulle larghezze del browser, eliminando la necessità di spaziatura interna o margini personalizzati per ottenere una reattività simile.

In questa lezione ti insegnerò come allineare verticalmente il contenuto in qualsiasi colonna usando poche semplici righe di CSS. A scopo dimostrativo, userò molti dei layout prefabbricati di Divi. Non devi preoccuparti se non hai familiarità con i CSS. In pochi secondi, sarai in grado di applicarlo al tuo design.

• Comprendere la differenza tra Flex e Divi
• È necessario?
• Aggiungi il layout preconfigurato alla tua pagina.
• Metodo 1: allineamento verticale del contenuto con margine flessibile e automatico
• Allineare il contenuto in basso
• Allineamento verticale del contenuto per le colonne della tua riga
• Metodo 2: allineamento verticale del contenuto utilizzando la direzione flessibile della colonna
• Che dire dei layout con una sola colonna?
• Considerazioni finali sull'allineamento verticale e orizzontale di DIVI

Comprendere la differenza tra Flex e Divi

L'attributo CSS Flex (o Flexbox) è solo un mezzo per organizzare gli elementi in pile orizzontali e verticali (un po' come una tabella). A differenza delle tabelle tipiche, tuttavia, la funzione flex consente di costruire scatole che si "flettono" in base alle dimensioni del contenuto che contengono.

Divi utilizza l'attributo flex quando scegli "Equalizza altezze colonne" come impostazione di riga. In poche parole, questo assicura che la dimensione di tutte le tue colonne si adatti alla dimensione della colonna con il maggior numero di informazioni. Poiché "Equalizza l'altezza delle colonne" attiva il flex per il contenitore di righe, puoi utilizzarlo aggiungendo CSS alle tue colonne per modificare il contenuto di ciascuna colonna (o casella).

Se si aggiunge “margin: auto” a qualsiasi colonna in una riga, ad es amp le, il contenuto di quella colonna (che si tratti di uno o più moduli) saranno in verticale centrati.

Tutte le tue colonne (e il loro contenuto) saranno centrate verticalmente se aggiungi "align-items: center;" alla tua riga.

Ovviamente, la proprietà flex ha molte più applicazioni nel web design e CSS più avanzati che puoi utilizzare nel tuo tema. Tuttavia, volevo mantenere le cose semplici per questo tutorial.

È necessario?

In senso tecnico, no. Puoi utilizzare la spaziatura personalizzata per posizionare i tuoi contenuti/moduli verticalmente all'interno di una colonna (imbottitura e margine). Per ex amp le, è possibile utilizzare opzioni di spaziatura di Divi per centrare il modulo (s) in verticale all'interno della coda per dare una colonna uguale padding superiore e inferiore. Puoi anche allineare il contenuto in basso aggiungendo il riempimento superiore a una colonna. Quando aggiungi più contenuto alla tua pagina, potresti dover modificare la spaziatura. Inoltre, mantenere questo allineamento su più dimensioni del browser può essere problematico.

Quindi, se stai cercando un modo per allineare le informazioni verticalmente senza doversi preoccupare della spaziatura specifica, penso che lo troverai utile.

Diamo inizio alla festa!

Aggiungi il layout preconfigurato alla tua pagina.

Inizierò con il layout della pagina del portfolio della società di interior design. Crea una nuova pagina per avere questo layout sulla tua pagina. Successivamente, dai un nome alla tua pagina. Seleziona "Usa Divi Builder" e poi "Usa Visual Builder" dal menu a discesa. Quindi scegli "Scegli un layout predefinito" dal menu a discesa. Quindi, seleziona il pacchetto di layout dell'azienda di interior design dalla finestra Carica da libreria. Infine, dalla selezione dei layout, scegli la pagina Portfolio e fai clic su "Usa questo layout".

Sei pronto per iniziare dopo che il layout è stato caricato sulla tua pagina.

Metodo 1: allineamento verticale del contenuto con margine flessibile e automatico

Apri le impostazioni della riga per la seconda riga (quella direttamente sotto la riga con il titolo della pagina). Attiva o disattiva il gruppo di opzioni Ridimensionamento nelle opzioni di progettazione e nota che "Equalizza altezze colonne" è già attivo; Ciò significa che la proprietà flex ("display: flex;") è stata aggiunta alla riga.

Nella casella di input dell'elemento principale della colonna 2, vai alle impostazioni della scheda Avanzate per la stessa riga e aggiungi il seguente frammento CSS.

Il contenuto della seconda colonna è stato ora riposizionato per essere centrato verticalmente.

Allineare il contenuto in basso

Puoi modificare il valore del margine come segue per allineare il contenuto in basso in modo che tutti i moduli si accumulino nella parte inferiore della colonna:

Allineamento verticale del contenuto per le colonne della tua riga

Puoi centrare verticalmente il contenuto di tutte le colonne della riga aggiungendo il seguente frammento all'elemento principale delle impostazioni di riga, anziché aggiungere "margine: automatico" a ciascuna colonna singolarmente.

Puoi anche usare questo frammento se vuoi che tutte le informazioni nelle tue colonne siano allineate in basso:

Ricorda che puoi utilizzare la funzione Estendi stili di Divi facendo clic con il pulsante destro del mouse sull'elemento principale con il tuo frammento CSS e selezionando "Estendi elemento principale".

Quindi, per centrare verticalmente tutto il contenuto di ogni colonna della pagina, applica l'elemento principale CSS a tutte le righe della pagina (o della sezione).

Tutto è ora bilanciato verticalmente.

Tuttavia, potresti aver notato che il colore di sfondo della colonna bianca non copre più l'intera riga a causa dell'aggiunta della colonna di "margine: automatico". Potresti rimediare cambiando il colore di sfondo della riga in bianco e rimuovendo il padding della riga. Invece, ti insegnerò come centrare il contenuto della tua colonna senza dover modificare il margine.

Metodo 2: allineamento verticale del contenuto utilizzando la direzione flessibile della colonna

Abbiamo usato la proprietà flex prima aggiunta alla riga. Di conseguenza, ciascuna delle nostre colonne è diventata una "scatola flessibile" che potrebbe essere allineata verticalmente alterando il margine.

Tuttavia, possiamo utilizzare la direzione flessibile per allineare il testo della nostra colonna senza sacrificare l'effetto "Equalizza altezza colonna", che mantiene le nostre colonne (e gli sfondi delle colonne) della stessa dimensione. Per fare ciò, aggiungeremo alcune righe di CSS alla nostra coda, facendo sì che tutti i moduli al suo interno vengano impilati verticalmente e quindi centrati.

Torniamo alla riga amp precedente. Facendo clic con il pulsante destro del mouse su CSS personalizzato e selezionando "Ripristina stili CSS personalizzati", è possibile rimuovere qualsiasi CSS personalizzato presente nelle Impostazioni riga.

Quindi, nell'elemento principale della colonna 2, applica il seguente CSS:

Cambia "justify-content: center" in "justify-content: flex-end" per allineare il contenuto in basso.

Mi piace questa configurazione perché se posiziono il mio contenuto verticalmente e faccio la larghezza della riga completa, il contenuto rimane centrato.

Realizzare sfocature allineate verticalmente con varie quantità di testo

Anche rendere il contenuto delle tue colonne centrato verticalmente può aiutare con i blurb. Come forse saprai, non tutti i blurb avranno la stessa quantità di testo per descrivere una funzione o un servizio. Rendere questi blurb centrati verticalmente può aiutare il tuo layout a sembrare bello.

Per il Digital Payments pagina Layout, io allineare verticalmente i blurbs di questo ex amp le.

Per creare una rappresentazione più realistica dell'aspetto di un sito, per prima cosa aggiungerò quantità variabili di contenuto del corpo ai blurb.

Ora ho bisogno di "Equalizzare le altezze delle colonne" nelle impostazioni delle righe.

Ora posso allineare il mio testo e modificare il design utilizzando frammenti di CSS.

Possiamo centrare verticalmente il contenuto delle nostre colonne aggiungendo quanto segue alla sezione Elemento principale della scheda Avanzate delle nostre Impostazioni riga:

Si prega di cambiarlo come segue per allinearli in basso.

Puoi anche rendere la prima colonna allineata in basso e la terza colonna allineata in alto reimpostando i tuoi stili CSS personalizzati e aggiungendo i seguenti margini personalizzati.

 Colonna 1 Elemento principale CSS:

 Colonna 3 Elemento principale CSS:

Che dire dei layout con una sola colonna?

Non hai bisogno di uno snippet CSS o di un flex per centrare verticalmente il tuo contenuto di una colonna. Tutto quello che devi fare è assicurarti che il tuo testo abbia la stessa spaziatura sopra e sotto (o moduli). La maggior parte dei consumatori richiede contenuto centrato verticalmente su layout con molte colonne perché desidera che il materiale adiacente sia allineato correttamente.

Considerazioni finali sull'allineamento verticale e orizzontale di DIVI

Anche se questa soluzione si basa su alcuni frammenti minori di CSS personalizzati, ritengo che possa essere utile per le persone che cercano una cura rapida per una procedura che richiede tempo. Non esitare a condividere le tue opinioni su questo approccio, nonché amp di come ti ha fatto risparmiare tempo e fatica in passato.