Come combinare una barra di avanzamento di scorrimento con un menu di navigazione fisso in Divi
Pubblicato: 2020-10-16Gli indicatori della barra di avanzamento possono aggiungere un bel tocco al tuo sito Web, potenziando la UX con un'interazione utile (e divertente). Normalmente, le barre di avanzamento si trovano da sole nella parte superiore della pagina senza molta connessione con il contenuto effettivo della pagina. L'utente ha semplicemente un indicatore visivo di dove si trova sulla pagina. Ma, oggi, porteremo questa funzionalità a un altro livello.
In questo tutorial, ti mostreremo come combinare una barra di avanzamento di scorrimento con un menu di navigazione fisso in Divi. Questo design è unico in quanto la barra di avanzamento è correlata alla larghezza dei pulsanti del menu. E poiché la larghezza dei pulsanti del menu è uguale (in percentuale) all'altezza delle sezioni scorrevoli del contenuto della pagina, ogni pulsante verrà riempito dalla barra di avanzamento dello scorrimento proprio quando l'utente raggiunge la sezione corrispondente del pulsante. E se ciò non bastasse, renderemo ogni pulsante un collegamento di ancoraggio anche alle sezioni corrispondenti, per un ulteriore bonus UX!
Questo design sarebbe perfetto per portare un utente attraverso una landing page che descrive le fasi di un processo. Bene, vedrai.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
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!
https://youtu.be/Kf-ciVKEZFI
Iscriviti al nostro canale Youtube
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.
Parte 1: Creazione del layout di pagina della sezione a schermo intero
La Sezione Superiore
Per iniziare, aggiungi una riga a una colonna alla sezione.
Prima di aggiungere un modulo, aggiorna le impostazioni della riga come segue:
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 0px in alto, 0px in basso
All'interno della riga, aggiungi un modulo di testo.
Quindi apri le impostazioni per il modulo di testo e incolla il seguente codice HTML per creare un'intestazione colorata:
<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>
Nella scheda Progettazione, aggiorna l'allineamento del testo al centro.
L'aggiornamento dei seguenti stili di intestazione H2:
- Intestazione 2 Carattere: Roboto
- Intestazione 2 Dimensione testo: 6vw
Apri le impostazioni della sezione e aggiorna l'altezza in modo che sia 100vh (o 100% dell'altezza della finestra/finestra). Questo assicurerà che la sezione sia a schermo intero. Quindi estrarre l'imbottitura come segue:
- Altezza: 100vh
- Imbottitura: 0px in alto, 0px in basso
Per assicurarti che la riga/il contenuto all'interno della sezione rimanga centrato verticalmente all'interno della sezione, aggiungi il seguente CSS personalizzato all'elemento principale della sezione:
display:flex; flex-direction:column; justify-content:center;
Fase uno, sezione
La sezione successiva del layout sarà il primo di quattro passaggi. È anche la prima sezione a cui scorrerà il nostro primo link di ancoraggio del menu.
Per creare la sezione del primo passaggio, duplica la sezione superiore che abbiamo appena creato.
Quindi apri le impostazioni per la sezione duplicata e aggiorna il colore di sfondo:
- Colore di sfondo: #222222
Quindi, apri le impostazioni del testo e sostituisci il corpo del testo con quanto segue:
<h2>Step One...</h2> Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur.
Modifica l'allineamento del testo in allineato a sinistra.
Quindi aggiorna quanto segue:
- Colore testo titolo 2: #00a4e0
- Larghezza massima: 40vh (desktop), 80vh (tablet)
- Allineamento del modulo: centro
Questo si occupa della prima sezione.
Fase due, sezione
Per creare la sezione del passaggio due, duplica la sezione del passaggio uno che abbiamo appena creato.
Apri le impostazioni della sezione e aggiungi un gradiente di sfondo sopra il colore di sfondo come segue:
- Colore di sfondo sfumato sinistro: rgba (255,255,255,0.85)
- Colore di sfondo sfumato a destra: rgba (255,255,255,0.85)
Quindi aggiorna il colore dell'intestazione:
- Colore testo titolo 2: #ee4266
Il colore dello sfondo e dell'intestazione di questa sezione corrisponderà ai colori del pulsante correlato a questa sezione nel menu che creeremo in seguito.
Fase tre, sezione
Per creare la sezione del passaggio tre, duplica la sezione del passaggio due e trascinala nella parte inferiore della pagina.
Quindi cambia il colore dell'intestazione del modulo di testo.
- Colore testo titolo 2: #26c485
Fase quattro, sezione
Il nostro passo finale è il quarto. Per creare questa sezione, duplica la sezione del passaggio due e trascinala nella parte inferiore della pagina.
Quindi aggiorna l'intestazione per il modulo di testo in quella sezione.
- Colore testo titolo 2: #2a1e5c
Risultato
Ecco il risultato del nostro layout finora.
Parte 2: Creazione della barra di avanzamento e del menu di scorrimento
Questa parte successiva è dove finalmente creiamo la barra di avanzamento dello scorrimento con i nostri pulsanti di menu. L'idea è di aggiungere una sezione fissa nella parte superiore della pagina. Quindi all'interno della sezione, creeremo una riga che contiene un modulo divisore che fungerà da indicatore della barra di avanzamento. In cima alla riga con la barra di avanzamento, aggiungeremo un'altra riga che conterrà i nostri pulsanti. Ogni pulsante avrà uno sfondo trasparente (o semitrasparente) per rivelare la barra di avanzamento dietro di esso mentre l'utente scorre la pagina.
Per iniziare, creiamo la sezione fissa nella parte superiore della pagina. Vai avanti e crea una nuova sezione regolare e trascinala nella parte superiore del layout di pagina.
Apri le impostazioni della sezione ed elimina il riempimento come segue:
- Imbottitura: 0px in alto, 0px in basso
Nella scheda Avanzate, aggiorna quanto segue:
- Posizione: fissa
- Indice Z: 999
Ciò assicurerà che la sezione rimanga fissa nella parte superiore della finestra del browser per una facile funzionalità di collegamento di ancoraggio. Si assicurerà anche che la sezione esca dal normale flusso del documento/html e non aumenti l'altezza del documento complessivo. Questo farà sì che la barra di scorrimento raggiunga la fine di ogni pulsante esattamente quando l'utente raggiunge ogni sezione/passo della pagina durante lo scorrimento.
All'interno della sezione, aggiungi una riga a una colonna.
Apri le impostazioni della riga e aggiorna quanto segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 0px in alto, 0px in basso
- Posizione: Assoluta
Apri le impostazioni della colonna e aggiungi il seguente CSS personalizzato all'elemento principale:
height: 100%; display:flex; align-items:center;
Ciò assicurerà che la colonna abbia la stessa altezza della sezione. Consentirà inoltre ai moduli di avere anche un'altezza del 100%. Questa sarà la chiave per assicurarti che la barra di avanzamento riempia la sezione.
Per creare la barra di avanzamento, aggiungi un modulo divisore alla colonna.
Quindi aggiorna le impostazioni del divisore come segue:
- Mostra divisore: NO
- Colore di sfondo: #222222
- Larghezza: 100%
- Altezza: 100%
NOTA: qui stiamo dando alla barra di avanzamento una larghezza del 100% in modo che tu possa vederla all'interno del design. Aumenteremo e diminuiremo la larghezza del divisore/barra di avanzamento con JQuery.
Nella scheda Avanzate, aggiungi un ID CSS e assegnagli una posizione assoluta.
- ID CSS: scrollBar
- Posizione: Assoluta
Aggiunta dell'indicatore di testo percentuale
Successivamente, aggiungeremo un luogo per mostrare la percentuale della posizione di scorrimento mentre l'utente scorre verso il basso la pagina. Questo sarà correlato alla larghezza della barra di avanzamento.
Sotto il divisore, aggiungi un modulo di testo.
Quindi incolla il seguente codice HTML nel corpo:
<p><span></span></p>
Il nostro JQuery scriverà il testo percentuale su questo HTML (tra i tag span). Non sarai in grado di vedere nulla ora.
Sebbene il testo percentuale non sia ancora visibile, dobbiamo ancora aggiungere il seguente stile prima che venga visualizzato.
- Carattere del testo: Roboto
- Stile del carattere del testo: TT
- Colore del testo del testo: #ffffff
- Dimensione del testo del testo: 16px
- Imbottitura: 0.8em in alto, 0.8 in basso, 15px a sinistra
Nella scheda Avanzate, assegnagli una Classe CSS personalizzata e disabilitala su telefono e tablet.
- Classe CSS: et-progress-label
- Disabilita su: telefono, tablet
Anche se non abbiamo finito, questo è un buon punto per aggiungere il nostro codice personalizzato necessario per mostrare la barra di avanzamento e la percentuale di scorrimento.
Per aggiungere il codice, aggiungi un modulo di codice sotto il modulo di testo.
Quindi incolla il seguente codice nella casella del codice assicurandoti di avvolgerlo con i tag di script richiesti:
(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span');
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );
Questo si occupa della barra di avanzamento e del testo percentuale. Passiamo al menu di navigazione.
Costruire i pulsanti del menu con collegamenti di ancoraggio
Ora siamo pronti per creare il menu di navigazione che includerà quattro pulsanti che coprono l'intera larghezza del browser. Ho pensato che sarebbe stato bello avere la barra di scorrimento che riempiva ogni pulsante quando l'utente raggiunge la sezione corrispondente a cui si sta collegando. Ecco l'idea. Ciascun pulsante avrà una larghezza pari al 25% della larghezza totale del browser. E poiché le nostre quattro sezioni hanno tutte la stessa altezza (100vh), ciascuna delle quattro sezioni rappresenta il 25% dell'area scorrevole totale del layout di pagina. Ciò assicurerà che la barra di avanzamento raggiunga la fine di ciascun pulsante esattamente mentre la sezione corrispondente riempie la finestra. L'hai preso? In caso contrario, si spera che abbia più senso in seguito.
La riga e la colonna
Per creare i pulsanti del menu, innanzitutto, dobbiamo creare una riga di quattro colonne sotto la riga contenente la barra di avanzamento/divisore.
Apri le impostazioni della riga e aggiorna quanto segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 0px in alto, 0px in basso
Per assicurarci che le colonne vengano impilate sui dispositivi mobili, dobbiamo aggiungere il seguente CSS personalizzato all'elemento principale:
display:flex; flex-wrap:nowrap;
Pulsante Passaggio Uno
Per creare il primo pulsante, aggiungi un modulo pulsante nella colonna all'estrema sinistra.
Aggiorna il testo del pulsante e l'URL del link come segue:
- Testo del pulsante: passaggio 1
- URL collegamento pulsante: #uno
(questo link di ancoraggio salterà la sezione con l'ID CSS corrispondente che aggiungeremo in seguito)
Successivamente, aggiorna gli stili dei pulsanti come segue:
- Allineamento dei pulsanti: centro
- Dimensione del testo del pulsante: 20 px (desktop), 14 px (tablet)
- Colore di sfondo del pulsante: trasparente
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Spaziatura tra le lettere dei pulsanti: 0,2 em
- Carattere del pulsante: Roboto
- Stile carattere pulsante: TT
- Imbottitura: 0.8em in alto, 0.8em in basso, 0 a sinistra, 0 a destra
Per fare in modo che il pulsante occupi l'intera larghezza della colonna, aggiungi il seguente CSS personalizzato all'elemento principale:
display:block !important; width: 100%;
Pulsante Passaggio 2
Per creare il pulsante per il passaggio due, duplica il pulsante nella colonna uno e trascinalo nella colonna 2.
Quindi aggiorna quanto segue:
- Colore del testo del pulsante: #ee4266
- Colore di sfondo del pulsante: rgba (255,255,255,0.85)
Il colore di sfondo semitrasparente verrà combinato con il colore della barra di avanzamento nera (dietro) per corrispondere allo sfondo della sezione del passaggio due corrispondente.
Quindi aggiorna l'URL del collegamento del pulsante con quanto segue:
- URL collegamento pulsante: #due
Pulsante Passaggio 3
Per creare il pulsante del passaggio 3, duplica il pulsante del passaggio 1 (ha lo stesso colore bg) e trascinalo nella colonna 3.
Quindi aggiorna il colore del testo del pulsante:
- Colore del testo del pulsante: #26c485
Quindi aggiorna l'URL del collegamento del pulsante con quanto segue:
- URL collegamento pulsante: #tre
Pulsante Passaggio 4
Per creare il pulsante del passaggio 3, duplica il pulsante del passaggio 2 (ha lo stesso colore bg) e trascinalo nella colonna 4.
Quindi aggiorna il colore del testo del pulsante:
- Colore del testo del pulsante: #2a1e5c
Quindi aggiorna l'URL del collegamento del pulsante con quanto segue:
- URL collegamento pulsante: #quattro
Aggiunta degli ID CSS della sezione corrispondente per i collegamenti di ancoraggio
Una volta che i pulsanti sono finiti e tutti hanno i loro URL di collegamento di ancoraggio, possiamo aggiungere gli ID CSS della sezione corrispondente a ciascuna sezione a cui vogliamo che ogni pulsante passi nella pagina.
ID CSS della prima sezione
Apri le impostazioni per la sezione del passaggio uno e aggiungi il seguente ID CSS:
- ID CSS: uno
ID CSS della seconda sezione del passaggio
Apri le impostazioni per la sezione del passaggio due e aggiungi il seguente ID CSS:
- ID CSS: due
ID CSS della sezione tre passaggio
Apri le impostazioni per la sezione del passaggio tre e aggiungi il seguente ID CSS:
- ID CSS: tre
ID CSS della sezione quattro del passaggio
Apri le impostazioni per la sezione del passaggio quattro e aggiungi il seguente ID CSS:
- ID CSS: quattro
Risultato finale
Pensieri finali
Questo menu della barra di avanzamento è sicuramente un design unico che ha il potenziale per una varietà di applicazioni. Spero che ti aiuti con il tuo prossimo progetto. E sentiti libero di esplorare le innumerevoli varianti di design disponibili all'interno del Divi builder per creare il tuo menu della barra di avanzamento.
Non vedo l'ora di sentirti nei commenti.
Saluti!