Offerta Black Friday attiva!

Accesso senza limiti a tutti i corsi online di imparaqui.it

59 / 3 mesi

Al posto del prezzo normale di
75 € / 3 mesi

Attiva abbonamento
oppure
👉 vedi altre promozioni disponibili

Stai per richiedere la pubblicazione del tuo corso su imparaqui.

Il team effettuerà un controllo qualitativo e verificherà che i contenuti siano in linea con l'offerta della piattaforma.

Se il corso viene approvato riceverai un messaggio di conferma via email e potrai subito condividerlo e iniziare ad accumulare le commissioni mensili.

Se non ricevi il messaggio di conferma entro 10 giorni lavorativi significa che il corso non è stato approvato.

Pubblica il tuo corso

Centrare elementi in verticale con Divi

In questa guida di imparaqui.it vediamo come centrare in verticale gli elementi dei moduli del tema Divi di Elegant Themes. Tutorial completo in italiano.

In questa guida di imparaqui.it vediamo come centrare in verticale gli elementi dei moduli del tema Divi di Elegant Themes. Tutorial completo in italiano.

Usando ormai da anni il tema Divi di Elegant Themes spesso abbiamo incontrato la necessità di centrare il contenuto dei moduli in verticale, sembra una cosa banale, ma per ora non esiste questa opzione su Divi!

Alla ricerca di una soluzione sui vari blog che parlano di Divi in America e nel mondo intero, abbiamo scoperto una procedura semplice ed efficace!

Si tratta di un piccolo codice CSS che potrai aggiungere alla tua pagina per centrare i contenuti dei moduli di Divi in verticale.

Indice dei contenuti

  • Allineare elementi in verticale nel tema Divi
  • Inserire il CSS
  • Conclusione e Risorse

Allineare elementi in verticale nel tema Divi

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

La prima cosa da fare è andare a creare una sezione con al suo interno due o più colonne, nel nostro caso abbiamo scelto di utilizzare tre colonne.

Una volta creata questa sezione bisogna recarsi sulle opzioni della riga (quella in verdino) e attivare l’opzione “eguaglia altezza colonne“, esattamente come vedi nello screenshot.

Ora sempre nelle impostazioni della riga vai su Avanzate e sotto ID & Classi CSS aggiungi per ogni colonna che vuoi centrare verticalmente la seguente Classe CSS: iq-centra-verticale, esattamente come da immagine qui sotto:

Inserire il codice CSS

Adesso siamo pronti per aggiungere il codice CSS che farà la magia!

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 di centratura dei moduli in verticale.

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 l’opzione “Eguaglia altezza colonne” e la classe iq-centra-verticale tutte le volte che vorrai applicare l’effetto di allineamento verticale dei moduli.

oppure nel box del CSS personalizzato

Qui sotto trovi il codice CSS necessario:

/* ----- Codice per centrare in verticale i moduli ----- */
.iq-centra-verticale {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

Conclusioni

Vuoi portare la creazione di siti con Divi ad un livello professionale? Scopri i nostri temi child e 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!

CONDIVIDI
Pascal Claro
Pascal Claro

Esperto WordPress, YouTuber, Marketer, Cantautore, Poeta, Creativo. Ho fondato e gestisco la scuola online imparaqui.it dove puoi trovare numerosi corsi online per potenziare business, creatività e lifestyle. Ti consiglio di iscriverti alla newsletter di imparaqui per ricevere tutti gli aggiornamenti importanti!

3 commenti

  1. Ciao, scusate, io non ne vengo a capo…. ho fatto tutti i passaggi più volte creando anche più sezioni per provare le diverse modalità…
    Il risultato non cambia.

    • Ciao Rosario, certo il tutorial funziona ancora, prova a verificare nuovamente i passaggi e ricorda di attivare l’opzione per eguagliare l’altezza delle colonne!

Scrivi un commento

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

Sblocca l'accesso a centinaia di lezioni online

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