La possibilità di allineare verticalmente il contenuto durante la creazione di un sito con Divi può essere una pratica aggiunta al tuo strumento di progettazione. A volte una determinata disposizione richiede che il contenuto è allineato verticalmente in diversi modi (centrato, in basso, in alto). L'esigenza più comune è quella di centrare il tuo contenuto verticalmente.
Fornisce un delizioso tocco di spaziatura simmetrica che è utile quando si utilizzano layout di più colonne per il contenuto. Inoltre, il contenuto centrato verticalmente rimane centrato su diverse larghezze del browser, eliminando il fastidio di applicare spaziatura interna o margini personalizzati per ottenere una reattività simile.
In questo tutorial, ti mostrerò come aggiungere alcuni piccoli frammenti CSS a qualsiasi colonna per allineare verticalmente il contenuto. Userò alcuni dei layout predefiniti da Divi per esempi su come farlo. Se non sai molto sui CSS, non devi preoccuparti. Sarà abbastanza facile da applicare ai tuoi layout in pochi secondi.
Capire Flex e Divi
La proprietà css Flex (o Flexbox) è semplicemente un modo per posizionare gli elementi in pile orizzontali e / o verticali (molto simili a una tabella). Tranne che, a differenza delle tabelle tradizionali, la proprietà flex ti consente di creare scatole che si adatteranno alle dimensioni del contenuto che contiene.
Divi utilizza la proprietà flex ogni volta che selezioni "Equalizza altezze colonne" come parametro di riga. Ciò garantisce semplicemente che la dimensione delle colonne si adatterà alla dimensione della colonna con la maggior parte dei contenuti. E poiché "Equalizza altezze colonne" consente la flessibilità per il contenitore di righe, puoi facilmente trarne vantaggio aggiungendo CSS alle colonne per regolare il contenuto di ciascuna colonna (o area).
Ad esempio, se aggiungi "margin: auto" a una colonna in una riga, il contenuto di quella colonna (sia che si tratti di uno o più moduli) verrà centrato verticalmente.
Inoltre, se aggiungi "align-items: center" alla tua linea, tutte le colonne (e il loro contenuto) saranno centrate verticalmente.
Naturalmente, ci sono molti altri usi per la proprietà Flex nel web design, così come CSS più avanzati che puoi applicare al tuo tema. Ma per questo tutorial, volevo mantenerlo semplice.
È davvero necessario?
Tecnicamente no. Puoi allineare verticalmente i tuoi contenuti / moduli in una colonna usando la spaziatura personalizzata (padding e margine). Ad esempio, puoi utilizzare le opzioni di spaziatura di Divi per dare una colonna uguale all'imbottitura superiore e inferiore per centrare i moduli verticalmente nella colonna. Puoi anche aggiungere solo il riempimento superiore a una colonna per allineare il contenuto inferiore. Tuttavia, potrebbe essere necessario regolare la spaziatura quando si aggiorna la pagina con più contenuti. Inoltre, può essere difficile mantenere questo allineamento su diverse larghezze del browser.
Quindi, se stai cercando una soluzione per allineare verticalmente il contenuto senza dover pensare alla spaziatura personalizzata, penso che lo troverai utile.
Cominciamo!
Carica il layout predefinito sulla tua pagina
Per iniziare, userò il layout della gamma di portfolio di Interior Design Company. Per ottenere questo layout sulla tua pagina, crea una nuova pagina. Quindi dai un titolo alla tua pagina. Fare clic su "Usa Divi Builder" quindi su "Usa Visual Builder". Quindi seleziona l'opzione "Scegli un layout di base". Quindi selezionare il kit di layout di Interior Design Company dalla finestra a comparsa Carica dalla libreria. Infine, seleziona la pagina Portfolio dall'elenco dei layout e fai clic su "Usa questo layout".
Una volta caricato il layout sulla tua pagina, sei pronto per partire.
Metodo 1: come allineare verticalmente il contenuto utilizzando Flex e Margine automatico
Apri le impostazioni della riga per la seconda riga della pagina (quella direttamente sotto la riga con il titolo della pagina). Sotto le impostazioni di progettazione, apri il gruppo di opzioni di dimensionamento e nota che "Equalizza altezze colonne" è già attivo. Ciò significa che la linea ora ha la proprietà flex ("display: flex;") aggiunta.
Ora vai alle impostazioni della scheda Avanzate per la stessa riga e aggiungi il seguente snippet css sotto la casella di immissione dell'elemento principale della colonna 2.
margin: auto; |
Ora i contenuti della seconda colonna sono stati spostati per essere centrati verticalmente.
Rendi allineati i contenuti inferiori
Se si desidera allineare il contenuto nella parte inferiore in modo che tutti i moduli si impilino nella parte inferiore della colonna, è possibile regolare il valore del margine come segue:
margin: auto 0; |
Allineamento verticale del contenuto per tutte le colonne della tua riga
Invece di aggiungere "margin: auto" a ciascuna colonna singolarmente, puoi anche centrare verticalmente il contenuto di tutte le colonne nella riga aggiungendo il seguente frammento all'elemento principale delle impostazioni della riga.
align-items: center; |
O se vuoi che tutti i contenuti delle tue colonne siano allineati in basso, puoi aggiungere questo estratto:
align-items: flex-end; |
E non dimenticare che puoi sfruttare la funzione Estendi stili di Divi facendo clic con il pulsante destro del mouse sull'elemento principale con il tuo frammento CSS e facendo clic su "Estendi elemento principale".
Quindi, estendi questo elemento css principale a tutte le righe della pagina (o sezione) per centrare verticalmente tutto il contenuto di ciascuna colonna della pagina.
Ora tutto è centrato verticalmente.
Tuttavia, potresti aver notato che il colore di sfondo della colonna bianca non copre più l'intera altezza della riga. Questo perché abbiamo aggiunto "margin: auto" alla colonna. Per risolvere questo problema, puoi cambiare il colore di sfondo della linea in bianco e rimuovere il riempimento dalla linea. Ma invece, ti mostrerò un modo per centrare il contenuto della colonna senza modificare il margine.
Metodo 2: allinea il contenuto verticalmente utilizzando la direzione della flessione della colonna
Nel primo metodo, abbiamo sfruttato la proprietà flex aggiunta alla riga. Ciò ha reso ciascuna delle nostre colonne una "scatola flessibile" che poteva essere allineata verticalmente semplicemente regolando il margine.
Ma esiste anche un modo flessibile per allineare il contenuto delle nostre colonne senza perdere l'effetto "Equalizza altezza colonna" che mantiene le nostre colonne (e gli sfondi delle colonne) della stessa dimensione. Per fare ciò, aggiungeremo solo poche righe di CSS alla nostra colonna in modo che tutti i moduli nella colonna siano impilati verticalmente e quindi centrati.
Torniamo alla nostra linea nell'esempio precedente. Apri le impostazioni della riga e rimuovi qualsiasi CSS personalizzato che potresti avere facendo clic con il pulsante destro del mouse su CSS personalizzato e facendo clic su "Ripristina stili CSS personalizzati".
Quindi aggiungere il seguente CSS nella colonna 2, elemento principale:
display: flex; flex-direction: colonna; giustificare-contenuto: centro;
Oppure, se volessi allineare il contenuto in fondo, basta sostituire "Giustifica il contenuto: centra" con "Giustifica il contenuto: flex-end".
La cosa fantastica di questa configurazione è che se il mio contenuto è centrato verticalmente e viene raggiunta la larghezza della riga, il contenuto rimane centrato.
Crea sfocature (Riepilogo) con diverse quantità di testo allineato verticalmente
Anche rendere il contenuto della colonna centrato verticalmente può essere utile per le sfocature. Come sai, non tutti i blurb conterranno la quantità esatta di testo utilizzata per dscrivere funzione o servizio. Centrare queste sfocature verticalmente può creare un bel design per il tuo layout.
Per questo esempio, allineerò verticalmente i blurb al layout della home page di Digital Payments.
Per prima cosa aggiungerò diverse quantità di testo del corpo ai blurb per dare una rappresentazione più realistica di come potrebbe apparire un sito.
Ora devo andare alle impostazioni della linea e "Armonizza le altezze delle colonne".
Ora posso aggiungere i miei snippet CSS per allineare il mio contenuto e modificare il design.
Nella scheda Avanzate delle impostazioni della riga, possiamo centrare verticalmente il contenuto delle nostre colonne aggiungendo quanto segue sotto Elemento principale:
align-items: center; |
O cambialo seguendo per allinearli.
align-items: flex-end; |
Puoi anche ripristinare i tuoi stili CSS personalizzati e aggiungere i seguenti margini personalizzati per allineare la prima colonna in basso e la terza colonna allineata in alto.
Elemento principale CSS della colonna 1:
margin: auto auto 0; |
Elemento principale CSS della colonna 3:
margin: 0 auto auto; |
E i layout a colonna singola?
Tecnicamente, non è necessario alcun CSS o flex snippet per centrare verticalmente il contenuto della colonna. Tutto quello che devi fare è assicurarti di avere una spaziatura uguale sopra e sotto i tuoi contenuti (o moduli). La maggior parte delle volte, gli utenti necessitano di contenuti verticali centrati su layout con più colonne perché desiderano che i contenuti adiacenti siano perfettamente allineati.
Questo è tutto per questo tutorial che ti mostra come allineare gli elementi sulla stessa linea su Divi.
