Eguagliare l'altezza delle card del modulo blog di Divi

da | Divi, Temi, Tutorial, Tutorial Divi, WordPress | 0 commenti

Esempio di come eguagliare l'altezza delle card della griglia del modulo blog di Divi

In questo tutorial vediamo come eguagliare l'altezza delle card nel modulo blog del tema WordPress Divi. Ci basterà un semplice CSS per ottenere il risultato desiderato!

In questo tutorial vediamo come eguagliare l'altezza del modulo blog di Divi.

Se abbiamo infatti titoli e riassunti di diversa lunghezza, inevitabilmente le card che presentano i nostri articoli verranno mostrate a diverse altezze e provocheranno uno spiacevole effetto di sfasatura tra un articolo e l'altro nella visualizzazione a griglia del modulo blog di Divi.

Ci siamo messi quindi alla ricerca di una soluzione che risolvesse questo problema… e l'abbiamo trovata in un blog americano che si chiama Divi Sensei.

La soluzione proposta si avvale di un codice CSS specifico per risolvere questa situazione e eguagliare l'altezza delle card del modulo blog di Divi.

Ricordiamo che la soluzione proposta ha qualche limite a livello grafico e potrebbe non rendere perfettamente in tutte le modalità di visualizzazione responsive.

Indice dei contenuti

  • Eguagliare l ‘altezza delle card del  modulo blog di Divi
  • Inserire il codice CSS
  • Conclusione e Risorse

Corsi online per imparare a usare WordPress al meglio.

Scopri la Imparaqui Academy

Eguagliare l ‘altezza delle card del  modulo blog di Divi.

Segui i passaggi con attenzione e se hai bisogno scrivi nei commenti.

La prima cosa da fare per eguagliare l'altezza delle card del modulo blog di Divi è andare a creare una sezione che contenga il modulo blog di Divi.

Una volta creata questa sezione, bisogna recarsi sulle opzioni del modulo blog (modulo in grigio) e nella scheda contenuti, includere la categoria di riferimento. Fatto questo sempre nella scheda contenuti spostiamoci su Elementi e attiviamo, l'opzione Mostra il pulsante “Read More”. Infine clicchiamo su Design – Layout e selezioniamo griglia.

Ora, sempre nelle impostazioni del modulo Blog, vai su Avanzate e alla voce Categoria css aggiungi  la seguente stringa: bloggridRicordati di Salvare!

Inserire il codice CSS

Adesso siamo pronti per aggiungere il codice CSS che risolverà il nostro problema !

Ora hai due opzioni: puoi aggiungere il CSS direttamente sulla pagina dove vuoi applicare l'effetto, oppure lo puoi aggiungere nel box del CSS personalizzato nel pannello delle opzioni di Divi (o dal modificatore di tema).

Nel primo caso, se aggiungi il codice alla pagina, dovrai poi ri aggiungerlo su tutte le pagine dove vorrai applicare l'effetto.

Nel secondo caso invece, se lo inserisci nel box del CSS personalizzato, il codice si attiverà in automatico su tutto il sito, quindi ti basterà inserire  la categoria css blodgrid  tutte le volte che vorrai eguagliare l ‘altezza delle card del  modulo blog di  Divi.

Qui sotto trovi il codice CSS necessario.Se non sei ancora iscritto/a alla community di imparaqui vedrai qui sotto un form per accedere e sbloccare il codice.

 

/*Equalize Blog Columns*/
 
.bloggrid .et_pb_salvattore_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
 
.bloggrid article {
        margin-bottom: 20px !important;
 -webkit-box-flex: 1;
     -ms-flex: 1 0 auto;
         flex: 1 0 auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}
 
.bloggrid .post-content {
 -webkit-box-flex: 1;
     -ms-flex: 1 0 auto;
         flex: 1 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: justify;
     -ms-flex-pack: justify;
         justify-content: space-between;
}
 
.bloggrid .column {
        margin-bottom: 20px !important;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

 

 

Conclusioni

Vuoi portare la creazione di siti con Divi ad un livello professionale? Scopri i corsi online dedicati a Divi nella Imparaqui Academy.

Se hai qualsiasi domanda non esitare a scrivere nei commenti e ricorda di iscriverti al gruppo Divi Italian Community per condividere la tua esperienza, richiedere consigli e conoscere altre persone che usano il tema Divi quotidianamente come te!

Marco Melis

Marco Melis

Appassionato di Divi e di Elementor, vivo nel cuore della Sardegna e ho un simpatico cane che si chiama Lillo 🙂 Mi piace creare tutorial per imparaqui.it ogni volta che ho l'ispirazione!

Risorse consigliate

Sconti Tema Divi

Risorse WordPress

Imparaqui Academy

Commenta questo articolo

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Articoli correlati

Registra un nuovo account affiliato

 

👍

Riceverai una notifica da info@imparaqui.it quando il corso sarà online!

Se hai un abbonamento attivo alla Imparaqui Academy potrai accedere subito al corso.

Un saluto dal team di Imparaqui

Restiamo in contatto 👇