Vai al contenuto principale

Come allineare elementi sulla stessa linea su Divi

Divi: il tema WordPress più semplice da usare

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

La possibilità di allineare verticalmente il contenuto durante la creazione di un sito con Divi può essere un'aggiunta pratica al tuo strumento di progettazione. A volte un determinato layout richiede che il contenuto sia allineato verticalmente in modi diversi (centrato, in basso, in alto). L'esigenza più comune è centrare il 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 snippet CSS a qualsiasi colonna per allineare verticalmente il contenuto. Userò alcuni dei layout predefiniti di Divi per esempi di come farlo. Se non sai molto di 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. Assicura solo che la dimensione delle colonne si adatterà alla dimensione della colonna con più contenuto. E poiché "Equalize Column Heights" consente la flessibilità per il contenitore di righe, puoi trarne vantaggio facilmente aggiungendo CSS alle tue 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".

template divi tema wordpress.png

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.

armonizzare le altezze di columns.png

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

marginauto;

automatic margin divi.png

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:

marginauto 0;

margin divi line.png

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;

allinea gli elementi divi.png

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".

estendere main element.png

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.

espandi gli stili su divi.png

Ora tutto è centrato verticalmente.

aspetto delle modifiche divi.png

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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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;

Sterzo flex-column.png

Oppure, se volessi allineare il contenuto in fondo, basta sostituire "Giustifica il contenuto: centra" con "Giustifica il contenuto: flex-end".

flex alignment end.png

La cosa fantastica di questa configurazione è che se il mio contenuto è centrato verticalmente e viene raggiunta la larghezza della riga, il contenuto rimane centrato.

aspetto di boxes.png

Crea sfocature (Riepilogo) con diverse quantità di testo allineato verticalmente

Anche rendere il contenuto della colonna centrato verticalmente può essere utile per i blurb. Come sai, non tutti i blurb conterranno la quantità esatta di testo utilizzata per descrivere la funzionalità o il servizio. Centrare verticalmente questi blurb 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.

allineamento blorbds.png

Ora devo andare alle impostazioni della linea e "Armonizza le altezze delle colonne".

harmonize columns.png

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;

Modifica l'allineamento del contenuto divi.png

O cambialo seguendo per allinearli.

align-items: flex-end;

allineamento in basso divi.png

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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:

marginauto auto 0;

Elemento principale CSS della colonna 3:

margin0 auto auto;

personalizzare l'allineamento degli abstract divi.png

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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
4 azioni
quota2
Tweet
Enregistrer2