Far risaltare il tuo sito dalla massa a volte è più facile a dirsi che a farsi. Fortunatamente, puoi diventare un piccolo fai-da-te aggiungendo tocchi di personalizzazione creativi che lo garantiranno il tuo blog si distingue dagli altri.

In questo tutorial, ti mostrerò come utilizzare il builder Divi per personalizzare il tuo blog, ed in particolare l'area CSS.

Questa è la regione di cui parlo:

Sezione personalizzata wordpress css builder

Ciò significa che qualsiasi modifica apportata qui sarà efficace solo sulla pagina che stiamo modificando. È una funzionalità incredibilmente interessante e utile!

Ecco il risultato finale che avremo alla fine di questo tutorial. Il colore di sfondo del menu di navigazione che cambia in base alla pagina che stai visitando. Come opzione aggiuntiva noterai che anche le icone cambiano colore.

Icona che cambia colore divi

Per prima cosa mostrerò come applicare il colore di sfondo al menu. Poi separatamente ti mostrerò come abbinare le icone social.

Se non hai ancora letto il nostro tutorial su presentazione del tema WordPress Divi, Ti invito a farlo.

Cominciamo!

Applicare i colori per i menu

Per prima cosa, utilizzo il formato di intestazione predefinito. Se stai utilizzando un altro formato, questo tutorial dovrebbe comunque essere efficace perché l'ID generico dei "div" su Divi è lo stesso per tutti i formati (# main-header), per quanto ne so. In caso di problemi con altri formati.

Formato dell'intestazione Divi

Dobbiamo assicurarci che i link appaiano in basso. I colori che ho scelto, che troverai su Coolors.co se vuoi usarli, sono sul lato più scuro, quindi devo rendere il link del testo di un colore chiaro. Ho optato per il colore bianco.

Personalizzazione del menu divi

Sto usando rgba (255,255,255,0.6) che sarà il colore del collegamento e il bianco scuro come colore del collegamento attivo (per l'effetto visivo desiderato)

Quindi vai alla pagina in cui desideri applicare la prima modifica (si dovrebbe vedere i link del menu a posto). Fare clic sull'icona "3 linee" e verrà visualizzata una finestra di opzioni.

Wordpress divi builder

Ora aggiungi il seguente CSS in questa casella:

# Mano-header {background: #474f61; }

Dovresti avere qualcosa di simile a questo, non dimenticare di cambiare il codice esadecimale in qualsiasi colore tu voglia:

Impostazioni divi personalizzazione colore

Fare clic su ' Salva e aggiorna E questo si applicherà al menu principale, tutto in una riga di codice.

Ora devi solo aggiungere lo stesso codice per tutte le tue pagine e cambiare il codice esadecimale ogni volta.

Icone dei social network (opzionale)

Per questa parte, modificheremo il codice che abbiamo già fatto, quindi aggiungeremo un po 'di codice a livello CSS del sito e spiegherò perché alcuni CSS dovrebbero essere aggiunti nelle singole pagine e perché alcuni non dovrebbero essere essere.

Quindi prima devi assicurarti di aver impostato i tuoi collegamenti social. Vai a " Opzioni Divi> Tema generale E aggiungi i tuoi URL alle pagine dei social media.

Icona di social divi

Quindi vai alle tue impostazioni nella barra dei menu secondaria e imposta lo sfondo ei colori del testo. Scelgo "bianco" come colore del testo perché aggiungerò uno sfondo colorato rotondo a ciascuna icona social da abbinare al nuovo colore del menu, in modo che l'icona possa apparire.

Personalizzazione del menu secondario

Vai a " Intestazione e navigazione> Elementi intestazione E spunta la casella " Mostra icone social '.

Elemento di intestazione Divi wordpress

Ti ricordi come abbiamo proceduto ad aggiungere CSS su ogni pagina? Torneremo indietro e modificheremo ciò che abbiamo scritto prima. Sostituisci ciò che hai lì con il seguente CSS, o se riconosci ciò che è diverso puoi semplicemente aggiungere il codice extra.

# Mano-header, # .e top-header-sociale-icona {background: #474f61; }

Questo codice consentirà al nostro sito non solo di cambiare il colore di sfondo del menu in questa pagina, ma anche lo sfondo delle nostre icone social. Abbiamo appena aggiunto un altro elemento al mix. Dovresti avere qualcosa che assomigli al seguente:

Editor di temi css code divi personalizzato

Potrebbe essere necessario verificare che i colori esadecimali siano corretti su ogni pagina.

CSS generale

Il seguente codice sarà nel tuo " Opzione tema> Casella CSS O nel file di stile del tema figlio.

Opzioni tema css sezione personalizzata divi

# Top-header-sociale-icons .e li {margin-left: 5px; } # .e top-header-sociale-icona {padding: 4px; margin-bottom: 8px; larghezza: 30px; altezza: 30px; border-radius: 50%; line-height: 24px; }

Forse ti starai chiedendo perché non è così nella casella CSS della pagina. Il motivo è che questo particolare pezzo di codice influenza tutti gli elementi target, quindi è inefficiente inserire lo stesso codice in più punti. Solo il colore di sfondo cambia per pagina, ma questo codice non cambia per pagina. È solo una buona pratica evitare di aggiungere peso al tuo sito.

Questo è tutto per questo tutorial, spero che ti permetta di personalizzare i menu sul tuo blog WordPress.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]

Altri tutorial di Divi