Eguagliare l’altezza delle card 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 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.

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:

bloggrid

Ricordati 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 bloggrid  tutte le volte che vorrai eguagliare l ‘altezza delle card del  modulo blog di  Divi.

Qui sotto trovi il codice CSS necessario.

/*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 Imparaqui WordPress Community per condividere la tua esperienza, richiedere consigli e conoscere altre persone che usano il tema Divi, Elementor e altri page builder quotidianamente!

CONDIVIDI
Default image
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!

7 commenti

    • Ciao Enrico, non abbiamo mai fatto dei test con 6 o 9 box, se riusciamo a farli nei prossimi giorni ti scriviamo qui. PS nel frattempo controlla bene di avere seguito tutti i passaggi del tutorial. Un saluto!

Scrivi un commento

Sblocca l'accesso a centinaia di lezioni online

Accedi immediatamente a tutti i corsi e alla community di imparaqui, senza limiti.

Domande frequenti

Come funziona l’accesso ai corsi di imparaqui?

Attivando l’abbonamento trimestrale o annuale a imparaqui puoi accedere a tutti i corsi presenti sul sito senza alcun limite. Mantenendo attivo il tuo abbonamento puoi continuare a seguire tutti i corsi, incluse le nuove uscite. Se decidi di interrompere il rinnovo automatico dell’abbonamento, alla scadenza del periodo di iscrizione perdi l’accesso a tutti i corsi. Puoi disattivare o riattivare l’abbonamento a imparaqui direttamente dal tuo account, in qualsiasi momento.

Posso ricevere fattura?

Sì, per ogni acquisto è possibile inserire i propri dati aziendali e scaricare dal proprio account il pdf della fattura che viene generata automaticamente. imparaqui è un’azienda con sede in Francia, i dati aziendali completi, incluso il numero di partita IVA intracomunitario, sono reperibili nel piè di pagina del sito.

Posso disattivare il rinnovo automatico dell’abbonamento?

Sì, puoi disattivare il rinnovo automatico dell’abbonamento in qualsiasi momento direttamente dal tuo account nella sezione dedicata alla gestione dell’abbonamento.

Quali metodi di pagamento posso usare per iscrivermi?

Puoi pagare con Carta di credito (tramite il servizio sicuro internazionale fornito da Stripe) oppure con PayPal.

È possibile scaricare le video lezioni o avere un accesso a vita ai corsi?

No, attualmente non offriamo questa opzione. Mantenendo attivo l’abbonamento a imparaqui si può accedere a tutti i video corsi senza limiti e da qualsiasi dispositivo.

Cosa contengono i corsi online di imparaqui?

I corsi online di imparaqui sono strutturati in video lezioni e sono arricchiti da materiale utile come link, codice, pdf, immagini, template, ecc. Le video lezioni e il materiale annesso sono accessibili 24 ore su 24 senza limiti e da qualsiasi dispositivo.

I corsi online di imparaqui sono sempre aggiornati?

I nostri insegnanti fanno del loro meglio per mantenere aggiornati e funzionali tutti i corsi di imparaqui. È da tenere presente, tuttavia, che imparaqui non garantisce l’aggiornamento dei corsi della piattaforma, e che l’utente accetta di poter trovare errori e/o parti non aggiornate.

Offrite un servizio di assistenza?

No, non offriamo un servizio di assistenza. Puoi postare eventuali domande o condividere la tua esperienza con gli insegnanti e con la community scrivendo direttamente nella sezione commenti presente sotto a ogni corso. È da tenere presente, inoltre, che i nostri insegnanti non sono tenuti a rispondere per forza o a fornire consulenze o assistenza attraverso la community.

Avete una garanzia di rimborso?

Sì, offriamo una garanzia di rimborso. Nel caso in cui i corsi online di imparaqui non dovessero soddisfare a pieno le tue aspettative, puoi contattarci e richiedere un rimborso. Le condizioni da rispettare per poter ricevere il rimborso sono:

  1. Non aver visionato più del 20% per ogni singolo corso su imparaqui.
  2. Inviare la richiesta di rimborso entro e non oltre 14 giorni dalla data di iscrizione a imparaqui.

Un ulteriore caso in cui viene effettuato il rimborso è legato al rinnovo automatico involontario (per dimenticanza di disattivazione), in questo caso il rimborso deve essere richiesto entro 5 giorni dalla data del rinnovo e senza aver visionato nessun corso nel periodo successivo al rinnovo.

Ho altre domande…

Per qualsiasi altra informazione puoi contattarci da questa pagina. Il team sarà felice di rispondere il prima possibile.