Come inquadrare il menu di navigazione con i divisori di sezione

Il tuo menu di navigazione è una delle prime cose che i visitatori cercano quando accedono al tuo sito. Per questo motivo, i siti Web si assicurano di dargli il bene immobile principale (nella parte superiore della pagina) che merita. Ma se stai cercando di far risaltare un po' di più il tuo menu di navigazione, puoi ravvivarlo con design di sfondo personalizzati. Con Divi's Visual Builder, puoi creare fantastici design di sfondo con le opzioni di sfondo di Divider disponibili in ogni sezione della tua pagina. E con un po' di creatività, puoi utilizzare uno sfondo divisorio per fungere da cornice unica per il tuo menu di navigazione. Puoi persino creare uno sfondo del menu unico per ogni pagina del tuo sito web.

In questo tutorial, ti mostrerò quanto è facile inquadrare i tuoi menu di navigazione con bellissimi design di sfondo utilizzando gli sfondi dei divisori di sezione. Userò il layout della farmacia come sito di esempio per creare questi progetti.

Iniziamo!

Sbirciata

Ecco un'anteprima di ciò che può essere realizzato con questa tecnica di progettazione.

Quello di cui hai bisogno

Per questo tutorial, tutto ciò di cui hai veramente bisogno è quanto segue:

• Il tema Divi (installato e attivo)
• The Pharmacy Layout Pack (un pacchetto di layout predefinito gratuito disponibile all'interno di Divi Builder)

Impostazione del menu principale nel personalizzatore del tema

Per questo tutorial, ho una nuova installazione di Divi con il mio menu principale contenente le sei pagine del pacchetto di layout della farmacia. Ecco come appare il menu per impostazione predefinita.

Come puoi vedere, l'intestazione ha uno sfondo bianco e si trova sopra la prima sezione della pagina. Quando scorri verso il basso, l'intestazione si converte in una barra dei menu di navigazione fissa.

Ma per questo tutorial, voglio rendere trasparente lo sfondo dell'intestazione in modo da poter aggiungere il mio sfondo personalizzato. Per fare ciò, dobbiamo passare al personalizzatore del tema. Dalla dashboard di WordPress vai su Divi > Personalizzatore di temi. Quindi, dal menu di personalizzazione, vai a Intestazione e navigazione > Barra dei menu principale.

Cambia il colore di sfondo in modo che sia completamente trasparente trascinando il cursore della trasparenza fino in fondo o inserisci il codice colore rgba(255,255,255,0).

Come puoi vedere, lo sfondo bianco dell'intestazione è scomparso e la tua prima sezione è passata in cima alla pagina per fungere da sfondo dell'intestazione e del menu principale.

Poiché aggiungeremo uno sfondo colorato per inquadrare il nostro menu di navigazione, aggiorniamo anche le seguenti opzioni di testo del menu.

Carattere: Montserrat
Stile carattere: grassetto (B)
Colore del testo: bianco
Colore collegamento attivo: bianco

Torna indietro di un livello nel menu di personalizzazione e fai clic sulla scheda Navigazione fissa. Se manterrai funzionale la navigazione fissa, puoi dargli un colore personalizzato che si abbini al colore dello sfondo personalizzato che creerai nel visual builder. Oppure puoi dargli un colore più generico in modo da poter incorniciare i tuoi menu principali con colori diversi in base alla pagina. Per ora, userò una combinazione di colori più generica per la mia navigazione fissa. Aggiorna quanto segue:

Colore di sfondo del menu principale: #ffffff
Colore collegamento menu principale: rgba(0,0,0,0.61)
Colore collegamento menu principale attivo: #ff5473

Ora siamo pronti! Assicurati di pubblicare le modifiche.

Inquadrare il menu di navigazione con uno sfondo divisore di sezione

Esempio 1

Vai alla home page della tua farmacia e distribuisci il visual builder. Quindi aggiungi una nuova sezione normale senza righe, colonne o moduli (non ne hai bisogno) e trascina la sezione nella parte superiore della pagina (trovo più facile riorganizzare le sezioni in modalità wireframe perché sono blocchi più grandi).

Ora torna alla modalità desktop per completare il design.

Apri le impostazioni della sezione e aggiorna quanto segue:

Stile divisore superiore: vedi screenshot
Colore divisore: #ff5473
Altezza divisore: 150 px
Ripetizione orizzontale divisore: 0,8x
Margine personalizzato: -80 px in basso
Imbottitura personalizzata: 0px in alto, 0px in basso

Il colore del divisore è lo stesso colore rosa utilizzato nel layout. Ho impostato la ripetizione orizzontale del divisore su 0,8x per appiattire un po' il divisore. Il margine inferiore di -80px porta la sezione in basso nella pagina per nascondere lo sfondo bianco della sezione. Ciò si traduce nel divisore che inquadra la navigazione a destra. Il divisore si estende a sinistra per aggiungere anche uno sfondo piacevole al tuo logo.

Ecco come appare sul sito live.

Esempio #2

Per questo prossimo esempio posizionerò la sezione in modo che lo sfondo del divisore incornici solo il menu di navigazione invece di estendersi anche al logo. Per fare ciò, dobbiamo dare alla nostra sezione una larghezza personalizzata e allinearla a destra in modo che si adatti al menu di navigazione.

Vai alle impostazioni della sezione e aggiorna quanto segue:

(Nota: potrebbe essere necessario aprire le impostazioni in modalità wireframe poiché il margine personalizzato della sezione potrebbe rendere il menu della sezione non cliccabile. Una volta aperte le impostazioni in modalità wireframe, è possibile tornare alla modalità di visualizzazione desktop.)

Larghezza: 75%
Allineamento della sezione: a destra
Stile divisore: vedi screenshot
Ripetizione orizzontale divisore: 1x

Ecco come appare:

Con Navigazione fissa attivata, puoi vedere come si attiva l'intestazione del menu fisso non appena il menu inizia a lasciare il riquadro.

Se desideri disabilitare la navigazione fissa, vai a Divi > Opzioni del tema e disabilita l'opzione Barra di navigazione fissa in Impostazioni generali.

Senza la navigazione fissa attivata, il menu rimarrà bloccato in posizione all'interno del design della cornice mentre scorre.

Reattivo

La cornice avrà un bell'aspetto anche sui dispositivi mobili.

Ma puoi sempre scegliere di nascondere la cornice assegnando alla tua sezione un'altezza del divisore personalizzata pari a zero per desktop e dispositivi mobili. E poi personalizza il tuo menu mobile nel personalizzatore del tema.

Usa cornici di colore diverso su pagine diverse

Se lo desideri, puoi aggiungere diversi colori e design in base alla pagina. Tutto quello che devi fare è salvare la tua sezione nella tua libreria Divi e aggiungerla a una pagina diversa del tuo sito web. Quindi puoi regolare il colore o il design come desideri. Le possibilità sono infinite.

pensiero finale

Aggiungere uno sfondo personalizzato al menu di navigazione è in realtà piuttosto semplice con Divi Builder. Tutto quello che devi sapere è come posizionare la tua sezione per fungere da sfondo per il tuo menu. E con questa configurazione in atto, puoi testare diversi stili di divisori per creare tutti i tipi di cornici uniche per il tuo menu di navigazione. E poiché stai usando una sezione, hai tutte le opzioni di design di una sezione per progettare la tua cornice. Puoi anche utilizzare uno sfondo o una sfumatura di una sezione semplice e regolare la posizione della sezione ovunque desideri.

Non vedo l'ora di sentirti nei commenti.

Saluti!