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

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

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

• Comprendere la differenza tra Flex e Divi
• È necessario?
• Aggiungi il layout preconfigurato alla tua pagina.
• Metodo 1: allineamento verticale del contenuto con Flex e margine automatico
• Allineamento del contenuto in basso
• Allineamento verticale del contenuto per le colonne della 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 disporre gli elementi in pile orizzontali e verticali (una specie di tabella). A differenza delle tabelle tipiche, tuttavia, la funzionalità flessibile consente di creare riquadri che si “flettono” in base alle dimensioni del contenuto che contengono.

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

Se aggiungi "margine: auto" a qualsiasi colonna di una riga, ad amp , il contenuto di quella colonna (che si tratti di uno o più moduli) sarà centrato verticalmente.

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

Naturalmente, la proprietà flex ha molte più applicazioni nel web design e CSS più avanzati che potresti 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). Ad amp , puoi utilizzare le opzioni di spaziatura di Divi per centrare i moduli verticalmente all'interno della coda per dare a una colonna un uguale riempimento superiore e inferiore. Puoi anche allineare il contenuto in basso aggiungendo il riempimento superiore a una colonna. Quando aggiungi più contenuti alla tua pagina, potrebbe essere necessario modificare la spaziatura. Inoltre, mantenere questo allineamento su più dimensioni di browser potrebbe essere problematico.

Quindi, se stai cercando un modo per allineare le informazioni verticalmente senza doverti 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 per la società di interior design dalla finestra Carica dalla libreria. Infine, dalla selezione dei layout, scegli la pagina Portfolio e fai clic su "Utilizza questo layout".

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

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

Apri le impostazioni della riga per la seconda riga (quella direttamente sotto la riga con il titolo della pagina). Attiva/disattiva il gruppo di opzioni di 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 Elemento principale colonna 2, vai alle impostazioni della scheda Avanzate per la stessa riga e aggiungi il seguente snippet CSS.

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

01	margine: automatico;

Allineamento del contenuto in basso

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

01	margine: automatico 0;

Allineamento verticale del contenuto per le colonne della riga

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

01	allineare gli elementi: centro;

Puoi anche utilizzare questo snippet se desideri che tutte le informazioni nelle colonne siano allineate in basso:

01	elementi di allineamento: flex-end;

Ricorda che puoi utilizzare la funzione Estendi stili di Divi facendo clic con il pulsante destro del mouse sull'elemento principale con il tuo snippet 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 sezione).

Ora tutto è bilanciato verticalmente.

Tuttavia, potresti aver osservato che il colore di sfondo bianco della colonna non copre più l'intera riga a causa dell'aggiunta di "margine: auto" nella colonna. Potresti rimediare a questo modificando il colore di sfondo della riga in bianco e rimuovendo il riempimento della riga. Ti insegnerò invece 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 utilizzato la proprietà flex aggiunta per prima alla riga. Di conseguenza, ciascuna delle nostre colonne è diventata una “scatola flessibile” che poteva 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 in modo 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", puoi rimuovere qualsiasi CSS personalizzato che potresti avere nelle Impostazioni riga.

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

010203

display: flex;direzione-flex: colonna;giustificare-contenuto: centro;

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 in modo che la riga sia a tutta larghezza, il contenuto rimane centrato.

Realizzazione di blurb allineati verticalmente con varie quantità di testo

Anche centrare verticalmente il contenuto delle colonne può essere d'aiuto con i trafiletti. Come forse saprai, non tutti i trascritti avranno la stessa quantità di testo per descrivere una funzionalità o un servizio. Rendere queste trascrizioni centrate verticalmente può aiutare il tuo layout ad apparire bello.

Per il layout della home page dei pagamenti digitali, allineerò verticalmente le informazioni in questo amp .

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

Ora devo "Equalizzare le altezze delle colonne" nelle impostazioni della riga.

Ora posso allineare il testo e modificare il design utilizzando gli snippet CSS.

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

01	allineare gli elementi: centro;

Si prega di modificarlo come segue per allinearli in basso.

01	elementi di allineamento: flex-end;

Puoi anche allineare la prima colonna in basso e la terza colonna in alto reimpostando gli stili CSS personalizzati e aggiungendo i seguenti margini personalizzati.

 Colonna 1 Elemento principale CSS:

01	margine: automatico automatico 0;

 Colonna 3 Elemento principale CSS:

01	margine: 0 automatico automatico;

Che dire dei layout con una sola colonna?

Non hai bisogno di uno snippet CSS o di un flex per centrare verticalmente il contenuto di una colonna. Tutto quello che devi fare è assicurarti che il testo abbia la stessa spaziatura sopra e sotto (o moduli). La maggior parte dei consumatori richiede contenuti centrati 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 personalizzato, ritengo che possa essere utile per le persone che cercano una soluzione rapida per una procedura che richiede molto tempo. Non esitate a condividere le vostre opinioni su questo approccio, nonché amp di lezioni su come vi ha fatto risparmiare tempo e fatica in passato.