Come personalizzare il menu Divi con CSS

Utilizzi Divi e vuoi sfruttare al meglio il tuo menù? In questa guida ti mostreremo come personalizzare il menu Divi con CSS per distinguerti dalla concorrenza e migliorare l'esperienza del cliente sul tuo sito.

Con oltre 3 milioni di utenti, Divi è uno dei page builder più popolari sul mercato. Uno dei motivi è che è estremamente flessibile e viene fornito con tonnellate di opzioni di personalizzazione che ti consentono di dare al tuo sito un aspetto professionale anche se sei un principiante. Tuttavia, per portare il design del tuo sito web al livello successivo, dovrai personalizzare il design con gli script CSS. Ci sono molte cose che puoi modificare, ma una delle più importanti è il menu di navigazione.

Perché modificare il menu Divi?

La barra di navigazione del menu è uno degli elementi più importanti di qualsiasi sito web. Si trova nella parte superiore della pagina, quindi è il primo elemento che gli utenti vedono quando caricano una pagina. Di solito, quel menu compare su tutte le pagine di un sito rendendolo l'elemento che gli utenti vedono di più.

Inoltre, la funzione principale di un menu è fornire ai visitatori un modo semplice per navigare e migliorare l'esperienza dell'utente. Ecco perché un menu di navigazione ben organizzato e progettato può avere un grande impatto sulla tua attività.

Anche se Divi viene fornito con molti strumenti per modificare il menu, l'aggiunta di codice personalizzato è il modo migliore. Ma non preoccuparti se non sai come programmare. In questo tutorial, ti mostreremo come personalizzare il menu Divi con CSS passo dopo passo.

Come personalizzare il menu Divi con CSS

In questa sezione, ti mostreremo come modificare il menu Divi con CSS per sfruttarlo al meglio. Devi incollare gli script CSS nel Personalizzatore di WordPress andando su Aspetto > Personalizza > CSS aggiuntivo . In alternativa, puoi incollarli nel file style.css del tuo tema figlio.

NOTA : prima di iniziare:

• Backup : crea un backup completo del tuo sito
• Usa un tema figlio : puoi crearne uno seguendo questa guida o utilizzare uno di questi plugin

Ora vediamo diverse opzioni per personalizzare il menu Divi con gli script CSS.

1) Cambia il colore di sfondo della barra di navigazione

Divi ti offre la possibilità di modificare il colore di sfondo del menu, ma lo applica all'intera intestazione. Se vuoi solo cambiare il colore della barra di navigazione, usa questo script:

.et_menu_container{background-color:red;}

2) Cambia i caratteri del menu

Un altro modo per personalizzare il menu Divi è cambiare i caratteri del menu. Ad esempio, questo script CSS cambierà il carattere di tutti gli elementi del menu in Lucida Console. Ciò include i menu a discesa e qualsiasi altro contenuto visualizzato nel contenitore del menu.

.et_menu_container{font-family: Lucida Console, Courier, monospace;}

Nota : la famiglia di caratteri è un insieme di caratteri come mostrato nell'esempio sopra. Puoi anche scegliere un singolo carattere, ma prima devi caricarlo sulla tua installazione di WordPress. Per saperne di più sui font puoi dare un'occhiata ai seguenti link:

• Come aggiungere Google Font a WordPress
• Cambia i caratteri in WordPress
• Famiglia di caratteri

3) Cambia il colore del testo sugli elementi al passaggio del mouse

Per cambiare il colore del testo quando passi il mouse sopra un elemento, usa questo codice:

#top-menu li a:hover{
color:blue;
}

Ciò cambierà il colore dei collegamenti della barra di navigazione in blu quando gli utenti passano il mouse su di essi, ma puoi regolare il codice e cambiarlo in qualsiasi colore desideri utilizzando il codice esadecimale o il formato RGBA.

4) Modifica la larghezza dei menu a discesa

Per assicurarti che ogni singolo elemento del menu Divi abbia un bell'aspetto, puoi regolare la larghezza del menu a discesa. Ad esempio, per dare al menu a discesa una larghezza di 500 pixel, usa questo script CSS:

#top-menu > li > .sub-menu{
width:500px;
}

5) Aggiungi un'immagine di sfondo alla barra di navigazione del menu Divi

Oltre a piccole modifiche, puoi anche apportare modifiche più radicali. Ad esempio, supponiamo che tu voglia personalizzare il menu Divi con CSS visualizzando un'immagine come sfondo della barra di navigazione. Per farlo, copia e incolla semplicemente questo codice:

.et_menu_container{
background-image:url('http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png');
background-size:cover;
}

Tieni presente che stiamo utilizzando un'immagine caricata in precedenza. Carica semplicemente la tua immagine e sostituisci l'URL dell'immagine con quello che desideri utilizzare.

In alternativa, puoi anche utilizzare un'immagine da un URL esterno, ma ti consigliamo vivamente di caricare un'immagine nella libreria multimediale del tuo sito web. In questo modo, ti assicuri di avere il pieno controllo sull'immagine e non c'è rischio di perderla se il proprietario dell'immagine decide di eliminarla.

Infine, nota che stiamo usando la proprietà in modo che l'immagine copra l'intero spazio disponibile. Ci sono alcune altre opzioni come ripeti, auto, contiene e così via, quindi scegli quella che ti piace. Per opzioni più complesse relative alla modalità di stampa dell'immagine sul tuo sito, dai un'occhiata a questo sito.

Come applicare CSS a un singolo elemento

Gli esempi precedenti modificano tutti gli elementi nella barra di navigazione del menu, ma non è l'unico modo per personalizzare il menu Divi utilizzando il codice CSS. Puoi anche applicare gli script CSS a un singolo elemento. Tuttavia, prima di entrare nel merito, capiamo meglio come funzionano i CSS e come creiamo gli script.

Una singola riga CSS è chiamata regola , che è composta da un selettore, una proprietà e un valore.

Poiché proprietà e valore hanno nomi autoesplicativi, ci concentreremo sul selettore.

Il selettore è un codice che punta all'elemento che viene modificato dalla proprietà e dal valore. I selettori possono fare riferimento a più o singoli elementi.

Quando non specifichiamo un singolo elemento, CSS applica la regola a tutti gli elementi "figli" di esso. Ciò segue il principio di ereditarietà dei CSS che afferma questo comportamento.

Applica CSS a singoli elementi

Per applicare CSS a singoli elementi, devi utilizzare la console del browser e selezionare il selettore specifico per quell'elemento. Per farlo, vai alla pagina che desideri modificare e fai clic con il pulsante destro del mouse o premi F12 per aprire la console del browser.

Vedrai qualcosa del genere:

È un sacco di codice! Non preoccuparti, può sembrare opprimente, ma è abbastanza facile da gestire una volta che ti ci abitui.

Vedrai come vengono evidenziati gli elementi sulla tua pagina web mentre apri i tag HTML <body> , <header> , <div> e passa il mouse su di essi. In questo modo puoi vedere a quale elemento stai puntando e prendere la classe HTML o l'ID che devi usare nel tuo codice CSS.

Fai clic sull'elemento che desideri modificare e vedrai il selettore CSS

Per copiarlo, fai clic destro su di esso e seleziona copia > Selettore CSS . Ora che hai copiato il selettore CSS, vai alla dashboard di WordPress, vai su Customizer > Additional CSS e incollalo:

#top-menu > li:nth-child(1)

Questo selettore punta al collegamento "Home" sul nostro sito Web di esempio, quindi ora possiamo utilizzare qualsiasi proprietà CSS e applicarlo solo al collegamento "Home" del nostro menu. Ad esempio, per cambiare il colore dello sfondo in rosso, utilizzerai qualcosa del genere:

#top-menu > li:nth-child(1){background-color:red;}

Si noti che la pseudo-classe :nth-child(1) ci dice che questo è il primo (1) elemento della lista nello stesso livello di gerarchia.

Ora che sai come copiare un selettore utilizzando l'ispettore del browser, puoi applicare il tuo stile CSS a qualsiasi elemento del tuo sito web.

Altri script CSS di esempio

C'è molto di più che puoi fare per personalizzare il tuo menu Divi con CSS. Diamo un'occhiata a qualche altro esempio.

Aggiungi un'icona all'elemento del menu

Per utilizzare le icone di Font Awesome, devi prima caricarle sul tuo sito web. Successivamente, puoi incollare il seguente script per stampare un'icona accanto al primo elemento del menu:

#top-menu > li:nth-child(1) a::before{

padding-right: 10px;

font-family: "Font Awesome 5 Free";

font-weight: 900; content: "\f015";

}

Se vedi un carattere rotto, significa che Font Awesome non è caricato.

Per caricare i set di icone, inserisci questa riga nella sezione dell'intestazione andando su Opzioni Divi > Avanzate .

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">

Nascondi qualsiasi elemento del menu usando CSS

Una volta che hai il corretto selettore CSS, puoi applicargli qualsiasi proprietà CSS. Uno dei più comuni e utili è display:none ; che ti consente di rimuovere qualsiasi elemento dal menu. Ad esempio, per nascondere l'elemento carrello dalla barra di navigazione del menu, incolla questo codice:

.et-cart-info{display:none;}

Conclusione

Tutto sommato, la modifica del menu del tuo sito è un modo eccellente per migliorare la navigazione del tuo sito e migliorare l'esperienza dell'utente sul tuo sito. Anche se Divi ha diverse opzioni per questo, il modo migliore è personalizzare il menu Divi con script CSS.

In questo tutorial, abbiamo visto diversi modi per modificare il menu passo dopo passo per aiutarti a portare il tuo sito al livello successivo anche se non hai competenze di programmazione. Ormai dovresti sapere come:

• Cambia il colore di sfondo del menu
• Modifica i caratteri
• Cambia il colore del testo sugli elementi al passaggio del mouse
• Modifica la larghezza del menu a discesa
• Aggiungi un'immagine di sfondo al menu

Inoltre, abbiamo visto come applicare CSS a singoli elementi, aggiungere icone al menu e nascondere qualsiasi elemento. Ti consigliamo di prendere questi script come base, giocare e personalizzarli per adattarli al tuo sito.

Per ulteriori guide su come sfruttare al meglio Divi, consulta le seguenti guide:

• Personalizza la pagina del prodotto in Divi
• Come aggiungere il pulsante Aggiungi al carrello nelle pagine di Divi Shop
• Come nascondere/rimuovere il piè di pagina in Divi
• Modulo di contatto Divi non funzionante: come risolverlo

Hai provato a modificare il menu del tuo sito con CSS? Cosa hai cambiato? Fatecelo sapere nella sezione commenti qui sotto!