Come sostituire la barra dei menu principale con il modulo menu a larghezza intera di Divi

La barra dei menu principale semplifica la navigazione per i visitatori. Oltre alla barra dei menu principale predefinita a cui siamo abituati in WordPress, probabilmente ti sei imbattuto anche nel modulo menu a larghezza intera offerto da Divi. Di solito, viene utilizzato per visualizzare altri menu sul tuo sito Web che sono diversi dal menu principale che hai nella parte superiore di ogni pagina.

Ma puoi anche utilizzare facilmente il modulo menu a larghezza intera per sostituire la barra dei menu principale. Questo ti dà la libertà di posizionare il menu dove vuoi sulla pagina senza avere a che fare con un menu duplicato nella parte superiore della pagina. Puoi anche utilizzare le opzioni integrate di Divi per modellare il menu nel modo desiderato, il che significa che puoi creare risultati sorprendenti utilizzando, ad esempio, le opzioni di bordo e divisore.

In questo tutorial, ti mostreremo come sostituire la barra dei menu principale con il modulo menu a larghezza intera utilizzando il pacchetto di layout Carpenter di Divi. Questo fa parte della nostra iniziativa di design Divi in ​​corso. Puoi scegliere se applicare questo metodo a tutte le pagine o solo ad alcune di esse. Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial dei casi d'uso, diamo una rapida occhiata al risultato finale su schermi di diverse dimensioni.

Disabilita la barra di navigazione fissa

Vai alle opzioni del tema di Divi

La prima cosa che dovremo fare è disabilitare l'opzione di navigazione fissa nelle opzioni del tema di Divi. Lo stiamo facendo per eliminare lo spazio del menu principale nella parte superiore della nostra pagina. Per farlo, vai alla dashboard di WordPress > Divi > Opzioni del tema.

Disabilita la barra di navigazione fissa

Apri la scheda generale e disabilita l'opzione Barra di navigazione fissa.

Crea Menu Principale

Vai ai menu

La prossima cosa che faremo è creare il nostro menu principale. Useremo questo menu principale sia per la barra dei menu principale predefinita nella parte superiore che per il modulo menu a larghezza intera. Per aggiungere il tuo menu, vai alla dashboard di WordPress > Aspetto > Menu.

Aggiungi nuovo menu principale

Aggiungi un nuovo menu, dai un nome al tuo menu e rendilo il tuo menu principale.

Aggiungi pagine e salva menu

Ultimo ma non meno importante, aggiungi tutte le tue pagine e salva il tuo menu.

Stile barra dei menu principale in Personalizzatore temi

Vai a Personalizzatore di temi

A seconda che tu voglia nascondere o meno la barra dei menu principale predefinita su tutte le pagine, potresti voler prima applicare uno stile alla barra dei menu principale predefinita. Devi farlo solo se hai intenzione di usarlo su alcune pagine. Se desideri rimuovere ovunque la barra dei menu principale, puoi saltare questo passaggio.

Impostazioni della barra dei menu principale

Per abbinare il pacchetto di layout, abbiamo applicato le seguenti modifiche:

• Stile carattere: grassetto e maiuscolo
• Colore del testo: #FFFFFF
• Colore collegamento attivo: #FFFFFF
• Colore di sfondo: #f25b3a
• Colore di sfondo del menu a discesa: #f25b3a

Nascondi la barra dei menu principale

Una pagina

Vai alla pagina delle scelte e abilita Visual Builder

Per nascondere la barra dei menu principale nella parte superiore delle nostre pagine, dovremo utilizzare una piccola quantità di codice CSS. Nota che è importante aver disabilitato l'opzione Barra di navigazione fissa (uno dei passaggi precedenti). In caso contrario, lo spazio occupato dalla barra dei menu principale sarà bianco e non completamente sparito. Se hai intenzione di nascondere la barra dei menu principale su una pagina, in particolare, vai a quella pagina e abilita il Visual Builder.

Apri le impostazioni della pagina

Apri le impostazioni della pagina successivamente facendo clic sulla seguente icona nella parte inferiore della pagina:

Aggiungi codice CSS

Passa alla scheda Avanzate e aggiungi il seguente codice CSS alla casella CSS personalizzato:

#main-header {
display: none;
}

Intero sito web

Vai alle opzioni del tema di Divi

Se vuoi sbarazzarti della barra dei menu principale su tutto il tuo sito web, puoi farlo anche tu. Non è necessario aggiungere manualmente il codice a ciascuna pagina. Invece, puoi semplicemente andare sul dashboard di WordPress> Divi> Opzioni del tema.

Aggiungi codice CSS

Continua scorrendo verso il basso finché non trovi la casella CSS personalizzato e aggiungi lo stesso codice CSS lì:

#main-header {
display: none;
}

Aggiungi la barra dei menu principale alla pagina

Apri pagina di destinazione con Visual Builder

Ora che abbiamo nascosto la barra dei menu principale, possiamo iniziare ad aggiungere il modulo menu a larghezza intera alla nostra pagina. Per farlo, vai alla tua pagina di destinazione, ad esempio, e abilita il Visual Builder.

Aggiungi sezione a larghezza intera

Continua aggiungendo una sezione Fullwidth proprio sotto la tua sezione eroe.

Bordo superiore

Puoi utilizzare tutte le opzioni integrate di Divi per creare il design esatto che desideri. Lo terremo abbastanza pulito. L'unica cosa che aggiungeremo alle nostre opzioni di sezione è un bordo superiore:

• Larghezza bordo superiore: 7 px
• Colore bordo superiore: #f25b3a

Aggiungi modulo menu a larghezza intera

Quindi, aggiungi il modulo Menu a larghezza intera alla tua sezione.

Seleziona il menu principale

Seleziona il menu principale come menu che desideri visualizzare.

Colore di sfondo

Continua dando al tuo modulo un colore di sfondo nero.

Impostazioni dei collegamenti

Quindi, apri le impostazioni dei collegamenti e applica le seguenti modifiche:

• Colore collegamento attivo: #FFFFFF
• Colore del testo del menu a discesa: #FFFFFF
• Colore del testo del menu mobile: #FFFFFF
• Orientamento del testo: a sinistra
• Colore del testo: chiaro

Impostazioni del menu a discesa

Modifica le impostazioni del menu a discesa successivamente:

• Colore di sfondo del menu a discesa: #000000
• Colore linea menu a discesa: #000000
• Colore di sfondo del menu mobile: #000000

Menu Impostazioni testo

Infine, faremo in modo che le impostazioni del testo corrispondano al pacchetto di layout:

• Peso del carattere del menu: Ultra grassetto
• Stile del carattere del menu: maiuscolo

Rendi globale la sezione a larghezza intera e usala anche su altre pagine

Salva come sezione globale

Abbiamo finito di creare il nostro nuovo menu principale! Se hai intenzione di usarlo anche su altre pagine, vai avanti e aggiungilo alla tua libreria Divi come elemento globale.

Aggiungi ad altre pagine senza barra dei menu principale

Ora puoi aggiungere facilmente questo menu a larghezza intera ad altre pagine. Puoi scegliere la sua posizione e sei libero di giocare con le opzioni di design integrate che ne derivano!

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post sul blog dei casi d'uso, ti abbiamo mostrato come sostituire la barra dei menu principale nella parte superiore delle tue pagine con il modulo menu a larghezza intera. L'applicazione di questo metodo ti dà la libertà di poter posizionare il tuo menu dove vuoi sulla tua pagina. Inoltre, puoi anche utilizzare le opzioni integrate di Divi per modellarlo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.