Vai al contenuto principale

Come cambiare il colore dei menu tra le pagine Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

A volte far risaltare il tuo sito dalla massa è più facile a dirsi che a farsi. Fortunatamente, puoi farti prendere dal gioco del piccolo tinkerer aggiungendo tocchi creativi di personalizzazione che faranno risaltare il tuo blog dalla massa.

In questo tutorial, ti mostrerò come utilizzare il generatore Divi per personalizzare il tuo blog, 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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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.

Altri tutorial di Divi

Questo articolo contiene i commenti 3

  1. Buongiorno,

    Grazie per tutti i tuoi tutorial.
    Sai se possiamo mettere il sottomenu divi (secondo livello sotto il menu a discesa) nella larghezza di riempimento? che occupa l'intera larghezza della pagina

  2. Buongiorno,

    Come fai a cambiare il colore del testo nell'intestazione principale? Avendo uno sfondo trasparente (sulla mia intestazione principale), il colore del carattere che ho scelto (sull'intestazione principale, che presenta le mie diverse sezioni) tramite l'interfaccia di personalizzazione divi è nero. Tuttavia, vorrei che fosse bianco su ALCUNE PAGINE perché la foto sotto è troppo scura.

    Commento faire?

    Merci par avance,

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
22 azioni
quota13
Tweet2
Enregistrer7