Vorresti creare un'intestazione globale con il modulo Menu a schermo intero in Divi?
L'intestazione è uno degli elementi più importanti di qualsiasi sito web ed è al centro di l'esperienza dell'utente. Il menu di navigazione offre ai tuoi utenti un'idea di cosa possono aspettarsi di trovare sul tuo sito web e li aiuta a individuare le informazioni di cui hanno bisogno.
Inoltre, una barra dei menu secondaria può essere uno spazio ideale per evidenziare un invito all'azione o a promuovere un'offerta. Per non parlare del fatto che l'intestazione è una delle parti più importanti del tuo sito web, perché di solito appare su ogni pagina. Questa è una grande opportunità per mostrare il tuo marchio e creare un'intestazione coerente con il design del resto del tuo sito web.
Le opzioni di Theme Builder di Divi ti consentono di creare un'intestazione globale personalizzata e personalizzare l'aspetto dell'intestazione e dei moduli di menu sull'intero sito web.
In questo tutorial, ti mostreremo come creare un'intestazione globale utilizzando il modulo del menu a schermo intero di Divi.
Cominciamo!
Panoramica
Ecco un'anteprima dell'intestazione globale che andremo a progettare.
Apri il generatore di temi
Poiché in questo esempio stiamo costruendo un'intestazione globale, andiamo a "Theme Builder", che puoi trovare nel menu Divi di WordPress. Seleziona Aggiungi intestazione globale, quindi seleziona Crea intestazione globale.
Crea la barra dei menu secondaria
Quando apri per la prima volta il layout dell'intestazione globale, viene precaricato con una sezione regolare. Modificheremo questa in modo che sia la nostra barra dei menu secondaria, che si troverà sopra il nostro menu a larghezza intera e includerà un testo di invito all'azione e un pulsante.
Innanzitutto, apri le impostazioni della sezione e aggiungi il colore di sfondo.
- Sfondo: #92A8A1
Successivamente, il margine della sezione.
- Vertice del margine interno: 0px
- Margine interno inferiore: 0px
Ora inserisci una riga. Per questo esempio, utilizzeremo il layout mostrato di seguito.
Nelle impostazioni della riga, in Ridimensionamento della scheda Stile, armonizza le altezze delle colonne.
- Armonizzare le altezze delle colonne: SÌ
Quindi, imposta i margini superiore e inferiore come segue:
- Margine interno superiore: 5px
- Margine interno inferiore: 5px
Poiché vogliamo che i nostri elementi di intestazione secondari siano allineati verticalmente, aggiungeremo alcuni CSS personalizzati all'elemento della riga principale.
1.
align-items:center;
Ora che la nostra linea è configurata possiamo inserire i moduli per il ns contenuto. Per prima cosa inserisci un modulo di testo sul lato sinistro.
Modifica il contenuto di testo. Questo è il luogo perfetto per includere un invito all'azione o a promuovere un'offerta.
- Testo: "Unisciti alla nostra mailing list per ricevere il 10% di sconto sul tuo ordine!" »
Accedi alla scheda Stile del modulo Testo e modifica i parametri come segue:
- Carattere "Testo": Poppins
- Luce fioca "testo": media
- Colore del testo "Testo": #FFFFFF
Quindi, aggiungi il modulo Pulsante a destra.
Aggiungi testo pulsante.
- Testo: "Richiedi un preventivo gratuito"
Nella scheda Stile, allinea il pulsante al centro.
- Allineamento pulsanti: centro
Ora personalizziamo l'aspetto del pulsante.
- Usa stili personalizzati per "Pulsante": Sì
- Dimensione testo pulsante: 14px
- Colore testo pulsante: #FFFFFF
- Pulsante sfondo: #2F5349
- Pulsante Larghezza bordo: 0px
- Pulsante Raggio bordo: 50px
- Spaziatura lettere pulsanti: 1px
- Carattere pulsante: Poppins
Aggiungi il modulo Menu a schermo intero
Ora che il menu secondario è stato progettato, possiamo passare al menu principale. Costruiremo il menu utilizzando il modulo Menu a schermo intero. Aggiungi una nuova sezione Schermo intero all'intestazione globale.
Seleziona e inserisci il modulo Menu a schermo intero
Successivamente, personalizzeremo le impostazioni del menu a schermo intero.
- Colore collegamento attivo: #2F5349
- Menu dei caratteri: Poppins
- Menu luce fioca: semi grassetto
- Menu stile copia: TT
- Colore testo menu: #000000
- Colore del testo del menu al passaggio del mouse: #2F5349
- Dimensione testo menu: 15px
- Spaziatura delle lettere del menu: 2px
Cambia il colore dell'icona del menu dell'hamburger in nero.
- Colore icona menu hamburger: #000000
Prima di aggiungere il logo al nostro menu, cambiamo le opzioni di ridimensionamento. Utilizzeremo le opzioni reattive integrate di Divi per impostare un'altezza massima diversa per PC e dispositivi mobili.
- Altezza massima del logo su PC: 3vw
- Altezza massima del logo su cellulare: 6vw
Ora aggiungi il tuo logo al menu a schermo intero.
Infine, vogliamo che il menu principale rimanga nella parte superiore dello schermo quando l'utente scorre il sito Web, quindi utilizzeremo le impostazioni adesive integrate di Divi per questo.
- Posizione appiccicosa: attaccati in alto
Con ciò, il nostro design dell'intestazione globale è completo.
Crea una nuova pagina con un layout predefinito
Per vedere l'intestazione e il menu a larghezza intera in azione, creiamo una nuova pagina con un layout predefinito dalla libreria Divi. Per questo esempio useremo la Home Page Flooring del pacchetto disposizione del pavimento.
Aggiungi una nuova pagina al tuo sito web e assegnagli un titolo, quindi seleziona l'opzione Usa Divi Builder.
Per questo esempio stiamo usando un layout predefinito dalla libreria Divi, quindi seleziona Scegli layout.
Trova e seleziona il layout "Pagina iniziale del pavimento".
Seleziona "Scegli layout" per aggiungere il layout alla tua pagina.
Ora il design è completo!
Risultato finale
Conclusione
Come accennato in precedenza, l'intestazione e il menu di navigazione sono al centro dell'esperienza utente del tuo sito web. Ora hai visto quanto è facile progettare un'intestazione complessiva straordinaria con il modulo "Menu a schermo intero" di Divi.
Fortunatamente, il generatore di temi di Divi ti dà il controllo di ogni aspetto del menu e dell'intestazione del tuo sito Web e puoi creare design totalmente personalizzati e unici con pochi clic.
Hai utilizzato le opzioni di intestazione globale di Divi per personalizzare l'intestazione e il menu di navigazione? Dicci cosa ne pensi nei commenti!
