5 cose fantastiche che puoi fare in Divi con Anchor Links

I link di ancoraggio possono migliorare la navigazione e aiutare a organizzare i tuoi contenuti, specialmente su un sito web con contenuti di lunga durata. Uno degli altri principali vantaggi dell'utilizzo di collegamenti di ancoraggio diversi dalla navigazione è il fatto che sono fantastici per la SEO. Sebbene il concetto di utilizzo dei collegamenti di ancoraggio sia molto semplice, può essere difficile sapere da dove iniziare. In realtà è una delle prime cose che ho cercato quando ho iniziato a sviluppare siti Web WordPress.

Questo articolo ti mostra 5 cose interessanti che puoi fare in Divi con i link di ancoraggio. Per questi esempi, tutto ciò di cui hai bisogno è Divi e il desiderio di imparare.

Andiamo!

Imparerai a:

1. Scorri e apri un interruttore con un collegamento di ancoraggio in Divi
2. Crea un menu di navigazione di una pagina
3. Passa a una sezione di pagina da un'altra pagina
4. Usa la navigazione Divi Dot
5. Aggiungi collegamenti di ancoraggio ai tuoi titoli

5 cose fantastiche che puoi fare in Divi con Anchor Links

Iscriviti al nostro canale Youtube

Scorri e apri un interruttore con un collegamento di ancoraggio in Divi

I toggle sono uno di quegli elementi che possono migliorare l'esperienza dell'utente. Chiamami pigro (usare la parola efficiente) ma più è facile per me ottenere le mie informazioni, meglio è. Sono un grande fan dei toggle per determinati tipi di contenuti.

Uno dei migliori usi che ho visto per i toggle è per le pagine delle FAQ. Funzionano benissimo per rivelare piccole informazioni su cui l'utente vuole concentrarsi. Questo richiederà solo un minuto e poche righe di JavaScript per essere completato. Puoi anche usare una variante di questo metodo per aprire schede o fisarmoniche e anche se questo può sembrare difficile, in realtà non è troppo complesso.

Innanzitutto, crea una nuova pagina e distribuisci il generatore visivo. Quindi seleziona l'opzione "Scegli un layout predefinito". Nel popup Carica dalla libreria, trova il layout della pagina delle domande frequenti del contabile digitando "faq" nella barra di ricerca. Quindi fai clic sul layout e sull'anteprima che viene visualizzata fai clic sul pulsante Usa questo layout per distribuirlo sulla tua pagina.

Ora sei pronto per aggiungere la tua funzionalità di collegamento di ancoraggio. Per questo esempio, utilizzerò il pulsante nella sezione superiore dell'intestazione come collegamento di ancoraggio in modo che, quando si fa clic, la pagina scorrerà fino a un interruttore specifico che si aprirà automaticamente contemporaneamente.

Per fare ciò, apri prima le impostazioni del pulsante e aggiungi il seguente URL di collegamento per il tuo pulsante:

URL collegamento pulsante: #toggle3

Ho dato a questo link di ancoraggio l'id "toggle3" per ricordare che voglio collegarmi al terzo interruttore sulla pagina. Questo nome id sarà correlato all'ID CSS di attivazione/disattivazione che aggiungeremo in seguito in modo che il pulsante sappia su quale interruttore scorrere.

Quindi aggiungi una classe CSS univoca al modulo del pulsante:

Classe CSS: open-toggle

Quindi salva le tue impostazioni.

Questo nome di classe ti aiuta a ricordare l'azione dell'apertura a ginocchiera quando fai clic sul pulsante. Useremo questa classe nel nostro jqeury personalizzato per ottenere la funzionalità desiderata in un po'.

Quindi scorrere la pagina verso il basso fino alla riga contenente le due colonne di moduli di attivazione/disattivazione utilizzati per le FAQ. Apri l'impostazione del terzo modulo di commutazione nella prima colonna. Questo è il modulo a cui vogliamo scorrere e aprire quando si fa clic sul pulsante (o collegamento di ancoraggio).

Nella scheda Avanzate, aggiungi il seguente ID CSS:

ID CSS: toggle3

È importante che questo sia esattamente correlato all'URL del collegamento del pulsante utilizzato in precedenza. L'unica differenza qui è che devi omettere il "#".

L'ultimo passaggio prevede l'aggiunta di un codice personalizzato al corpo della nostra pagina. Per farlo, vai alle Opzioni del tema Divi e apri la scheda Integrazione, quindi incolla quanto segue nella sezione del corpo come mostrato nella GIF di seguito.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Non dimenticare di avvolgere il codice nel tag script appropriato.

Ora puoi testare la tua pagina per vedere se funziona.

Per capire un po' cosa sta facendo questo codice. Diamo un'occhiata più da vicino. Ecco di nuovo il frammento:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Nel codice, il selettore "a.open-toggle" si riferisce al pulsante con la nostra classe personalizzata. Il selettore “#toggle3.et_pb_toggle_2 .et_pb_toggle_title” si riferisce al titolo del toggle con l'id “toggle3” e la classe “et_pb_toggle_2”.

La classe “et_pb_toggle_2” è in realtà la classe associata al terzo toggle. Questo perché Divi assegna al primo interruttore la classe "et-pb_toggle_0", al secondo interruttore "et-pb_toggle_1" e così via.

Quindi, se vuoi sapere qual è la classe per un particolare interruttore sulla tua pagina, puoi semplicemente contare da 0 a partire dal primo interruttore sulla pagina e procedere verso il basso. Oppure puoi sempre semplicemente ispezionare il codice html per trovare la classe in questo modo.

Questo è importante da sapere in modo da poter aggiornare il codice di conseguenza. Ad esempio, se volessi che il mio pulsante apra il secondo interruttore sulla pagina, sostituirei "#toggle3.et_pb_toggle_2 .et_pb_toggle_title" con "#toggle3.et_pb_toggle_1 .et_pb_toggle_title".

Questo frammento di codice è una variazione del concetto seguente. Ho cercato di mantenerlo il più semplice possibile.

Questa fantastica tecnica funzionerebbe anche per schede e fisarmoniche. Il trucco è identificare le classi CSS corrette per l'elemento o la scheda della fisarmonica in modo da poterlo utilizzare nel codice.

Crea un menu di navigazione di una pagina

Questo tipo di design del menu è popolare per i siti di una pagina. Può essere utile creare collegamenti nel menu per passare da una sezione all'altra della pagina. Ciò è particolarmente utile se stai costruendo un sito di una pagina o una pagina di destinazione. Puoi consultare la documentazione su come creare siti Web di una pagina con Divi per maggiori informazioni su questo processo.

Ecco una rapida panoramica su come farlo.

Funzionerà per qualsiasi layout predefinito, ma per questo esempio utilizzerò il layout della home page di Web Freelancer. Crea una nuova pagina, distribuisci il visual builder, seleziona "Scegli layout predefinito", quindi distribuisci il layout della home page di Freelancer sulla tua pagina.

Ora devi aggiungere gli ID CSS a ciascuna sezione a cui desideri collegare (o scorrere). Trova la sezione intitolata "I miei servizi". Apri le impostazioni della sezione, fai clic sulla scheda Avanzate e aggiungi il seguente ID CSS:

ID CSS: servizi

Quindi, trova la sezione "Lavori in primo piano" e assegna a quella sezione un ID CSS come segue:

ID CSS: lavoro

E aggiungi anche il seguente ID CSS alla sezione "Chi siamo":

ID CSS: circa

Con queste tre sezioni correttamente impostate con i loro ID CSS univoci, possiamo sapere creare i nostri collegamenti di ancoraggio del menu.

Dalla Dashboard, vai su Aspetto > Menu e crea un nuovo menu principale . Quindi crea tre collegamenti personalizzati con il seguente URL e testo del collegamento:

Collegamento personalizzato 1
URL: #servizi
Testo del collegamento: Servizi

Collegamento personalizzato 2
URL: #lavoro
Testo del collegamento: Lavoro

Collegamento personalizzato 3
URL: #about
Testo del collegamento: Informazioni

Non dimenticare di selezionare imposta la posizione di visualizzazione su Menu principale. Quindi salva il tuo menu.

Ora quando visiti la tua pagina puoi provarlo. Potresti notare che c'è uno scorrimento fluido. Questo perché il tema Divi aggiunge automaticamente lo scorrimento uniforme: questa funzione è stata aggiunta nella versione Divi 2.4.

Per una maggiore ispirazione sulla creazione di siti Web killer in stile una pagina, dai un'occhiata a questi post:

• Come costruire una barra laterale fissa reattiva con collegamenti di ancoraggio
• Come creare sezioni a schermo intero con collegamenti di scorrimento superiore e inferiore con Divi
• Come creare collegamenti attivi su Scroll per siti Web Divi a una pagina

Passa a una sezione di pagina da un'altra pagina

Possiamo usare l'esempio sopra per dimostrarlo. Poiché abbiamo aggiunto un ID CSS a tre sezioni della pagina (servizi, lavoro, informazioni), non solo possiamo passare a quelle sezioni utilizzando i nostri collegamenti di ancoraggio del menu, ma possiamo anche passare a quelle sezioni da una pagina completamente diversa.

Tutto ciò che devi fare è utilizzare l'URL del collegamento di ancoraggio quando viene creato un collegamento su una pagina diversa. Se volessi inserire un collegamento alla sezione dei servizi con l'ID "servizi", sarebbe simile a www.tuodominio.com/pagina/#servizi .

Ecco un esempio di come la pagina verrà caricata e scorrerà fino alla sezione "I miei servizi" quando si collega a quella sezione da un'altra pagina.

Funziona alla grande per molti inviti all'azione diversi (ad esempio, saperne di più, ottenere Divi, votare per me!, ecc.) A cui potresti voler passare da diverse pagine del tuo sito.

Usa la navigazione Divi Dot

Tecnicamente questi sono collegamenti di ancoraggio incorporati. Non dovrai aggiungere i tuoi ID di sezione CSS. La funzione di navigazione a punti crea automaticamente collegamenti di ancoraggio dalle tue sezioni. Per attivare la navigazione a punti per la tua pagina, imposta semplicemente l'opzione Navigazione a punti su "ON" in Impostazioni pagina Divi in ​​alto a destra dello schermo quando modifichi la tua pagina. Una volta attivato Dot Navigation, Divi aggiunge automaticamente un menu trasparente sul lato della pagina. Ogni punto scorre fino alle sezioni della pagina quando viene cliccato.

Per ulteriori informazioni, c'è un ottimo post su come aggiungere etichette alla navigazione dei punti.

Aggiungi collegamenti di ancoraggio ai tuoi titoli

L'aggiunta di collegamenti di ancoraggio ai titoli è sempre una buona idea. È un ottimo modo per indicizzare pagine più lunghe con molti contenuti, consentendoti di navigare facilmente verso ciascuna intestazione all'interno della stessa pagina o di creare collegamenti a queste intestazioni da altre pagine del tuo sito web. Aiuta anche i motori di ricerca a eseguire la scansione del tuo sito.

Per aggiungere un ID CSS alle intestazioni utilizzando Divi Builder, apri il modulo contenente il testo dell'intestazione. Assicurati di avere la scheda di testo aperta. Trova il tag di intestazione (h1, h2, h3, ecc...) e quindi inserisci un id tra parentesi quadre del tag di intestazione iniziale. Ecco un esempio di un'intestazione h3 con l'id "webdesign":

<h3 id="webdesign">Website Design</h3>

Ora posso collegarmi a questa intestazione da qualsiasi luogo purché utilizzi l'URL del collegamento di ancoraggio corretto. Che per questo esempio dovrebbe assomigliare a questo:

www.tuodominio.com/page/#webdesign

Questo sarà utile anche per pagine o post che non utilizzano Divi builder. Per aggiungere collegamenti di ancoraggio alle intestazioni di queste pagine o articoli, apri la scheda Testo nell'editor di testo di WordPress. Individua semplicemente l'intestazione di tua scelta e aggiungi l'id all'interno del tag dell'intestazione come mostrato di seguito.

Questo è esattamente quello che ho fatto per questo post. I collegamenti alla sezione nella parte superiore di questo post fungono da un bel sommario che collega alle diverse intestazioni del post.

Roba piuttosto interessante.

Avvolgendo

I link di ancoraggio hanno alcuni ottimi usi pratici, ma non esagerare con loro perché devi sempre considerare prima il tuo pubblico e i tuoi obiettivi. Ricorda, un buon design riguarda l'usabilità e la funzionalità, quindi in alcuni casi i collegamenti di ancoraggio possono essere molto utili. Ma in altri, significa solo che gli utenti si spostano avanti e indietro sulle sezioni di parallasse e finiscono per perdersi. Spero che tu sia stato in grado di ottenere alcuni suggerimenti utili da questo post.

Hai suggerimenti o domande sui link di ancoraggio? Fateci sapere le vostre esperienze nella sezione commenti qui sotto.