Come costruire una barra laterale fissa reattiva con collegamenti di ancoraggio a scorrimento uniforme con Divi

Le barre laterali non sono così popolari come una volta. In molti casi, finiscono per essere più distratti che utili. Ma a volte una barra laterale ha perfettamente senso, soprattutto quando si tratta di contenuti lunghi. Ecco perché ho deciso di creare una barra laterale che abbia molto senso.

Oggi ti mostro come puoi utilizzare Divi Builder per creare una barra laterale fissa (o fissa) reattiva con collegamenti di ancoraggio a scorrimento uniforme (o collegamenti di salto). Poiché la barra laterale rimane visibile e i collegamenti di ancoraggio scorrono uniformemente su diverse sezioni della pagina, la barra laterale rimane abbinata al contenuto, rendendola un'utile funzionalità UX. Come la struttura di un documento, questa combinazione rende il contenuto della tua pagina web più accessibile e più facile da leggere. È una soluzione rinfrescante per quelle pagine a scorrimento lungo.

Controlla!

Sbirciata

Ecco un'anteprima di ciò che costruiremo insieme.

Il concetto

Per quelli di voi che vivono in Google Documenti tanto quanto me, sono a conoscenza di quell'utile strumento di struttura del documento che consente di distribuire facilmente una barra laterale fissa con un contorno cliccabile che passa alle diverse intestazioni del documento. Mi piace perché mi aiuta a trovare le informazioni molto più velocemente. Ho pensato che sarebbe stato bello portare questa stessa funzionalità sul tuo sito web.

Cosa ti serve per iniziare

Per questo tutorial, tutto ciò di cui hai veramente bisogno è Divi! Utilizzeremo anche la pagina delle ricette del pacchetto di layout ricette alimentari, accessibile gratuitamente da Divi Builder.

Aggiungere il layout alla tua pagina

Iscriviti al nostro canale Youtube

Per iniziare, vai avanti e crea una nuova pagina e distribuisci Divi Builder. Seleziona l'opzione "Scegli un layout predefinito". Dal popup Carica dalla libreria, seleziona il pacchetto di layout ricette alimentari e quindi fai clic per utilizzare la pagina delle ricette.

Dopo che il layout è stato caricato, fai clic per costruire sul front-end.

Creazione di una nuova sezione

Dal front-end Divi Builder, crea una nuova sezione e trascinala nella parte superiore del layout.

Copia il pulsante nella sezione dell'intestazione del layout e incollalo nella riga a una colonna della nuova sezione che hai creato.

Apri le impostazioni del pulsante e aggiungi il seguente CSS personalizzato all'Elemento principale nella scheda Avanzate:

display: block !important;

Ciò consente semplicemente al pulsante di occupare l'intera larghezza della colonna.

Modificare il testo del pulsante per leggere "Introduzione". E quindi aggiungi quanto segue per l'URL del collegamento del pulsante:

#introduzione

Ecco come si crea un collegamento di ancoraggio. L'hashtag (#) indica al browser che stai per collegarti a un ID CSS. Il testo seguente “introduzione” corrisponderà al nome dell'ID CSS che aggiungeremo ad una delle nostre sezioni nel layout. Il nome dell'ID CSS può essere qualsiasi cosa tu voglia. Assicurati solo che corrisponda all'ID CSS che fornirai alla sezione in seguito.

Duplica il pulsante e poi ripeti il ​​processo per dare al pulsante un nuovo Testo pulsante e un nuovo URL di collegamento pulsante. Poiché questo sarà un collegamento di ancoraggio che passa a una sezione diversa della pagina, assicurati che l'ID CSS (il testo dopo il "#") sia univoco e corrisponda al nome che darai alla tua sezione in seguito.

Per questo pulsante, cambia il testo del pulsante in "Ingredienti" e l'URL del collegamento del pulsante in "#ingredienti".

Duplica nuovamente il pulsante, quindi assegna al nuovo pulsante il testo del pulsante "Nutrizione" e modifica l'URL del collegamento del pulsante in "#nutrizione".

Duplicare il pulsante ancora una volta, quindi assegnare al nuovo pulsante il testo del pulsante "Istruzioni" e modificare l'URL del collegamento del pulsante in "#istruzioni".

Questo è tutto ciò che dobbiamo fare per ora. Torneremo a questa sezione e tra un po' la trasformeremo in una barra laterale fissa.

Aggiunta degli ID CSS alle sezioni e alle righe

Ora che abbiamo creato tutti i nostri pulsanti con i collegamenti di ancoraggio, siamo pronti per aggiungere i nomi ID CSS corrispondenti alle nostre sezioni e righe.

I link di ancoraggio passeranno automaticamente a qualsiasi elemento della pagina con l'ID CSS corrispondente. Un ID CSS può essere applicato a testo, moduli, righe o sezioni in linea. Se volessi aggiungere un ID CSS all'intestazione utilizzando HTML, sarebbe simile a questo:

<h2 id="introduction">Introduction</h2>

Tuttavia, poiché vogliamo passare a una sezione della pagina, possiamo aggiungere l'ID CSS alla sezione specifica della pagina. Ciò fornirà all'utente uno spazio di visualizzazione abbastanza confortevole in modo che il visitatore possa facilmente riconoscere dove si trova sulla pagina. Passare al testo in linea oa un modulo può causare confusione al visitatore.

Come spiegato in precedenza, ciascuno degli URL dei pulsanti che abbiamo creato deve corrispondere agli ID CSS delle sezioni a cui devono passare.

Per il pulsante "Introduzione", dobbiamo aggiungere l'ID CSS alla sezione della pagina contenente il contenuto dell'introduzione. Per fare ciò, apri le impostazioni della sezione della terza sezione della pagina (la sezione direttamente sotto l'intestazione) e aggiungi il seguente ID CSS nella scheda Avanzate:

ID CSS: introduzione

Questo corrisponderà al pulsante di collegamento di ancoraggio Introduzione che abbiamo creato in precedenza.

Ora nella stessa sezione, trova la riga contenente l'intestazione "Ingredienti". Quindi apri le impostazioni della riga e aggiungi il seguente ID CSS:

ID CSS: ingredienti

Questo corrisponderà al pulsante di collegamento di ancoraggio Ingredienti che abbiamo creato in precedenza.

Scorri verso il basso fino alla sezione successiva con l'intestazione "Nutrizione" e apri le impostazioni della sezione. Quindi aggiungi il seguente ID CSS:

ID CSS: nutrizione

Questo corrisponderà al pulsante di collegamento di ancoraggio Nutrizione che abbiamo creato in precedenza.

Infine, scorri verso il basso fino alla sezione successiva del layout con il titolo "Istruzioni passo passo". Quindi apri le impostazioni della sezione e aggiungi il seguente ID CSS nella scheda Avanzate:

ID CSS: istruzioni

Questo corrisponderà al pulsante di collegamento di ancoraggio delle istruzioni che abbiamo creato in precedenza.

Salva le modifiche.

Ora è un buon momento per vedere se i tuoi collegamenti di ancoraggio funzionano. Apri la pagina in una nuova scheda e fai clic sui pulsanti nella sezione superiore per assicurarti che saltino/scorrano alle posizioni corrispondenti nella pagina.

Se non funzionano, assicurati di tornare indietro e controllare che gli ID CSS siano corretti e che corrispondano.

Creazione del layout fisso della barra laterale

Aggiunta di margini sinistri alle sezioni per creare spazio per la barra laterale

Avere collegamenti di ancoraggio nella parte superiore della pagina va bene per cose come un sommario. Ma per questo caso d'uso, vogliamo mantenere quei collegamenti di ancoraggio visibili all'utente in ogni momento in modo che l'utente non debba tornare all'inizio della pagina dopo aver fatto clic su uno dei collegamenti. Una barra laterale fissa risolverà questo problema poiché rimarrà fissa sul lato della pagina mentre l'utente fa clic sui collegamenti di ancoraggio.

Ma prima di posizionare la barra laterale, dobbiamo creare dello spazio per essa sul lato sinistro della nostra pagina. Per fare ciò aggiungeremo un margine sinistro a ciascuna sezione del layout.

La quantità di margine sinistro che aggiungiamo a ciascuna sezione sarà uguale alla larghezza della barra laterale, quindi ora è il momento di decidere quanto larga vuoi che sia la barra laterale. Per questo esempio, andrà bene una larghezza del 20%.

Apri le impostazioni della seconda sezione (quella direttamente sotto i nostri pulsanti di collegamento di ancoraggio) e aggiungi il seguente margine personalizzato:

Margine personalizzato: 20% rimasto

Ora, prima di salvare le impostazioni, fai clic con il pulsante destro del mouse sull'opzione Margine personalizzato e fai clic su "Copia margine personalizzato" e salva le impostazioni.

In ciascuna delle sezioni rimanenti nel layout della pagina, incolla il margine personalizzato nella sezione facendo clic con il pulsante destro del mouse sulla sezione e facendo clic su "Incolla margine personalizzato".

Ciò darà un margine sinistro del 20% a tutte le tue sezioni tranne la sezione in alto che contiene i pulsanti di collegamento di ancoraggio.

Creazione della barra laterale fissa

Per creare la barra laterale, dovremo darle una posizione fissa a sinistra della pagina. Quindi, in pratica, trasformeremo la sezione superiore in una barra laterale fissa. Per fare ciò, apri le impostazioni della sezione superiore e aggiorna quanto segue:

Nella scheda Progettazione, aggiorna l'altezza e la larghezza...

Larghezza: 20%
Altezza: 100%

Nella scheda Avanzate, aggiorna la posizione...

Posizione: fissa
Offset verticale: 80 px

Ciò conferisce alla sezione una posizione fissa con una larghezza del 20% della pagina. Posiziona anche la sezione a sinistra della pagina e 80 px dalla parte superiore della pagina per adattarsi all'altezza della navigazione dell'intestazione. L'altezza del 100% assicura che la sezione occupi l'intera altezza della pagina.

Ora visualizza la pagina in un'altra scheda del browser per vedere la funzionalità. Mentre scorri verso il basso la pagina, la barra laterale rimane fissa e puoi fare clic sui pulsanti del collegamento di ancoraggio per navigare facilmente tra le diverse sezioni.

Correzione della sovrapposizione del piè di pagina

Potresti aver notato che la sezione si sovrappone alla barra del piè di pagina in fondo alla pagina.

Ci sono alcuni modi per affrontare questo problema. Ad esempio, potrei togliere "altezza: 100%" dalla sezione o potresti aggiungere alcuni CSS alle impostazioni della pagina per regolare la larghezza della barra del piè di pagina. Ma se vuoi mantenere l'altezza della sezione al 100%, una soluzione semplice è eliminare il colore di sfondo della sezione. Apri le impostazioni della sezione della sezione che stiamo utilizzando per la barra laterale e aggiungi il seguente colore di sfondo:

Colore di sfondo: rgba (255,255,255,0)

Se desideri modificare il colore della barra laterale, puoi aprire le impostazioni della pagina e modificare il colore di sfondo dell'area contenuti.

Poiché il colore di sfondo della sezione è trasparente, il colore di sfondo dell'area del contenuto della tua pagina traspare. E poiché tutte le nostre altre sezioni hanno il colore di sfondo, verrà mostrato solo attraverso la sezione della barra laterale senza sovrapporsi alla barra del piè di pagina inferiore.

Apportare modifiche ai dispositivi mobili

Questo design non ha davvero senso per gli smartphone perché non c'è spazio per una barra laterale e avere i collegamenti nella parte superiore della pagina richiederà all'utente di tornare indietro ogni volta che desidera fare clic su un collegamento di ancoraggio. Ma il design funzionerà ancora per tablet, ma potrebbe essere necessario creare un po' più di spazio per quei collegamenti di ancoraggio. Per fare ciò, apri le impostazioni di riga per la riga della barra laterale della sezione e aggiorna quanto segue:

Larghezza personalizzata: 100
Imbottitura personalizzata (desktop): 10% a sinistra, 10% a destra
Imbottitura personalizzata (tablet): 0% a sinistra, 0% a destra

Ora non ci resta che nascondere (o disabilitare) la sezione su smartphone. Per farlo, apri le impostazioni della sezione e vai alla scheda avanzate e fai clic sulla casella di controllo per disabilitare su smartphone.

Questo è tutto. Ora hai un menu della barra laterale fisso reattivo con collegamenti di ancoraggio a scorrimento fluido!

Il risultato finale

Ora controlliamo il risultato finale.

Ed ecco come appare il layout su tablet.

Ulteriori informazioni sugli elementi fissi e sui collegamenti di ancoraggio

Se hai trovato utile questo tutorial, dai un'occhiata ad alcuni dei nostri tutorial correlati di seguito:

• 5 cose fantastiche che puoi fare in Divi con Anchor Links
• Come rendere appiccicoso qualsiasi elemento della pagina Divi
• Come aggiungere widget fissi alla barra laterale in WordPress
• Come far iniziare la navigazione Divi in ​​basso, quindi rimanere fisso in alto durante lo scorrimento
• Come riparare il piè di pagina Divi
• Come creare un menu a comparsa mobile in Divi

Pensieri finali

La bellezza di questa configurazione è che puoi facilmente aggiungere barre laterali fisse a qualsiasi pagina con collegamenti di ancoraggio diversi (o qualsiasi cosa tu voglia). Poiché la tua barra laterale è fondamentalmente una sezione Divi, puoi personalizzarla utilizzando le impostazioni integrate, aggiungere più righe e utilizzare qualsiasi combinazione di moduli che desideri.

Questa configurazione sarebbe ottima per corsi di abbonamento, tutorial, FAQ, portfolio o lunghi post di blog. Puoi anche usarlo per i siti web di una pagina. Hai altri usi da condividere? Sono curioso di sapere cosa sono nei commenti.

Saluti!