Cos’è Divi?
Se sapete già cos’è Divi, potete pure passare avanti al contenuto principale del post.
Divi è un tema per Wordpress, studiato con l’obiettivo di essere un pagebuilder molto personalizzabile. Un tema simile, ma più famoso, è Elementor.
Usando Divi praticamente ogni giorno per lavoro, mi ritrovo spesso a dover fare delle cose che non sono perfettamente integrate nel sistema, dovendo quindi aggiungere del codice. Per questo motivo, ho deciso d’ora in poi di aggiungere questo tipo di contenuti al mio blog.
Come centrare verticalmente le colonne in una riga
L’obiettivo che vogliamo raggiungere è qualcosa di simile a questo:
Per farlo, prima di tutto apriamo le impostazioni della Riga, e andiamo su Design → Dimensionamento e attiviamo l’opzione Eguaglia Altezza delle Colonne.
Dopodiché, è sufficiente andare nelle opzioni dei css aggiuntivi che potete trovare in Avanzate → CSS personalizzato e, nella sezione Elemento Principale, aggiungere il seguente codice:
align-items: center;
Ed ecco che le colonne saranno tutte centrate verticalmente!
Ma come funziona?
Il motivo è semplice: quando attiviamo l’opzione “Eguaglia Altezza delle Colonne”, in pratica
stiamo trasformando l’elemento HTML della Riga in un container flexbox (è come se aggiungessimo
display: flex ai css dell’elemento).
In un container flexbox, possiamo utilizzare la proprietà align-items per decidere la posizione
verticale degli elementi al suo interno. Altri valori possibili sono flex-start (che è la posizione
iniziale, cioè in alto) e flex-end che sposta tutti gli elementi sul fondo.
Come centrare verticalmente una singola colonna
Alternativamente, dopo aver attivato l’opzione “Eguaglia Altezza delle Colonne” nel modo che abbiamo visto prima, possiamo decidere come posizionare ogni singola colonna andando nei suoi “CSS personalizzati” e aggiungendo il seguente codice:
align-self: center;E questo è tutto! Buon lavoro 👋🏼
Altri riferimenti
- Guida di HTML.it su flexbox (un po’ datata, ma ancora buona)
- Guida di MDN a flexbox in inglese