Divi è un bellissimo tema per WordPress, sviluppato dalla Elegant Themes, usato in numerosi siti in tutto il mondo: per esempio, anche il sito che stai visitando in questo momento è realizzato con l’ausilio di questo tema.

Se già utilizzi Divi all’interno del tuo sito, ti sarai accorto di quanto sia potente e flessibile, e se ancora non lo utilizzi ti consiglio di iniziare al più presto, perché ti accorgerai che ti semplificherà notevolmente la vita per fare un sacco di cose.

Infatti, è dotato di un pannello di configurazione che ti permette di personalizzare un sacco di aspetti del tema stesso: dai colori alle voci di menu, dalle icone social all’aspetto del blog.

Inoltre, il Divi Builder, con 10 layout pre-caricati e 40 moduli, è uno strumento eccezionale, che con pochi clic ti farà realizzare pagine ed articoli dall’aspetto accattivante e professionale.

Una delle caratteristiche più belle di Divi, come di altri temi sviluppati dalla stessa Azienda, è che è possibile aggiungere un CSS Personalizzato in un apposito editor: in questo modo, si può personalizzarlo ulteriormente, aggiungendo ulteriori caratteristiche, oltre alle tante già presenti nelle opzioni di configurazione del tema. In questo modo, puoi dargli il tuo tocco di unicità, rendendo il tuo sito basato su Divi, completamente diverso da altri basati sul medesimo tema.

Divi CSS Personalizzato

Io stesso, avendo realizzato alcuni siti web con questo tema, ho implementato molte personalizzazioni, di cui te ne riporto alcune.

Come rimuovere il menu di navigazione da una pagina:

.page-id-<id_pagina> #et-top-navigation { display: none; }

<id_pagina> è il numero identificativo della pagina, che può essere trovato, per esempio, nella barra dell’indirizzo quando si modifica una pagina:

Id pagina

Nell’esempio dell’immagine qui sopra, il codice da inserire sarà il seguente:

.page-id-362 #et-top-navigation { display: none; }

Come rimuovere la sidebar dalle pagine, ma non dagli articoli:

.et_right_sidebar:not(.single-post)

#sidebar { display: none; }

.et_right_sidebar:not(.single-post)

#left-area { width: 100%; }

.et_right_sidebar:not(.single-post)

#main-content .container:before { background: none; }

Come cambiare il colore dei menu su dispositivi mobili:

.et_mobile_menu li a { color: #ffffff !important; }

.et_mobile_menu li a:hover { color: #000000 !important; }

Ovviamente i codici dovranno essere cambiati con i colori desiderati.

Come cambiare il colore del footer (sfondo e testo):

footer #footer-bottom { background-color: #dd1616 !important; }

footer #footer-info { color: white !important; }

Come ingrandire il logo:

.et_fixed_nav #logo { max-height: 60px; margin-bottom: 5px; }

Ti ringrazio per avere letto questo articolo, e ti consiglio di tornare periodicamente a visitarlo perché è possibile che inserirò altri suggerimenti man mano che ne avrò bisogno. Inoltre ti chiedo gentilmente di commentare questo mio articolo e, se ti è piaciuto, di condividerlo suoi tuoi profili social, grazie.