Come creare una barra di navigazione appiccicosa dal basso verso l'alto in Divi

Nel tutorial Divi di oggi, ti mostreremo, passo dopo passo, come creare una barra di navigazione adesiva dal basso verso l'alto in Divi. Ciò consentirà alla barra di navigazione di rimanere inizialmente nella parte inferiore della pagina per un layout unico above the fold. Quindi, una volta superata la sezione sopra la piegatura della pagina, la barra di navigazione rimarrà nella parte superiore della pagina e rimarrà lì per tutto il resto della pagina. Potresti dire che la pagina "prenderà il controllo" del menu nella parte inferiore dello schermo e porterà un piacevole effetto di interazione al tuo menu principale e al tuo sito web.

Cominciamo!

Panoramica

Per aiutarti a visualizzare il risultato che stiamo cercando di ottenere, diamo un'occhiata al risultato finale:

Scarica il layout GRATUITAMENTE

Per mettere le mani sui design in questo tutorial, devi prima scaricarlo utilizzando il pulsante in basso. Per accedere al download, dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il forma qui di seguito. Come nuovo abbonato, riceverai ancora più vantaggi Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci il tuo indirizzo email qui sotto e fai clic su download. Non verrai "riiscritto" né riceverai email aggiuntive.

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nella finestra a comparsa della portabilità, seleziona la scheda di importazione e scegli il file da scaricare dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout delle sezioni sarà disponibile in Divi Builder.

Vai al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai già fatto, installa e attiva il Tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Crea una barra di navigazione appiccicosa dal basso verso l'alto in Divi

Parte 1: Creazione della sezione e dell'intestazione sopra la linea di galleggiamento

Per la prima parte di questo tutorial, creeremo la sezione e l'intestazione sopra la linea di galleggiamento che serviranno come sezione di intestazione principale della nostra pagina. La sezione sarà a schermo intero sul desktop per garantire che la sezione occupi l'intera finestra.

Aggiungi una riga

Per iniziare, aggiungi una riga a una colonna nella sezione predefinita.

Impostazioni della sezione

Prima di aggiungere un modulo, apri le impostazioni della sezione e aggiungi uno sfondo come segue:

• Colore di sfondo: # e9f9ff
• Immagine di sfondo: [aggiungi immagine]

Nella scheda Progettazione, aggiorna l'altezza minima e l'imbottitura.

• Altezza minima: 100 vh (computer desktop), automatico (tablet e telefono)
• Imbottitura: superiore 20vh, inferiore 20vh

Titolo

Per creare il testo dell'intestazione, aggiungi un nuovo modulo di testo alla riga.

Quindi aggiorna il contenuto con la seguente intestazione H1:

<h1>Above the Fold</h1>

Impostazioni del testo

Nella scheda Design di Impostazioni testo, aggiorna gli stili di carattere dell'intestazione come segue:

• Carattere del titolo: Rubik
• Peso del carattere dell'intestazione: semi grassetto
• Stile carattere intestazione TT
• Allineamento del testo dell'intestazione: al centro
• Colore del testo del titolo: # 302ea7
• Dimensione del testo del titolo: 130 px (desktop), 70 px (tablet), 40 px (telefono)
• Spaziatura delle lettere dell'intestazione: 2px
• Altezza della linea di prua: 1,3 em

Parte 2: Creazione della sezione sotto la piega

Per dimostrare la funzionalità della barra di navigazione permanente, dobbiamo aggiungere una sezione below the fold in modo da avere spazio per scorrere.

Per creare la sezione, duplica la sezione sopra la linea di galleggiamento che abbiamo appena creato.

Aggiorna lo sfondo della sezione duplicata.

• Colore di sfondo: # f4def1

Quindi dai alla sezione un'altezza minima grande in modo da avere spazio per scorrere la pagina. Questa è solo una sezione da compilare al posto del contenuto effettivo di una pagina.

Quindi aggiorna il contenuto del modulo di testo sostituendo la parola "Sotto" con "Sopra".

Parte 3: crea la barra di navigazione adesiva

Per creare la barra di navigazione permanente dal basso verso l'alto, il nostro primo passo è creare una nuova sezione con una riga in una colonna.

Aggiungi una nuova sezione e una nuova riga

Aggiungi una nuova sezione normale direttamente sotto la sezione sopra la linea di galleggiamento.

Quindi aggiungi una riga a una colonna della sezione.

Sfondo e riempimento della sezione

Apri le impostazioni della sezione e aggiorna il colore di sfondo.

• Colore di sfondo: # 302ea7

Quindi rimuovere l'imbottitura superiore e inferiore in modo che la barra di navigazione abbia un'altezza inferiore.

• Riempimento: 0px in alto, 0px in basso

Aggiungi overflow visibile

Per assicurarti che i menu a discesa rimangano visibili, aggiorna le opzioni di visibilità come segue:

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Dai alla sezione una posizione assoluta sul cellulare

Il menu a discesa mobile si aprirà per impostazione predefinita sotto l'icona dell'hamburger. Se manteniamo la barra di navigazione in basso, nasconderebbe il menu a discesa se l'utente fa clic su di esso nella posizione in basso. Per una migliore esperienza utente, vogliamo che la barra di navigazione inizi nella parte superiore della pagina sullo schermo del tablet e del telefono.

Per fare ciò, assegna alla sezione una posizione assoluta su tablet e telefono.

• Posizione: Relativa (computer desktop), Assoluta (tablet e telefono)

Aggiungi posizione permanente per desktop e dispositivi mobili

Per aggiungere la posizione permanente alla sezione della barra di navigazione, aggiorna quanto segue:

• Posizione fissa: attacca in alto e in basso (desktop), attacca in alto (tablet e telefono)

Aggiorna il riempimento delle righe

Una volta completata la sezione adesiva, apri le impostazioni della riga all'interno della sezione e aggiorna il riempimento come segue:

• Imbottitura: 10 pixel in alto, 10 pixel in basso

Crea un menu di navigazione

Con la sezione e la riga in posizione, siamo pronti per creare il menu di navigazione.

Inizia aggiungendo un modulo di menu alla riga di una colonna.

Contenuto del menu

Aggiorna il contenuto del menu come segue:

• seleziona il menu dall'elenco a discesa
• aggiungi l'immagine del logo (sto usando un'immagine da 122px per 52px)
• rimuovi il colore di sfondo predefinito

Nella scheda Progettazione, aggiorna il testo del menu seguente e le impostazioni dell'icona:

• Colore collegamento attivo: #fff
• Carattere del menu: Rubik
• Stile del carattere del menu: TT
• Colore del testo del menu: #fff
• Dimensione del testo del menu: 16px
• Allineamento del testo: a destra
• Colore della linea del menu a discesa: # e19dff
• Colore del testo del menu mobile: # 302ea7
• Colore icona carrello: #fff
• Colore icona di ricerca: #fff
• Colore icona menu hamburger: #fff

Utilizzo di un bordo per compensare la posizione assoluta della barra di navigazione sul cellulare

Poiché la sezione della barra di navigazione ha una posizione assoluta sui dispositivi mobili, la barra si posizionerà sopra (e taglierà) la sezione superiore della pagina. Per risolvere questo problema, dobbiamo compensare la sezione superiore utilizzando un bordo superiore della stessa altezza della barra/sezione di navigazione.

Ispeziona l'altezza della sezione della barra di navigazione sul cellulare

Per determinare l'altezza della barra di navigazione su dispositivi mobili, apri una versione live della pagina in una nuova finestra del browser. Quindi puoi ridurre la larghezza del browser al di sotto di 980 px per vedere il menu mobile. Fare clic con il pulsante destro del mouse sulla sezione contenente il menu e scegliere l'opzione Ispeziona elemento dal menu di scelta rapida del browser. Dovresti vedere una casella degli strumenti sotto la sezione che mostra le dimensioni (inclusa l'altezza) della sezione. Per questo esempio, l'altezza della sezione della barra di navigazione è 72 px.

Aggiungi un offset del bordo superiore alla sezione above the fold

Ora che abbiamo determinato l'altezza della sezione, apri le impostazioni per la sezione superiore (sopra la piega).

Nella scheda Design, aggiungi il seguente bordo superiore sia sul tablet che sul telefono:

• Larghezza bordo superiore: 72 px (tablet e telefono)
• Colore bordo superiore: # 302ea7

Poiché il bordo ha la stessa altezza della sezione con la posizione assoluta, non sarai in grado di vedere il bordo poiché serve solo a spingere la sezione verso il basso in modo che non venga tagliata.

Risultato finale

Scopri il risultato finale!

Considerazioni finali

La creazione di una barra di navigazione adesiva dal basso verso l'alto può essere facilmente ottenuta utilizzando la posizione incorporata di Divi e le opzioni adesive. La chiave è dare alla sezione sopra la piega un'altezza di 100vh, quindi aggiungere la sezione della barra di navigazione sottostante che si attacca alla parte inferiore e superiore del navigatore. Si spera che questo aiuti ad aggiungere al tuo sopra la linea di galleggiamento un aspetto più unico e coinvolgente sito web.

Questa barra di navigazione appiccicosa funziona meglio per il design di una singola pagina piuttosto che per un modello generale. Detto questo, puoi facilmente scegliere di usarlo come design della tua home page e utilizzare un'intestazione globale per il resto delle pagine utilizzando il builder. Tema Divi.

Non vedo l'ora di sentirti nei commenti.

Alla tua salute!