Come aggiungere salti di pagina ai contenuti su WordPress

Immagine avatar per Andrea Di Rocco

Pubblicato da Andrea Di Rocco in

2K+ Visite sul post corrente.

Aggiungere salti di pagina ai contenuti

Aggiungere salti di pagina a pagine e post su WordPress è una soluzione molto semplice, ma anche veramente efficace che può aiutare i tuoi visitatori a navigare più comodamente all’interno di una pagina, specialmente se è piuttosto lunga.

Un salto di pagina, infatti, non è altro che un link che porta a una sezione della stessa pagina.

Se non ti è chiaro il funzionamento del salto di pagina, dai un’occhiata alla nostra guida su come guadagnare online.

Ecco qui un indice del post, così che questo sia facilmente navigabile.

Cliccando su una voce dell’indice, gli utenti possono saltare alla sezione desiderata.

Ci sono diversi plugin che permettono di gestire questa funzione in modo automatico, come ad esempio il comodo e pratico Table of contents.

Esso inserisce in automatico un indice dei contenuti in tutti gli articoli, oppure solo in quelli che rispecchiano determinate condizioni da te impostate.

Questa soluzione è comoda se devi aggiungere un menu di navigazione in tutte le pagine, ma non è necessario installare un plugin per utilizzarlo solo occasionalmente.

Alla fine di questa guida, potrai aggiunge salti di pagina anche sul tuo sito, senza dover installare alcun plugin aggiuntivo o fare modifiche al tuo tema!

Se sei interessato ad approfondire questo aspetto, il modulo HTML e CSS del nostro video corso WordPress possono aiutarti a padroneggiare questi due linguaggi e permetterti di personalizzare al massimo il tuo sito web.

Aggiungere salti di pagina con i codici HTML

Aggiungere salti di pagina è molto semplice. È sufficiente fare due cose:

  • step 1: aggiungere un ID all’elemento sul quale vuoi portare l’utente (per esempio, un sottotitolo, un paragrafo, una lista puntata, eccetera)
  • step 2: aggiungere all’interno del contenuti un link che porta all’elemento a cui è stato assegnato l’ID.

Per prima cosa, devi accedere la pagina o il post in questione, e modificare il contenuto in modalità Editore di Testo

Non farti spaventare dai codici che vedi nell’Editore di Testo, si tratta di semplice HTML.

Step 1: aggiungi l’ID all’elemento di destinazione

Step 1 - aggiungi l'ID all'elemento di destinazione

Per prima cosa, individua l’elemento dove vuoi che l’utente sia portato quando ‘fa un salto di pagina’.

Per esempio, potrebbe essere un sottotitolo di misura H2.

Il codice sarebbe questo:

<h2>Questo è il sottotitolo</h2>

Dobbiamo ora aggiungere un ID a questo elemento.

Semplicemente, modifichiamo il codice HTML in questo modo:

<h2 id="salto-pagina-destinazione">Questo è il sottotitolo</h2>

Tra le virgolette di id=”” , puoi aggiungere qualunque ID a tua scelta!

Non puoi però usare lettere accentate e altri caratteri speciali.

È arrivato il momento di aggiungere il link interno al contenuto, che di fatto farà ‘fare il salto’ all’elemento di destinazione.

Per prima cosa, identifica in quale parte del testo vuoi inserire il link.

Per esempio, potrebbe essere una frase del tipo Clicca qui per andare al sottotitolo.

Aggiungi un link come fai di solito; però invece di inserire un normale url digita un cancelletto, seguito immediatamente dall’ID che hai associato all’elemento scelto nello step 1. 

inserimento url salto pagina

Ecco un esempio funzionante:

Ora cliccando qui, sarai portato all’inizio del post 😉

Aggiungere salti di pagina con l’editor a blocchi

Salti di pagina con Gutenberg

Se usi l’editor a blocchi (Gutenberg) di WordPress, puoi aggiungere i salti di pagina in questo modo.

Per prima cosa, portati sul blocco che rappresenta il punto di destinazione del “salto”.

Selezionalo e vai nella sezione delle impostazioni del blocco.

Gli step sono esattamente quelli visti nel paragrafo precedente.

Per prima cosa, aggiungiamo l’ID.

Nell’area Avanzate, trovi la voce Ancora HTML. Qui dovrai inserire l’id del blocco, senza il simbolo cancelletto (#).

Crea poi il link e nel suo URL dovrai inserire semplicemente il cancelletto seguito dal nome dell’ID appena assegnato.

Aggiungere salti di pagina con l'editor a blocchi

Con l’editor a blocchi, quindi, è più semplice aggiungere un salto di pagina perché non dovrai utilizzare l’HTML puro.

Conclusione

Riassumendo, ciò che devi fare è modificare il tag HTML dell’elemento di destinazione aggiungendo un ID.

Quindi, inserire un link al testo con l’ID preceduto dal simbolo del cancelletto. 

Tutto qui! Come vedi, aggiungere salti di pagina ai contenuti su WordPress è molto semplice, ed anche utile.

Se hai domande, puoi come sempre lasciare un commento qui sotto al post. Ti risponderemo al più presto.

Guide correlate:

Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
52Commenti
Lascia un commento
  1. Immagine avatar per Mara D.
    Mara D.

    L’uomo prezioso ha vnto ancora! Ti adoro! 🙂

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      😀 grazie!

  2. Immagine avatar per Andrea
    Andrea

    Ciao ragazzi. Complimenti per l’ articolo, chiarissimo e dettagliato come sempre.
    Vi complico un po’ il quesito. Se volessi che il salto linkasse ad un altra pagina, e poi alla sezione specifica? Ho visto questa cosa in vari siti, sia che il link fosse una voce di menu, o un semplice link da un qualsiasi punto di una pagina.
    Come si puo’ fare in quel caso?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Andrea e grazie per i complimenti! Per saltare ad una sezione specifica di un’altra pagina dovrai aggiungere l’ID nel punto esatto della destinazione del link, mentre dovrai aggiungere il tuo link con il formato miosito.it/mio-articolo#mio_id. Dato che ci hai posto la questione, aggiungeremo a breve tutti i dettagli di questa procedura all’articolo.

  3. Immagine avatar per Massimo
    Massimo

    Ciao Andrea, ho acquistato Enfold per impaginare un sito per una agenzia di viaggi online. Ho creato un megamenu e vorrei che le sottovoci puntassero direttamente in punti precisi di altre pagine, si può fare?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Massimo, dovresti creare le ancore nelle pagine, come spiegato in questo articolo, assegnando un id al punto preciso della pagina. Nel menu, poi, dovrai inserire l’URL della pagina seguito dall’ancora, ad esempio miosito.it/mia-pagina/#mio-id. Restiamo a disposizione, un saluto!

  4. Immagine avatar per ilaria
    ilaria

    Grazie mille per i tuoi preziosi consigli sto pensando di fare un blog e mi sto documentando in merito. Grazie ancora

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Ilaria, grazie a te, continua a seguirci e buon lavoro!

  5. Immagine avatar per Sara
    Sara

    Ciao, sto provando ad utilizzare i salti di pagina seguendo le vostre istruzioni, ma sembra non stia funzionando.
    La stringa del testo in cui ho inserito il link interno è la seguente: Mare a Tortoreto Lido
    Mentre la stringa della porzione di testo a cui vorrei rimandare è la seguente:
    Tappa di mare a Tortoreto Lido

    E vorrei fare la stessa cosa ripetuta su più paragrafi: ho un elenco all’inizio del post, e per ciascuna voce vorrei rimandare al paragrafo di riferimento.

    Riuscite a farmi sapere come posso risolvere? Grazie mille in anticipo per il vostro supporto
    Sar

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Sara, hai inserito id=”tortoreto” al titolo del paragrafo verso quale vuoi rimandare? Che editor stai utilizzando (Classic Editor, Editor a blocchi, page builder…)?

    2. Immagine avatar per Sara
      Sara

      Ciao e grazie per la risposta.
      Sì ho inserito id=”tortoreto” al titolo del paragrafo verso cui vorrei fare il salto di pagina. Sto modificando con editor del codice

    3. Immagine avatar per SOS WP Team
      SOS WP Team

      Sembrerebbe tutto corretto, bisognerebbe dare un’occhiata dall’interno per capire cosa non sta funzionando. Contatta la nostra Assistenza WordPress e ti aiuteremo a capire dov’è il problema.

    4. Immagine avatar per Sara
      Sara

      Ok, grazie, ho fatto come suggerito.

  6. Immagine avatar per Sara
    Sara

    Ciao, grazie per la guida, vorrei applicare questi consigli all’interno di una pagina molto corposa, ma sembra non stia funzionando: quando provo a modificare il codice del sottotitolo, inserisco esattamente la stringa indicata da voi, ma quando torno in modalità visuale si modifica da sola in questo modo: id=”gransasso”>Parco Nazionale del Gran Sasso e Monti della Laga
    si aggiunge da solo il &gt, che impedisce il funzionamento del link. Come posso risolvere? Grazie mille per una vostra risposta

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Sara, assicurati di inserire l’id all’interno del tag. Ad esempio, <h2 id=”gransasso”>Parco Nazionale. Se non riesci a risolvere, scrivici tutta la stringa e vediamo dove si trova l’errore. A presto!

  7. Immagine avatar per virginia
    virginia

    Ciao, come posso fare per inserire la X per chiudere una schermata o mettere il TORNA INDIETRO?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Virginia, puoi spiegare meglio il tuo problema? Non è chiaro quale schermata intendi chiudere, dato che in questo articolo si parla di navigazione all’interno della stessa pagina. Se hai bisogno di un pulsante che permette di ritornare all’inizio della pagina, puoi verificare se è una funzionalità presente nel tuo tema, oppure usare il plugin WPFront Scroll Top. Restiamo a disposizione!

  8. Immagine avatar per lele
    lele

    Buongiorno, sono un graphic designer, sto creando il mio sito, usando elementor con wordpress, sotto la prima sezione vorrei mettere un icona freccetta che premendo scenda alla sezione successiva, mi dica dove sbaglio, nella freccetta metto CSS ID : #sezione, nella sezione sotto, nel CSS iD scrivo solo sezione, cosa sbaglio ? grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Lele, i link sulla stessa pagina sono costruiti con l’HTML e non con il CSS. La freccetta dovrebbe essere un link con href=”#sezione”, mentre la sezione (ad esempio, il div) deve avere un attributo id=”sezione”. Contatta la nostra Assistenza WordPress se non riesci a risolvere. Un saluto!

  9. Immagine avatar per Monteriano
    Monteriano

    Buongiorno, sto spostando un sito vecchio su wordpress. Ho una pagina che ha una immagine con una maps che contiene tanti link a seconda di dove viene puntato il mouse sull’immagine stessa. Come potrei mettere una mappa di link sull’immagine, per poi inserire anche l’id per fare “il salto” anche su wordpress? Vi ringrazio!

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao, ti consigliamo di testare questo plugin per creare una Google map dinamica, in cui impostare i link ai luoghi di interesse: https://wordpress.org/plugins/wp-google-maps/. Un saluto!

  10. Immagine avatar per Gianluca
    Gianluca

    Ciao, ottimo suggerimento, la soluzione proposta per aggiungere “salti di pagina” è molto semplice quanto interessante e, cosa da non sottovalutare, in questo modo si può evitare di installare un plugin per la table of contents.

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Grazie Gianluca, siamo felici di sapere che la guida ti è stata utile 🙂

  11. Immagine avatar per Giusy La Lumia
    Giusy La Lumia

    E se volessi creare un ancoraggio in un punto preciso di un’altra pagina?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Giusy, valgono le stesse istruzioni contenute nel post. Un saluto!

    2. Immagine avatar per davide
      davide

      Inserendo anche l’URL della pagina prima del cancelletto. Ciao!

  12. Immagine avatar per Valerio
    Valerio

    Ciao, è possibile creare ancore alla stessa pagina ma dal menu principale a mò di sito “One Page”? Come fare?
    Grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Certamente Valerio, è possibile. Puoi seguire le stesse indicazioni della guida per realizzarlo.

  13. Immagine avatar per cle
    cle

    perfetto, grazie!
    era tanto che volevo inserire degli indici nelle mie pagine più corpose e mi son sempre meravigliata che WP non avesse un “blocco” apposito.
    In realtà ho anche appena scoperto che tra gli attributi avanzati dei titoli nell’editor a blocchi c’era l’anchor ma senza il tuo tutorial non lo avrei comunque scoperto.
    Ecco come l’ho implementato nella mia pagina FAQ https://lericettedicle.com/trucchi-e-consigli/

  14. Immagine avatar per Mauro
    Mauro

    Buongiorno,
    sto completando ora il mio sito e cercando una risposta ho trovato questa guida, ma non corrisponde esattamente (credo) a ciò che sto cercando. Mi spiego: vorrei che un bottone con testo “clicca qui”, inserito in varie pagine del sito, reindirizzi ad uno specifico blocco in home page (non “alla home”). É possibile?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Mauro, in realtà non cambia molto. Quando vuoi collegarti a una “parte” di pagina, puoi sempre aggiungere un hashtag (#) e un ID per collegarti direttamente all’elemento stesso, mediante link.

    2. Immagine avatar per Mauro
      Mauro

      Scusate, non avevo visto la risposta. Ho provato, ma non funziona. Nel vostro esempio si torna in cima alla pagina, io devo indirizzare ad un’altra pagina, in un blocco specifico. Cosa sbaglio?

    3. Immagine avatar per SOS WP Team
      SOS WP Team

      Hai inserito correttamente l’ID? controlla anche di avere eseguito i passaggi, secondo questa guida che parla proprio di due pagine differenti: http://learningcms.com/link-wordpress-page-to-another-page-specific-location/

    4. Immagine avatar per Mauro
      Mauro

      In teoria sì, ora provo seguendo la guida, anche se sto usando Elementor e quindi non so se è la stessa cosa.

  15. Immagine avatar per VALE
    VALE

    Ciao, il mio problema con il salto è mi sa insolito. Fino ad ora l’ho effettuato in più pagine correttamente. E’ da ieri che sto cercando di farlo in una pagina, e fin’ora soltanto un titolo lo vede valido. Questo è il link: https://stiledivitanaturale.altervista.org/integratori-contenenti-inositolo/. Ciao buona giornata

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao, hai pulito la cache del browser?

    2. Immagine avatar per vale
      vale

      ciao, si ho provato proprio adesso, non ho avuto la notifica del tuo commento, ancora ho questo problema. Ho pulito la cache di chrome

  16. Immagine avatar per Daniele
    Daniele

    Aggiungo un dettaglio: mentre su pc mi salta in automatico un paio di righe (nascoste sempre dal menu del sito); su smartphone, in modalità mobile funziona, mentre in modalità desktop funziona fino a quando non si toglie totalmente lo zoom (in pratica, rimpicciolito al massimo, dà lo stesso problema, altrimenti va per come dovrebbe andare).

    Grazie per l’eventuale aiuto.

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Daniele, puoi darci un link per visualizzare il problema? Un saluto!

  17. Immagine avatar per Leonardo
    Leonardo

    Grazie per la lineare e semplice spiegazione.
    Ti volevo chiedere però se questo link valesse anche tra due differenti pagine dello stesso sito. Mi spiego meglio: in caso di una pagina particolarmente lunga ho suddiviso il contenuto in quattro pagine grazie al blocco “interruzione di pagina”. Ho provato a collegare le pagine seguenti ad un indice posto nella prima pagina (un table of contents), ma ciò non sortisce “il salto” sperato. Ho sbagliato qualcosa io oppure queste “ancore” funzionano soltanto all’interno di una sola pagina senza interruzioni?
    Grazie in anticipo

  18. Immagine avatar per Tiziano
    Tiziano

    Perfetto grazie, ha funzionato benissimo.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ottimo Tiziano!

  19. Immagine avatar per SIMONE
    SIMONE

    Ciao Chiara, ho seguito alla lettera le tue istruzioni, ma col mio tema Awaken non riesco a farle funzionare. Quando cerco di inserire il # con il nome dell’ancora, non trova la destinazione.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Quindi, la pagina non scrolla? Che comportamento ha?

    2. Immagine avatar per SIMONE
      SIMONE

      Ciao! Quando digito il nome dell’ancora (ad esempio: #esempio) nel box che si apre cliccando su “inserisci link”, non trova la destinazione. Il testo viene visualizzato come link, cioè blu e sottolineato, ma di fatto non funziona.

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Fai un altro test, usando un plugin specifico come il seguente per inserire l’ancora nel contenuto.

  20. Immagine avatar per Massimiliano
    Massimiliano

    Ciao Chiara, utilizzo da molto le ancore, ma una cosa che mi sono sempre chiesto è:
    ho una navbar fissa sul top della pagina, e quando clicco sull’ancora il titolo rimane sempre nascosto,.. come posso ovviare a questo?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Massimiliano, che tema stai utilizzando?

    2. Immagine avatar per Massimiliano
      Massimiliano

      Un tema custom… è un problema?

    3. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      No, solo che dovremmo vedere direttamente il sito per capire meglio l’origine di questo comportamento.

    4. Immagine avatar per Daniele
      Daniele

      Ciao, anche io ho il problema del ‘titolo nascosto’ per ogni paragrafo cliccato.

      Uso colormag come tema wordpress, ma il problema è lo stesso.

      Come posso ovviare a quest’ultimo?

  21. Immagine avatar per Andrea Di Rocco
    Andrea Di Rocco

    Ciao Leonardo, serve in questo caso agire via codice, come mostrato in questo topic. Vedremo di parlarne in questa stessa guida, o una nuova, al più presto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *