Come creare collegamenti attivi su Scroll per siti Web Divi a una pagina

Nel tutorial di oggi ti mostreremo come modellare i tuoi link di navigazione verticale in modo che quando un visitatore scorre la pagina, il link del menu corrispondente alla sezione in cui si trova evidenzierà. È un piccolo effetto carino che aggiunge un po' di interattività tra il tuo web design e il comportamento dell'utente. Questo metodo funziona particolarmente bene se stai creando un sito web di una pagina.

Per coloro che hanno difficoltà a immaginare questo effetto nella loro mente, abbiamo fornito un'anteprima di seguito.

Risultato

Diamo un'occhiata al risultato finale che sarai in grado di ottenere dopo aver seguito questo post:

Come puoi vedere, il collegamento attivo evidenziato cambia automaticamente mentre l'utente scorre le sezioni della pagina (oltre che al clic).

Ispirazione

Abbiamo trovato la nostra ispirazione per questo post sul sito web di Filmschool Berlin che abbiamo citato come esempio nel nostro post sulla navigazione verticale. Un lettore nei commenti di quel post ha chiesto di mostrargli come creare l'effetto di collegamento attivo a scorrimento e quindi eccoci qui!

Come creare collegamenti attivi su Scroll per siti Web Divi a una pagina

Iscriviti al nostro canale Youtube

Per iniziare: scarica la pagina Scorri fino al plug-in ID

Per realizzare questo design, inizieremo utilizzando il plug-in Page Scroll to ID gratuito e ben valutato che puoi trovare qui. Fare clic sul pulsante "Download" e salvare il file ZIP del plug-in da qualche parte dove è possibile trovarlo subito.

Carica e attiva la pagina Scorri fino al plug-in ID

La prossima cosa che devi fare è andare sul dashboard di WordPress > Plugin > Aggiungi nuovo > Seleziona il file ZIP che hai appena scaricato e caricalo.

Dopodiché, non dimenticare di attivare anche il plugin.

Abilita la navigazione verticale

Prima di entrare nelle impostazioni del plug-in Page Scroll to ID, abiliteremo prima la navigazione verticale (e la navigazione fissa nel passaggio successivo). Se sei nella dashboard di WordPress, vai su Aspetto > Personalizza > Intestazione e navigazione > Formato intestazione > E abilita la navigazione verticale.

Abilita navigazione fissa

Andando avanti, abilitiamo la navigazione fissa del tuo sito web. Ciò è necessario poiché l'intero scopo dell'utilizzo dei collegamenti attivi sullo scorrimento è che i visitatori possano vedere in quale sezione si trovano, quando ci sono. Se sei nella dashboard di WordPress, vai su Divi > Opzioni del tema > E abilita la barra di navigazione fissa nella scheda Generale.

Scorri la pagina fino alle impostazioni del plug-in ID

Per questa parte, torneremo al plugin che è stato caricato di recente. Una volta attivato il plugin, dovrai utilizzare le impostazioni corrette. Per andare alle impostazioni, fai clic su "impostazioni" proprio sotto il nome del plug-in.

Una volta fatto ciò, noterai le diverse opzioni che ti aiutano a determinare come si comporteranno i link attivi sul tuo sito web. Per l'esempio che abbiamo fatto, stiamo usando le seguenti impostazioni:

• Abilita sui collegamenti al menu di WordPress: Sì
• Durata scorrimento: 200 millisecondi
• Durata dello scorrimento con regolazione automatica: Sì
• Scorrimento dell'animazione facilitata: lineare
• Scorri sempre in modo fluido quando raggiungi la fine della pagina/documento: Sì
• Interrompi lo scorrimento della pagina con la rotellina del mouse o il tocco: Sì
• Layout di pagina: automatico
• Consenti solo un elemento evidenziato alla volta: Sì
• Mantieni evidenziato l'elemento corrente fino a quando non viene visualizzato il successivo: Sì
• Evidenzia in base al prossimo obiettivo: Sì
• Aggiungi il valore hash del link cliccato all'URL/barra degli indirizzi del browser: Sì
• Scorri da/a pagine diverse: Sì
• 0 millisecondi di ritardo per lo scorrimento al target al caricamento della pagina
• Impedisci ad altri script di gestire i collegamenti del plugin (se possibile): Sì
• Normalizza i bersagli dei punti di ancoraggio: Sì

Aggiungi ID CSS e classe alle sezioni

La prossima cosa che devi fare è assegnare i diversi ID CSS e lo scorrimento della pagina sulla classe CSS ID alle diverse sezioni del tuo one-pager. Per farlo, apri le impostazioni di ciascuna delle tue sezioni e vai alla scheda Avanzate. Nella scheda Avanzate, decidi i diversi ID CSS che desideri utilizzare per le tue sezioni. Sappi che, affinché funzioni, dovrai assegnare un ID CSS diverso a ciascuna delle sezioni del tuo one-pager.

In questo esempio, stiamo utilizzando "home" come primo ID CSS. La classe CSS, tuttavia, è la stessa per ciascuna delle sezioni e ti aiuta a collegare la sezione al plug-in Page Scroll to ID. Il nome della classe CSS è 'ps2id'.

Aggiungi ID alle voci di menu

Successivamente, è il momento di creare le voci di menu e assicurarsi che siano in linea con le sezioni e con il plug-in Page Scroll to ID. Se sei nella dashboard di WordPress, vai su Aspetto > Menu . Se hai già un menu principale, puoi lavorare su quello. In caso contrario, puoi digitare il titolo e creare un nuovo menu. Non dimenticare di renderlo un menu principale.

Usa link personalizzati

Successivamente, avrai bisogno di collegamenti personalizzati per ottenere i risultati desiderati. Inizia aggiungendo un primo collegamento personalizzato. Aggiungi il tuo sito web seguito dall'ID della prima sezione al campo del collegamento come mostrato nella schermata qui sotto.

Abilita classi CSS

La prossima cosa che dovrai fare, se non l'hai già fatto in passato, è attivare le classi CSS per le tue voci di menu. Per farlo, fai clic sull'opzione "Opzioni schermo" nell'angolo destro. Una volta visualizzate le possibilità, abilita le classi CSS.

Usa Scorri pagina fino a ID Classe CSS

Dopo aver abilitato le classi CSS per le voci di menu, puoi andare avanti e collegare manualmente la classe Page Scroll to ID a ciascuna delle voci di menu. La classe CSS è la stessa che abbiamo usato per assegnare gli ID alle nostre sezioni, ovvero 'ps2id'.

Apportare modifiche all'aspetto

Puoi apportare tutti i tipi di modifiche al tuo menu principale, anche quando utilizzi questo metodo. Per mostrarti come puoi apportare le modifiche, ricreeremo la nostra navigazione verticale di esempio.

Nota: come accennato nell'introduzione di questo post, non sarai in grado di vedere le modifiche che hai apportato mentre stai visualizzando l'anteprima della pagina. Devi prima pubblicare la pagina e visualizzarla nella sua modalità live per notare i risultati.

Personalizzatore di temi

Inizia andando su Personalizzatore tema> Intestazione e navigazione> Menu principale e apporta le seguenti modifiche all'aspetto del tuo menu principale:

• Nascondi immagine logo: Sì
• Altezza massima del logo: 83
• Menu Margine Superiore: 0
• Dimensione del testo: 14
• Spaziatura lettere: -1
• Carattere: Lato Light
• Stile carattere: maiuscole
• Colore del testo: #FFFFFF
• Colore collegamento attivo: #FFFFFF
• Colore di sfondo: rgba (255,255,255,0)
• Colore di sfondo del menu a discesa: rgba (255,255,255,0)

Opzioni personalizzate del tema CSS

Per modificare lo stile del collegamento attivo, dovremo aggiungere del codice CSS personalizzato. Se sei nella dashboard di WordPress, vai su Divi > Opzioni tema > Scorri verso il basso la scheda Generale e incolla le seguenti righe di codice CSS nella casella CSS personalizzato:

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

Oltre a ciò, abbiamo anche utilizzato un menu trasparente sovrapposto, che abbiamo trattato in modo più dettagliato in questo post. Per applicare le modifiche CSS anche al tuo sito web, copia e incolla anche le seguenti righe di codice CSS nella casella CSS personalizzato:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

Risultati

Dopo aver seguito tutti i passaggi in questo post, dovresti essere in grado di ottenere questo risultato finale:

Puoi, ovviamente, modificare lo stile secondo le tue preferenze (o usarlo anche per la navigazione superiore).

Pensieri finali

In questo tutorial, ti abbiamo mostrato come creare un menu di navigazione verticale interattivo per one-pager. Ti abbiamo mostrato come puoi utilizzare il plugin Page Scroll to ID in combinazione con il tema Divi per ottenere facilmente il risultato che desideri ottenere. In un prossimo post, torneremo su questo e ti mostreremo come modellare in modo creativo i link attivi che stai utilizzando con questo metodo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di Yurlick / shutterstock.com