Allineare i bottoni nella parte bassa delle colonne di Divi

In questo tutorial, vedremo come allineare i bottoni nella parte bassa delle colonne con l'aiuto di un piccolo codice css.

In questo tutorial, vedremo come allineare i bottoni nella parte bassa delle colonne con l’aiuto di un piccolo codice css.

Quante volte usando il tema Divi hai avuto la necessità di allineare i bottoni nella parte bassa delle colonne?

Nonostante la Elegant Themes abbia introdotto la possibilità di eguagliare l’altezza delle colonne, questo problema si ripresenta più volte creando un certo disagio a livello grafico.

Molte volte sei stato costretto o costretta a scrivere la stessa quantità di testo in ogni colonna per far in modo che quel benedetto bottone rimanesse allineato e non risultasse sfasato rispetto al resto del contenuto.

Per risolvere questo problema andiamo ad utilizzare un piccolo codice CSS che aggiunto alla nostra pagina ci permette di allineare i bottoni nella parte bassa delle colonne.

Indice dei contenuti

  • Allineare i bottoni nella parte bassa delle colonne
  • Inserire il codice CSS
  • Conclusioni e Risorse

Allineare i bottoni nella parte bassa delle colonne

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

La prima cosa da fare è andare a creare una sezione e al suo interno inserire una riga con due o più colonne, nel nostro caso abbiamo scelto di utilizzare una riga a 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, in ogni colonna, aggiungi per esempio un modulo Blurb e aggiungi sotto ad ogni Blurb un modulo Pulsante come nell’immagine sottostante.

Noterai sin da subito i pulsanti non allineati, essi infatti si posizionano in base al contenuto dei Blurb, andando a creare questo scompenso.

Inserire il codice CSS

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

Per prima cosa recati nelle impostazioni avanzate della riga (quella verde) e attribuisci la seguente classe css : iq-allinea-bottone-basso.

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 allineare i bottoni nella parte bassa delle colonne.

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 aggiungere la classe iq-allinea-bottone-basso tutte le volte che vorrai allineare i bottoni nella parte bassa delle colonne.

procedura con CSS nella pagina – passo 1

procedura con CSS nella pagina – passo 2

procedura con CSS nel box del CSS personalizzato

fatto questo i bottoni saranno perfettamente allineati

Qui sotto trovi il codice CSS necessario per procedere:

.iq-allinea-bottone-basso .et_pb_column {
padding-bottom: 50px;
}
.iq-allinea-bottone-basso .et_pb_button_module_wrapper {
position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto;
}

Conclusioni

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

Lascia un commento

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

Ti è stato di aiuto?

Condividi questo post con i tuoi amici!

Il corso completo per imparare a creare siti professionali con WordPress e il tema Divi, in offerta lancio con sconto del 70%! • Accesso lifetime • Aggiornamenti inclusi.
Accedi alla nostra formazione completa su Divi con il bundle Divi 360: 5 corsi online completi in offerta speciale con sconto del 50%! • Accesso lifetime • Aggiornamenti inclusi.

CYBER MONDAY

Ultime 12 ore di sconto del 50% su tutti i corsi di Imparaqui.

Scrivi la tua recensione su Imparaqui!
Ti piacciono i nostri corsi?

Facci sapere! Siamo curiosi di leggere il tuo feedback sui corsi che hai seguito e sulla tua esperienza sul sito!

N.B. Il modulo sopra stante può essere usato unicamente per inviare recensioni su Imparaqui e i corsi. Inviando la recensione accetti che la stessa, corredata del tuo nome (senza cognome) e eventuale immagine Gravatar, possa comparire eventualmente in altre parti del sito e/o sui canali social di Imparaqui.