Ancore. Come creare collegamenti a punti specifici di una pagina?

Compatibilità:

WebSite X5 Evo e Pro

Quando una Pagina contiene molti contenuti, può essere utile permettere ai visitatori di raggiungere immediatamente un punto preciso senza dover scorrere tutto ciò che viene prima. È il caso, per esempio, di un sommario che porta ai diversi argomenti di una Pagina o di un elenco di domande che rimanda direttamente alle relative risposte.

In WebSite X5 puoi ottenere questo risultato attraverso le Ancore, creando collegamenti che portano direttamente a uno specifico contenuto della stessa Pagina o di un’altra Pagina del Sito.

Cos'è un’Ancora

Un’Ancora è un riferimento associato a un Oggetto che permette di identificarne la posizione all’interno della Pagina.

Una volta creata l’Ancora, puoi utilizzarla come destinazione di un collegamento. Quando il visitatore clicca sul link, la Pagina scorre fino al contenuto associato all’Ancora.

Puoi inserire tutte le Ancore che ti servono. Per gestirle più facilmente:

• crea un’Ancora solo per i contenuti che devono essere raggiunti direttamente;
• utilizza nomi univoci e significativi;
• evita spazi e caratteri speciali nei nomi.

Come creare un’Ancora

Per assegnare un’Ancora a un contenuto:

• Vai al Passo 4 - Pagine e apri la Pagina su cui vuoi lavorare.
• Nella Griglia di impaginazione seleziona l’Oggetto che deve diventare la destinazione del collegamento.
• Clicca sul pulsante Ancora.
• Nella finestra richiamata assegna un nome all’Ancora.
• Conferma.

Ripeti la procedura per tutti gli Oggetti che vuoi poter raggiungere direttamente attraverso un collegamento.

Come creare un collegamento a un’Ancora

Dopo aver creato l’Ancora, puoi impostare il collegamento che deve portare a quel punto della Pagina.

La procedura può partire, per esempio, da una parola o da una frase inserita in un Oggetto Testo:

• Apri l’Oggetto Testo nell’editor.
• Seleziona il testo sul quale vuoi inserire il link.
• Clicca sul pulsante Collegamento.
• Nella finestra Collegamento, scegli l’azione Pagina del Sito.
• Seleziona la Pagina che contiene l’Ancora. Può essere la Pagina corrente oppure un’altra Pagina del Sito.
• Nel campo Ancora interna alla Pagina, seleziona l’Ancora che vuoi raggiungere.
• Conferma.

Quando il visitatore cliccherà sul collegamento, verrà portato direttamente al contenuto identificato dall’Ancora.

Esempio: come creare un sommario di pagina

Le Ancore sono particolarmente utili nelle Pagine lunghe, dove puoi inserire all’inizio un sommario che permette ai visitatori di raggiungere direttamente i diversi argomenti.

Immagina, per esempio, una Pagina dedicata a un servizio e organizzata in Presentazione, Caratteristiche, Prezzi e Contatti.

Per creare un sommario:

• Inserisci all’inizio della Pagina un Oggetto Testo con l’elenco degli argomenti.
• Organizza più in basso i contenuti relativi a ciascun argomento.
• Assegna un’Ancora all’Oggetto che identifica l’inizio di ogni argomento, utilizzando nomi diversi e riconoscibili, per esempio 'presentazione', 'caratteristiche', 'prezzi' e 'contatti'.
• Apri l’Oggetto Testo con il sommario.
• Seleziona la prima voce e crea un collegamento verso l’Ancora corrispondente.
• Ripeti l’operazione per tutte le altre voci.

In questo modo il visitatore può utilizzare il sommario per raggiungere immediatamente il contenuto che gli interessa.

Come aggiungere un link "Torna all'inizio"

Puoi facilitare ulteriormente la navigazione aggiungendo alla fine dei diversi argomenti un collegamento che riporta al sommario:

• Assegna un’Ancora anche all’Oggetto Testo che contiene il sommario iniziale.
• Alla fine di un argomento inserisci una voce come 'Torna all’inizio'.
• Seleziona la voce e crea un collegamento verso l’Ancora del sommario.
• Ripeti l’operazione negli altri punti in cui vuoi offrire la possibilità di tornare rapidamente all’inizio.

Al posto del testo puoi utilizzare anche un pulsante o un’immagine: il procedimento per impostare il collegamento all’Ancora non cambia.

Come funzionano le Ancore con le Sezioni

Se hai organizzato la Pagina in più Sezioni, WebSite X5 tiene conto anche della posizione dell’Oggetto a cui hai assegnato l’Ancora.

Quando, nella Visualizzazione corrente, l’Oggetto si trova nella prima Riga di una Sezione, il collegamento porta all’inizio della Sezione stessa, comprendendo anche l’eventuale margine superiore.

Se invece l’Oggetto si trova in una Riga successiva, il collegamento porta direttamente alla posizione dell’Oggetto.

Questo permette di utilizzare le Ancore sia per raggiungere un contenuto preciso sia per richiamare correttamente l’inizio di un’intera Sezione.

#tip - Per maggiori informazioni, vedi Sezioni di pagina. Come creare layout con strutture diverse?

Come usare le Ancore nelle Pagine Full Height

Nelle Pagine Full Height le Sezioni vengono utilizzate come schede che occupano almeno l’altezza della finestra del Browser.

#tip - Per maggiori informazioni vedi Full Height. Come creare uno scorrimento a schede della pagina?

Se vuoi creare un collegamento diretto a una di queste schede:

• assegna l’Ancora a un Oggetto inserito nella prima Riga della Sezione;
• crea normalmente il collegamento verso questa Ancora.

In questo modo, WebSite X5 fa coincidere il punto di arrivo del collegamento con l’inizio della Sezione e mantiene correttamente l’effetto di navigazione Full Height.

#tip - Sito Responsive. Se l’Oggetto a cui hai assegnato un’Ancora viene nascosto in una Visualizzazione responsive, il collegamento rimane attivo e porta all’inizio della Sezione a cui appartiene l’Oggetto.

Come creare un’Ancora all’interno di un testo tramite codice

Normalmente un’Ancora viene associata all’inizio di un Oggetto. Se però vuoi raggiungere un punto preciso all’interno di un lungo Oggetto Testo, per esempio uno specifico paragrafo, puoi:

• dividere il contenuto in due Oggetti Testo e assegnare l’Ancora al secondo;
• inserire manualmente un identificatore all’interno del codice HTML del testo.

La prima soluzione è generalmente la più semplice. Se invece vuoi intervenire sul codice:

• Apri l'Oggetto Testo nell'editor.
• Attiva il riconoscimento del codice HTML cliccando sul pulsante .
• Posiziona il cursore nel punto che vuoi rendere raggiungibile.
• Inserisci, per esempio: 

<span id="nome_ancora"></span>

Sostituisci "nome_ancora" con il nome che vuoi utilizzare per l’Ancora. L’identificatore deve essere univoco all’interno della Pagina e non deve contenere spazi.

Le Ancore inserite manualmente nel codice non vengono riportate nell’elenco disponibile nel campo Ancora interna alla Pagina della finestra Collegamento.

Per creare un link verso una di queste Ancore:

• Apri la finestra Collegamento.
• Seleziona l’azione File o URL.
• Nel campo File su Internet inserisci:

#nome_ancora

Sostituisci "nome_ancora" con l’identificatore che hai definito nel codice.

Suggerimenti pratici

Per utilizzare le Ancore in modo efficace:

• scegli nomi brevi e riconoscibili;
• evita di creare Ancore che non vengono effettivamente utilizzate;
• nelle Pagine lunghe, valuta un sommario per permettere di raggiungere rapidamente i contenuti principali;
• se vuoi richiamare l’inizio di una Sezione, assegna l’Ancora a un Oggetto della sua prima Riga;
• nelle Pagine Full Height, utilizza un Oggetto della prima Riga della Sezione che vuoi richiamare;
• verifica sempre i collegamenti in Anteprima, anche nelle diverse Visualizzazioni responsive.