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.

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

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: