Come creare una barra di navigazione fissa dal basso verso l'alto in Divi
Pubblicato: 2021-09-06Nel tutorial Divi di 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 si scorre oltre la sezione above the fold della pagina, la barra di navigazione si attaccherà alla parte superiore della pagina e rimarrà lì per tutto il resto della pagina. Potresti dire che la pagina "raccoglierà" il menu nella parte inferiore dello schermo e porterà un piacevole effetto di interazione al tuo menu principale e al tuo sito web.
Iniziamo!
Sbirciata
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 disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione di una barra di navigazione permanente dal basso verso l'alto in Divi
Parte 1: Creazione della sezione above the fold e dell'intestazione
Per la prima parte di questo tutorial, creeremo la sezione above the fold e l'intestazione che serviranno come sezione di intestazione principale della nostra pagina. La sezione sarà a schermo intero sul desktop per assicurarsi che la sezione occupi l'intera finestra.
Aggiungi riga
Per iniziare, aggiungi una riga a una colonna alla sezione predefinita.
Impostazioni della sezione
Prima di aggiungere un modulo, apri le impostazioni per la sezione e aggiungi uno sfondo come segue:
- Colore di sfondo: #e9f9ff
- Immagine di sfondo: [aggiungi immagine]
Nella scheda Design, aggiorna l'altezza minima e l'imbottitura.
- Altezza minima: 100vh (desktop), auto (tablet e telefono)
- Imbottitura: 20vh sopra, 20vh sotto
Testo dell'intestazione
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 testo
Nella scheda Design delle impostazioni del testo, aggiorna gli stili dei caratteri dell'intestazione come segue:
- Carattere dell'intestazione: Rubik
- Peso del carattere dell'intestazione: semi grassetto
- Stile carattere intestazione TT
- Allineamento del testo dell'intestazione: al centro
- Colore del testo dell'intestazione: #302ea7
- Dimensione del testo dell'intestazione: 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 Below the Fold
Per dimostrare la funzionalità della barra di navigazione permanente, è necessario aggiungere una sezione below the fold in modo da avere un po' di spazio per scorrere.
Per creare la sezione, duplica la sezione above the fold 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 verso il basso. Questa è solo una sezione da compilare al posto del contenuto effettivo di una pagina.
- Altezza minima: 200 vh
Quindi aggiorna il contenuto del modulo di testo sostituendo la parola "Sotto" con "Sopra".
Parte 3: creazione della barra di navigazione permanente
Per creare la barra di navigazione permanente dal basso verso l'alto, il nostro primo passo è creare una nuova sezione con una riga a una colonna.
Aggiungi nuova sezione e riga
Aggiungi una nuova sezione normale direttamente sotto la sezione above the fold.
Quindi aggiungi 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 rimuovi l'imbottitura superiore e inferiore in modo che la barra di navigazione abbia un'altezza inferiore.
- Imbottitura: 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 sui dispositivi mobili
Per impostazione predefinita, il menu a discesa mobile si aprirà sotto l'icona dell'hamburger. Se manteniamo la barra di navigazione in basso, questo 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 sul display del tablet e del telefono.
Per fare ciò, assegna alla sezione una posizione assoluta su tablet e telefono.
- Posizione: Relativa (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 l'imbottitura delle righe
Una volta completata la sezione adesiva, apri le impostazioni per la riga all'interno della sezione e aggiorna il padding come segue:
- Imbottitura: 10px in alto, 10px in basso
Crea 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 a una colonna.
Contenuto del menu
Aggiorna il contenuto del menu come segue:
- seleziona il menu dal menu a discesa
- aggiungi l'immagine del logo (sto usando un'immagine di 122px per 52px)
- elimina 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 linea 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 su dispositivi mobili
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 spostare la sezione superiore utilizzando un bordo superiore della stessa altezza della barra/sezione di navigazione.
Ispeziona l'altezza della sezione della barra di navigazione su dispositivi mobili
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 di ispezione dell'elemento dal menu di scelta rapida del browser. Dovresti vedere una casella degli strumenti sotto la sezione che mostra le dimensioni (compresa l'altezza) della sezione. Per questo esempio, l'altezza della sezione della barra di navigazione è 72 px.
Aggiungi offset bordo superiore alla sezione above-the-fold
Ora che abbiamo determinato l'altezza della sezione, apri le impostazioni per la sezione superiore (above-the-fold).
Nella scheda Design, aggiungi il seguente bordo superiore su tablet e 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 perché serve solo a spingere la sezione verso il basso in modo che non venga tagliata.
Risultato finale
Guarda il risultato finale!
Pensieri finali
La creazione di una barra di navigazione permanente dal basso verso l'alto può essere facilmente eseguita utilizzando la posizione integrata di Divi e le opzioni permanenti. La chiave è dare alla sezione above the fold un'altezza di 100vh e quindi aggiungere la sezione della barra di navigazione sottostante che si attacca alla parte inferiore e superiore del browser. Si spera che questo aiuti ad aggiungere un above the fold più unico e coinvolgente al tuo sito web.
Questa barra di navigazione permanente funziona meglio per un design a pagina singola piuttosto che per un modello globale. Detto questo, puoi facilmente scegliere di utilizzarlo come design per la home page e utilizzare un'intestazione globale per il resto delle pagine utilizzando il generatore di temi Divi.
Non vedo l'ora di sentirti nei commenti.
Saluti!