Compatibilità:

WebSite X5 Evo e Pro

A volte può essere utile impostare dei collegamenti che, facendo scorrere la Pagina corrente o aprendo una nuova Pagina, portano immediatamente in primo piano un particolare contenuto. Questi sono tutti collegamenti ad Ancore. 


Cos'è un’ancora

L'Ancora è semplicemente un riferimento che serve per identificare una posizione all'interno della Pagina: come anticipato, viene utilizzata per impostare collegamenti diretti a un punto specifico di una Pagina partendo da un qualsiasi altro punto del Sito.


In WebSite X5 puoi assegnare un'Ancora sia a singoli Oggetti che a Righe intere. Non ci sono limiti al numero di Ancore inseribili in una Pagina: in linea teorica, puoi associare un'Ancora a ognuno degli Oggetti e/o a ognuna delle Righe presenti. Per lavorare più agevolmente, però, ti consigliamo di:

  • assegnare un'Ancora ad un Oggetto o ad una Riga solo se è necessario;
  • dare alle Ancore dei nomi significativi per riuscire a identificarle più facilmente.


Creare un sommario di pagina attraverso le Ancore

Vediamo attraverso un esempio pratico come si lavora con le Ancore.


Ipotizziamo di voler creare una pagina con delle FAQ. Prevediamo un sommario iniziale dove riportiamo solo l'elenco delle domande. Facciamo poi in modo che cliccando su ciascuna domanda i nostri utenti possano saltare più in basso nella pagina, al punto esatto dov'è riportata la risposta.


 

Puoi decidere di inserire le Ancore sugli Oggetti o sulle Righe: in questo caso, il risultato finale non cambia. Distinguiamo le  2 alternative:


Alternativa 1 - Ancore sugli Oggetti

  • Al Passo 4 - Pagine crea la Pagina inserendo gli Oggetti necessari per presentare tutti i contenuti: prevedi un Oggetto Testo iniziale per il sommario (Riga 1) e un Oggetto Testo per ogni risposta da collegare alle diversi voci del sommario (Righe 2, 3 e 4).
  • Sulla Griglia di impaginazione, seleziona l'Oggetto Testo relativo alla risposta alla prima FAQ (nella Riga 2) e clicca sul pulsante  in modo da assegnargli un'Ancora.
  • Dai un nome all'Ancora attraverso la finestra richiamata: per esempio, "Question_1". Ricorda che nel nome non puoi usare spazi né alcuni caratteri speciali.
  • Procedi allo stesso modo per assegnare un'Ancora a tutti gli Oggetti Testo relativi alle risposte.

Alternativa 2 - Ancore sulle Righe

  • Dopo aver inserito gli Oggetti nella Griglia di impaginazione, clicca sul pulsante in modo da accedere alla finestra Stile delle Righe.
  • Seleziona la Riga dov'è posizionato l'Oggetto Testo relativo alla risposta alla prima FAQ (Riga 2) e clicca sul pulsante  in modo da assegnarle un'Ancora.
  • Dai un nome all'Ancora attraverso la finestra richiamata: per esempio, "FAQ_1".
  • Allo stesso modo, assegna un'Ancora anche alle altre Righe con le risposte da richiamare (Righe 3 e 4), avendo sempre cura di dare nomi diversi e significativi.


#tip - In una stessa pagina puoi inserire delle Ancore sia sugli Oggetti che sulle Righe: l'importante è che abbiano nomi diversi. 


Inserimento dei link

Ora che, seguendo una delle due strade appena viste, hai inserito le Ancore, puoi occuparti di impostare i link:

  • Fai doppio click sull'Oggetto Testo relativo al sommario iniziale (nella Riga 1) in modo da aprirlo nell'editor.  
  • Seleziona la prima voce del sommario e clicca sul pulsante in modo da richiamare la finestra Collegamento.
  • Scegli l'azione Pagina del Sito, clicca sul pulsante  per visualizzare la Mappa e seleziona la Pagina stessa sulla quale stai lavorando.
  • Clicca sul campo Ancora interna alla Pagina in modo da visualizzare quelle disponibili e seleziona l'Ancora che identifica la risposta relativa alla voce del sommario che stai creando (quello presente nella Riga 2).
  • Ripeti gli ultimi passaggi in modo da creare un collegamento su tutte le voci del sommario.


Creazione del link "Torna all'inizio"

Puoi perfezionare la navigazione inserendo al termine di ogni risposta un link per tornare velocemente al sommario all'inizio della Pagina:

  • Tramite il pulsante  assegna un'Ancora anche all'Oggetto Testo relativo al sommario iniziale o alla Riga 1 che lo contiene.
  • Apri nell'editor l'Oggetto Testo relativo alla prima risposta (nella Riga 2) e aggiungi al fondo una scritta come: "Torna all'inizio".
  • Seleziona la voce "Torna all'inizio" e clicca sul pulsante in modo da impostare un collegamento con la Pagina, avendo cura di specificare l'Ancora associata al sommario.
  • Ripeti l'operazione in modo da inserire la voce attiva "Torna all'inizio" al termine di tutte le risposte (nelle Righe 3 e 4).


Al posto della voce "Torna all'inizio" puoi prevedere un pulsante grafico: puoi crearlo o inserendo un'immagine direttamente all'interno dell'Oggetto Testo o utilizzando un Oggetto Immagine (con il vantaggio di poter sfruttare gli effetti di mouseover): in qualsiasi caso la procedura per la creazione del collegamento non cambia.


Le Ancore nelle Pagine Full Height

Mentre nell'esempio fatto inserire le Ancore sugli Oggetti piuttosto che sulle Righe non comporta alcuna differenza, c'è un caso specifico in cui il risultato cambia: è il caso delle Pagine in cui viene utilizzata la proprietà Full Height per ottenere lo scorrimento a schede.


Utilizzando la proprietà Full Height puoi fare in modo che tutte le Righe di una Pagina assumano automaticamente un'altezza pari alla viewport, ovvero alla finestra del browser del visitatore del tuo sito, indipendentemente dall'altezza del loro contenuto. In questo modo lo scroll della Pagina porterà alla visualizzazione di una Riga per volta, come se ogni Riga fosse un blocco o una scheda a se stante.

Utilizzando il Ful Height, dunque, l'altezza delle Righe non è più fissa ma diventa variabile. Se la viewport è ridotta, i contenuti presenti nella Riga ne determinano l'altezza minima. Al contrario, se la viewport è molto ampia, i contenuti verranno visualizzati allineati al centro. 


Per mantenere l'effetto di navigazione a schede, se devi impostare delle Ancore nelle Pagine in cui è attivo il Full Height devi farlo inserendole sulle Righe: solo in questo modo, infatti, i contenuti richiamati su collegamento continueranno ad essere visualizzati al centro della viewport del browser.     


#tip - Per maggiori informazioni su cos'è e come si realizza una Pagina Full Height, vedi Come si utilizza la proprietà Full Height per creare uno scorrimento a schede della pagina?

   

Creare e collegare un’Ancora via codice

Se hai l'esigenza di posizionare un'Ancora non all'inizio di un Oggetto ma al suo interno, per esempio in corrispondenza di un certo paragrafo di un Oggetto Testo, puoi agire in due modi diversi:

  1. Puoi dividere l'Oggetto Testo originario, in due diversi Oggetti Testo in modo da poter associare un'Ancora al secondo.
  2. Puoi creare manualmente un'Ancora all'interno dell'Oggetto Testo.


Per creare un’Ancora via codice devi procedere in questo modo:

  • Apri l'Oggetto Testo nell'editor e clicca sul pulsante  in modo da attivare il riconoscimento del codice HTML.
  • Posiziona il cursore nel punto in cui vuoi inserire l'Ancora e digita: 
<A NAME="nome_ancora">&nbsp; </A>

Ovviamente al posto di "nome_ancora" devi scrivere il nome che vuoi realmente dare all'Ancora. Nell'esempio "&nbsp;" identifica uno spazio vuoto introdotto con lo scopo di fornire un contenuto per il tag.


Quando imposti il collegamento che punta a un'Ancora, ricorda che le Ancore create manualmente non vengono riprese nell'elenco proposto dall'opzione Ancora interna alla Pagina della finestra Collegamento. Per questo motivo, per impostare un link a un’Ancora creata via codice devi:

  • Nella finestra Collegamento selezionare l'azione File o URL.
  • Nel campo File su Internet digitare: 
#nome_ancora

Ovviamente al posto di "nome_ancora" devi scrivere il nome dato all'Ancora.