Eguagliare l’altezza delle card del modulo blog di Divi
In questo tutorial Divi vediamo come eguagliare l'altezza delle card nel modulo blog del tema Divi. Ci basterà un semplice codice CSS per ottenere il risultato desiderato!
Indice
Usa questo indice per andare direttamente al punto che ti interessa
- Introduzione: il modulo blog del tema Divi
- Come uniformare l'altezza dell'anteprima degli articoli nel modulo blog del tema Divi?
- Inserire il codice CSS per eguagliare l'altezza delle card
- Conclusioni e risorse bonus
Introduzione: il modulo blog del tema Divi
Quando abbiamo diverse lunghezze nei riassunti dei nostri articoli, le card presenti nel modulo blog del tema Divi, risultano non allineate in altezza.
Questa situazione crea un risultato graficamente non ottimale e per questo motivo ci siamo messi alla ricerca di una soluzione che risolvesse questo problema.
Si tratta di un piccolo codice CSS che potrai aggiungere alla tua pagina per eguagliare l'altezza delle card dei post in modo corretto.
Ti ricordiamo che questo codice funziona soltanto se stai usando il modulo blog di Divi con l'opzione Griglia attivata.
Prima di iniziare ti ricordiamo che su Viva Divi abbiamo una lista dei migliori plugin per potenziare e personalizzare l'aspetto del blog nel tema Divi.
PASSAGGIO 1
Come uniformare l'altezza dell'anteprima degli articoli nel modulo blog del tema Divi?
Per prima cosa recati direttamente sulla pagina in cui hai integrato il modulo blog di Divi. Se non lo hai ancora inserito, ti basta creare una nuova pagina e cercare tra i moduli disponibili il Blog.
Una volta inserito il modulo blog nella tua pagina, assicurati di aver scelto le categorie che vuoi mostrare nel modulo andando su Contenuti nella sezione Includi categorie.
Nello screenshot di esempio che trovi qui sotto abbiamo selezionato la categoria Titoli demo. Se non selezioni nessuna categoria verranno mostrate in automatico le anteprime di tutti gli articoli che hai pubblicato.
Ora sempre nella tab Contenuti assicurati che sia attiva l'opzione Elementi » Mostra il pulsante “Read More”.
Come ultima cosa assicurati che nella tab Design sia selezionata l'opzione Layout » Griglia.

A questo punto il modulo blog dovrebbe apparirti con le card non allineate, esattamente in questo modo:

Ora come ultimo passaggio prima di passare alla fase successiva dovrai aggiungere una Classe CSS.
Per farlo vai nelle opzioni del modulo blog e nella tab Avanzate » ID & Classi CSS aggiungi questa classe CSS:
bloggrid

PASSAGGIO 2
Inserire il codice CSS per eguagliare l'altezza delle card
Ora per rendere uniforme l'altezza delle card del modulo blog di Divi dovrai aggiungere il codice CSS che trovi qui sotto nella tua pagina blog.
Per copiare il codice che trovi qui sopra direttamente nella tua pagina, puoi inserirlo direttamente nelle opzioni della pagina dove hai inserito il modulo blog:

Altrimenti puoi decidere di attivare questo codice CSS automaticamente in tutto il sito copiandolo nel modificatore di tema nella sezione CSS Aggiuntivo.
Ora finalmente potrai vedere che le card del modulo blog di Divi si sono allineate e hanno tutte la stessa altezza!

Conclusioni e bonus
In questo tutorial Divi abbiamo visto come rendere uguale l'altezza delle card della griglia del blog. Ti ricordiamo che puoi scrivere nei commenti infondo al post se hai domande.
Ecco per te delle risorse utili:
Divi Italian Community
La community Facebook più grande d'Italia in cui trovare supporto, confronto e stimoli da professionisti e amatori che usano il tema Divi ogni giorno per i loro progetti su WordPress.
I migliori plugin per Divi
La nostra raccolta dei migliori plugin dedicati a chi usa il tema WordPress Divi.