A volte, soprattutto quando un articolo è molto lungo, sarebbe corretto inserire all’inizio dei contenuti una sorta di indice.

Un elenco puntato di sezioni a cui si applicano dei link che portano con lo scroll automatico ad una determinata sezione del contenuto.

Ora con Gutenberg è ancora più semplice gestire questo tipo di interventi sul codice HTML.

Essendo la pagina composta da singoli blocchi, accedere alla modalità HTML solo per quel elemento risulta più facile. Invece prima la modalità HTML era per tutto il contenuto, dovendo così andare alla ricerca del punto specifico della pagina su cui ci interessava intervenire.

Per inserire link che portano alla stessa pagina, ma ad una sezione differente bisogna fare due cose:

  • Creare un link HTML tramite il tag <a>.
  • Modificare il codice HTML di una titolazione assegnandogli un ID univoco.

Partiamo dalla prima ed eseguiamo la procedura per inserire un normale link. La differenza? Nella URL.

Come vedi non abbiamo la solita URL come può essere https://webipedia.it/blog/ ma semplicemente #titolo01, dove l’asterisco indica che l’attributo è un id e “titolo01” il valore di tale attributo.

Non essendoci il protocollo, gli slash ed il resto, il link punterà alla pagina stessa, per la precisione all’elemento HTML con ID titolo01

Per assegnare un ID HTML ad un elemento, come in questo esempio faremo per una titolazione, basta attivare l’elemento, accedere al menu e poi selezionare Modifica come HTML.

Ora potrai modificare il tag HTML del titolo aggiungendo un attributo id=”…”

<h2 id="#titolo02">Sotto titolo 02</a>

Per tornare a modificare il blocco in formato visivo premi il Menu > Modifica visuale

Link a una sezione di una pagina diversa

Puoi anche creare un link da un’altra pagina che punta a una sezione specifica di un contenuto.

Il link in questo caso ha il formato https://tuosito.it/blog/#titolo02

Come vedi l’ID #titolo02 è stato aggiunta alla fine della URL della pagina.

Ovviamente quella pagina all’interno del suo HTML deve avere un elemento con id impostato a titolo02.

Ora se hai delle pagine con tanti testi sai come rendere un servizio migliore creando degli indici personalizzati che puntano alle diverse sezioni dei tuoi contenuti.

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

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