Desideri creare una barra di navigazione in Divi che sia fissa dal basso verso l'alto della pagina?
Nel tutorial Divi Oggi ti mostreremo passo dopo passo come creare una barra di navigazione fissa dal basso verso l'alto in Divi.
Ciò consentirà alla barra di navigazione di rimanere inizialmente nella parte inferiore della pagina per un layout above-the-fold unico. Quindi, una volta che scorri la sezione sopra la piega della pagina, la barra di navigazione rimarrà nella parte superiore della pagina e rimarrà lì per tutta la 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 DIVI ora!!!
Iniziamo creando una nuova pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci 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 above the fold che fungerà da sezione di intestazione principale della nostra pagina. La sezione sarà a schermo intero sul desktop per garantire che la sezione occupi l'intera finestra di visualizzazione.
Leggi anche: Divi: scegli tra la griglia e il layout a larghezza intera del modulo Portfolio filtrabile
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]
Sotto la scheda Design, aggiorna l'altezza minima e l'imbottitura.
- Altezza minima: 100vh (desktop), auto (tablet e telefono)
- Imbottitura: 20vh (superiore e inferiore)
Titolo
Per creare il testo dell'intestazione, aggiungi un nuovo modulo Testo alla riga.
Quindi aggiorna il contenuto con la seguente intestazione H1:
<h1>Above the Fold</h1>
Impostazioni del testo
Sotto la scheda Design nelle impostazioni del modulo Testo, aggiorna gli stili dei caratteri dell'intestazione come segue:
- Intestazione:
- Carattere: rubino
- Peso del carattere: semigrassetto
- Stile: TT
- Allineamento del testo: centrato
- Colore del testo: #302ea7
- Dimensioni: 130px (desktop), 70px (tablet), 40px (telefono)
- Spaziatura lettere: 2px
- Altezza della linea: 1,3 em
Parte 2: Creazione della sezione sotto la linea di galleggiamento
Per dimostrare la funzionalità della sticky navbar, dobbiamo aggiungere una sezione below the fold in modo da avere spazio per scorrere.
Per creare la sezione, duplica la sezione sopra la piega che abbiamo appena creato.
Aggiorna lo sfondo della sezione duplicata.
- Colore di sfondo: #f4def1
Quindi assegna alla sezione un'altezza minima ampia in modo da avere spazio per scorrere la pagina verso il basso. Questa è semplicemente una sezione da completare al posto del file contenuto vera una pagina.
- Altezza minima: 200vh
Quindi aggiorna il contenuto del modulo Testo sostituendo la parola "Sotto" da "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.
Aggiunta nuova sezione e linea
Per prima cosa, aggiungiamo una nuova sezione normale direttamente sotto la sezione above the fold.
Successivamente, aggiungiamo una riga di una colonna alla sezione.
Sfondo e riempimento della sezione
Apri le impostazioni della sezione e aggiorna il colore di sfondo.
- Colore di sfondo: #302ea7
Quindi rimuovere il riempimento superiore e inferiore in modo che la barra di navigazione abbia un'altezza inferiore.
- Imbottitura: 0px (superiore e inferiore)
Aggiungi overflow visibile
Per assicurarti che i menu a discesa rimangano visibili, aggiorna le opzioni di visibilità come segue:
- Overflow orizzontale: visibile
- Troppopieno verticale: visibile
Dai alla sezione una posizione assoluta sul cellulare
Il menu a tendina mobile si aprirà per impostazione predefinita sotto l'icona dell'hamburger. Se manteniamo la barra di navigazione in basso, si nasconderà il menu a discesa se l'utente fa clic su di esso.
Per una migliore esperienza utente, desideriamo che la barra di navigazione inizi nella parte superiore della pagina sul tablet e sullo schermo del telefono.
Per questo, dai alla sezione una posizione assoluta su tablet e telefono.
- Posizione: relativa (desktop), assoluta (tablet e telefono)
Aggiungi una posizione adesiva per desktop e dispositivi mobili
Per aggiungere la posizione permanente alla sezione della barra di navigazione, aggiorna quanto segue:
- Posizione appiccicosa: 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 padding come segue:
- Imbottitura: 10px (superiore e inferiore)
Crea un menu di navigazione
Con la sezione e la linea in atto, siamo pronti per creare il menu di navigazione.
Inizia aggiungendo un modulo Menu alla riga di una colonna.
Contenuto del menu
Aggiorna il contenuto del menu come segue:
- selezionare il menu dall'elenco a discesa
- aggiungi l'immagine del logo
- rimuovere il colore di sfondo predefinito
Sotto la scheda Design, aggiorna il testo del menu seguente e le impostazioni delle icone:
- Colore collegamento attivo: #fff
- Carattere del menu: rubino
- Stile del carattere del menu: TT
- Colore del testo: #fff
- Dimensione testo menu: 16px
- Allineamento del testo: a destra
- Colore della linea del menu a discesa: #e19dff
- Colore testo menu mobile: #302ea7
- Colore icona carrello: #fff
- Colore icona 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 sul dispositivo mobile, 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 dispositivo mobile, 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.
Puoi anche consultare: Divi: come creare una barra di navigazione appiccicosa
Fare clic con il tasto destro sulla sezione contenente il menu e scegliere l'opzione ispezionare l'elemento nel menu contestuale del browser. Dovresti vedere una scatola outils sotto la sezione indicando le dimensioni (compresa l'altezza) della sezione.
Per questo esempio, l'altezza della sezione della barra di navigazione è 72 pixel.
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).
Sotto la scheda Design, aggiungi il seguente bordo superiore su tablet e telefono:
- Larghezza bordo superiore: 72 pixel (tablet e telefono)
- Colore bordo superiore: #302ea7
Poiché il bordo è alla stessa altezza della sezione con la posizione assoluta, non sarai in grado di vedere il bordo perché serve solo a spingere la sezione verso il basso in modo che non venga tagliata.
Risultato finale
Scopri il risultato finale!
Scarica DIVI ora!!!
Conclusione
La creazione di una barra di navigazione adesiva dal basso verso l'alto può essere eseguita facilmente utilizzando la posizione integrata di Divi e opzioni appiccicose.
La chiave è dare alla sezione above the fold un'altezza di 100vh, quindi aggiungere la sezione della barra di navigazione sottostante che si attacca alla parte inferiore e superiore del browser. Spero che questo aiuti ad aggiungere un above the fold più unico e coinvolgente al tuo 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 Generatore di temi Divi .
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
