Indirizza i visitatori a una sezione specifica di una pagina.

Un link di ancoraggio (link interno alla pagina) è un URL speciale che consente di spostarsi in una sezione specifica di una pagina. Ad esempio, il sommario di questa guida contiene dei link di ancoraggio che portano a ciascuna intestazione.

Nei siti versione 7.0 è possibile creare link di ancoraggio aggiungendo blocchi codice alle aree contenuto.

Questa guida spiega come creare manualmente link di ancoraggio su qualsiasi sito versione 7.0 . Alcuni modelli della versione 7.0 dispongono anche di link di ancoraggio della pagina Indice incorporati. Per aggiungere link di ancoraggio nella versione 7.1, visita la pagina Creazione di link di ancoraggio.

Guarda un video

Questo video descrive l'aggiunta manuale dei link di ancoraggio nella versione 7.1, ma i passaggi sono uguali anche nella versione 7.0.

Step 1 - Aggiungi un Blocco codice

Nell'editor di pagine, scorri fino al punto in cui desideri che il link conduca e aggiungi un blocco codice. Puoi aggiungerlo a qualsiasi area contenuto del blocco, ma non alle pagine di raccolta, come blog o gallerie, in cui non è possibile aggiungere blocchi.

Nel campo Codice, aggiungi:

Questa è la destinazione del link

All'interno del primo tag, sostituisci unique-ID (ID univoco) tra virgolette con un ID univoco specifico per il tuo link:

• Il testo per il tuo ID univoco può essere di qualsiasi tipo, ma non può contenere spazi. Le parole devono essere separate con un trattino.
• Gli ID univoci seguono la distinzione maiuscole/minuscole e possono essere utilizzati una sola volta per pagina. Consulta i nostri suggerimenti sulle procedure consigliate per maggiori informazioni.

Sostituisci Questa è la destinazione del link con il testo che vuoi far apparire sul tuo sito. Assicurati che l'opzione Visualizza codice sorgente sia disattivata o il link di ancoraggio non funzionerà.

Step 2 - Crea il link

Aggiungi il link su cui i visitatori cliccheranno per accedere al contenuto che hai creato allo Step 1. Puoi utilizzare qualsiasi tipo di link, ma in questo esempio viene utilizzato un link di testo:

1. In un Blocco di testo, digita il testo da collegare, evidenzialo e clicca sull'icona Link nella barra degli strumenti blocco di testo.
2. In URL, aggiungi l'URL completo della pagina (anche se è la stessa pagina) e una barra inversa aggiuntiva. Dovrebbe apparire così:

   https://examplesite.com/pageslug/

3. Dopo lo slug della pagina, inserisci un hashtag (#) seguito dall'ID univoco dello step 1. Dovrebbe apparire così:

   https://examplesite.com/pageslug/#unique-id

4. Se desideri che il link si apra in una nuova scheda, attiva l'opzione Apri link in una nuova scheda.
5. Premi Invio.

Per alcuni link di ancoraggio, includere l'indirizzo completo del sito web è facoltativo, ma è consigliato per la maggior parte dei link.

Suggerimento: Se stai aggiungendo dei link di ancoraggio alla tua homepage, non devi includere lo slug della pagina. Se cambi la tua homepage, aggiungi lo slug a tutti i link di ancoraggio che hai creato sulla vecchia homepage, altrimenti non funzioneranno correttamente.

Step 3 - Salva e pubblica

Clicca su Salva per pubblicare le modifiche. Da adesso, il link creato nello step 2 porterà i visitatori al testo definito nello step 1.

Utilizzare diversi tipi di link

Nell'esempio precedente viene utilizzato il corpo del testo per il link di ancoraggio illustrato nello step 2, ma puoi utilizzare qualsiasi tipo di link, inclusi pulsanti e collegamenti a immagini. Consulta Aggiungere link al tuo sito per conoscere le diverse opzioni relative ai link.

Per tutti i tipi di link, aggiungi l'URL e l'ID univoco come mostrato nello step 2 qui sopra, utilizzando questo formato:

https://examplesite.com/pageslug/#unique-id

Formattare il testo di destinazione

Per formattare il testo di destinazione in modo diverso dal corpo del testo, cambia i tag

e

nello step 1. Se non hai familiarità con il linguaggio HTML, prova a utilizzare i tag di intestazione 1:

Quando utilizzi tag diversi, aggiungi l'ID univoco al codice seguendo la procedura dello Step 1:

Questa è la destinazione del link

Link a uno spazio vuoto

Il link di ancoraggio funziona anche senza testo visibile. Se non vuoi che appaia del testo nel tuo punto di destinazione, formatta il testo di destinazione senza nulla tra i tag:

Slug di pagina e ancore

nella maggior parte dei casi, è consigliabile aggiungere lo slug di pagina e l'URL completo prima dell'ID univoco. Se un link di ancoraggio non dispone di uno slug di pagina, non funzionerà:

• Se il link è un link di navigazione
• Se stai aggiungendo un link a un'altra pagina

I link di ancoraggio senza l'URL del sito potrebbero avere problemi anche nel browser mobile Safari. Per trovare l'URL della tua pagina, visita Slug URL.

Se sai che nessuno dei tuoi visitatori utilizza il browser mobile Safari e stai creando un link a un punto della stessa pagina (ad esempio, uno scorrimento verso il basso fino all'intestazione inferiore), puoi utilizzare #unique-id nel link creato nello step 2 senza lo slug della pagina o l'URL, in questo modo:

#unique-id

Suggerimento: per controllare il tipo di browser utilizzato dai visitatori, vai al pannello Analisi del traffico.

Link all'inizio o alla fine di una pagina

Per passare alla parte superiore o inferiore della pagina, inserisci un link all'intestazione o al piè di pagina utilizzando Iniezione di codice. L'iniezione di codice è una funzionalità Premium.

Link alla parte superiore

Un link all'inizio di una pagina è utile se il contenuto è molto lungo e vuoi dare ai visitatori un modo semplice per tornare alla navigazione. Per creare un link all'inizio di una pagina:

1. Aggiungi del testo e un link di ancoraggio nella parte inferiore della pagina o nel piè di pagina come descritto nello step 2, ma non includere l'URL del tuo sito o una barra inversa (/) prima dell'ID univoco. Puoi utilizzare il testo Torna all'inizio e l'ID univoco #top.
2. Apri il pannello Iniezione di codice.
3. Nel campo Intestazione, aggiungi questo codice: . Se hai utilizzato un ID univoco diverso da #top durante la configurazione del link, assicurati di sostituirlo nel primo tag .
4. Clicca su Save (Salva).

Questo metodo crea dei link alla parte superiore di ogni pagina del sito. Puoi utilizzare la stessa procedura per creare link alla parte superiore di una singola pagina aggiungendo invece il codice alle impostazioni avanzate della pagina.

Link alla fine di una pagina

Un link alla fine della pagina è utile se vuoi che i visitatori trovino informazioni o interagiscano con un elemento presente nel piè di pagina, come ad esempio un blocco newsletter.

Per creare un link alla parte finale di una pagina:

1. Aggiungi del testo e un link di ancoraggio nella pagina, come descritto nello step 2, ma non includere l'URL del tuo sito o una barra inversa (/) prima dell'ID univoco. Puoi utilizzare il testo Vai al piè di pagina e l'ID univoco #bottom.
2. Apri il pannello Iniezione di codice.
3. Nel campo Piè di pagina, aggiungi questo codice: . Se hai utilizzato un ID univoco diverso da #bottom durante la configurazione del link, assicurati di sostituirlo nel primo tag .
4. Clicca su Save (Salva).

Questo metodo crea un link al piè di pagina in ogni pagina del tuo sito.

Restrizioni e procedure consigliate

I link di ancoraggio possono essere un potente strumento per i visitatori, ma è utile tenere a mente alcune cose.

Un ID può essere utilizzato solo una volta su ciascuna pagina

Ad esempio, dopo aver utilizzato il'ID panda sulla tua homepage, non potrai aggiungere nuovamente panda come ID sulla tua homepage. Potresti utilizzarlo su un'altra pagina, ma non una seconda volta sulla tua homepage.

Gli ID distinguono maiuscole e minuscole

Se il tuo codice HTML indica id ="Panda", ma il tuo link elenca l'ID come #panda, il tuo link non funzionerà correttamente.

L'ID diventa parte dell'URL dopo aver cliccato il link di ancoraggio

Quando un visitatore clicca su un link di ancoraggio, l'ID univoco viene visualizzato alla fine dell'URL del sito. Assicurati che il tuo ID univoco sia visibile ai visitatori.

Puoi utilizzare qualsiasi testo come ID univoco

Creare un ID facile da ricordare può semplificare la configurazione e aiutarti a risolvere eventuali problemi. Questi ID molto spesso hanno un senso logico, ad esempio l'utilizzo di #top (su) per un link “Torna su”.

I link di ancoraggio possono anche contribuire ad aggiungere un tocco di stile e di personalità al tuo sito. Tieni presente che l'ID alla fine dell'URL verrà visualizzato nella barra degli indirizzi del browser dai visitatori.

Il testo di destinazione a cui ti colleghi si visualizzerà in alto nel browser

Il testo di destinazione viene visualizzato sulla parte superiore del browser o il più possibile in alto se non è presente molto contenuto nella parte sottostante.

Se preferisci che il testo non venga visualizzato nell'estremità superiore della finestra del browser, puoi creare spazio prima di questa parte della pagina aggiungendo tag

con spazi unificatori alla copia del testo di destinazione. Nel linguaggio HTML, uno spazio unificatore è  

Ogni set di tag

 

che aggiungi prima che il testo aggiunga un'ulteriore interruzione di riga. Ad esempio, se vuoi due interruzioni di riga prima del testo di destinazione dell'intestazione 3, il blocco di codice utilizzerà il seguente codice:

 
 
Qui è il punto in cui il link salterà a

Mantieni aggiornati i link

Se modifichi il tuo dominio principale o aggiorni lo slug di pagina in futuro, aggiorna anche i tuoi link di ancoraggio. I link di ancoraggio non funzioneranno correttamente se utilizzano URL obsoleti.

Risoluzione dei problemi

Il link di ancoraggio non funziona

Se un link di ancoraggio non funziona, verifica che:

• L'URL sia stato aggiunto come descritto nello step 2, inclusi lo slug della pagina e due simboli /. Questo passaggio è particolarmente importante per i link di navigazione e i link da altre pagine.
• L'ID univoco sia esattamente lo stesso nel tuo link e nel testo di destinazione. Se sono presenti differenze ortografiche o nell'uso delle maiuscole, il link non funzionerà.
• Il codice HTML del testo di destinazione sia impostato correttamente. Ad esempio, se l'ID univoco è #bamboo, il link che aggiungerai al testo di destinazione in HTML sarà id="bamboo"
• Le virgolette nel codice HTML del testo di destinazione sono virgolette "dritte", come negli esempi di questa guida. Le virgolette "curve" o "inglesi" non funzioneranno nel blocco codice. Il blocco codice usa come impostazione predefinita le virgolette "dritte", ma potrebbero esserci quelle "curve" se hai copiato e incollato il codice nel blocco.
• Sia stato aggiunto www. all'inizio dell'URL, se incluso nel tuo dominio principale.
• Tu lo stia testando mentre sei disconnesso o in un browser in incognito. Cliccare su un link di ancoraggio dopo aver effettuato l'accesso può funzionare in alcuni casi, ma non è un test affidabile per ciò che i visitatori sperimenteranno.

Anche se tutto è impostato correttamente, il link di ancoraggio non funzionerà se:

• Utilizza il dominio integrato nel sito e lo verifichi mentre sei collegato. Provalo, invece, in un browser con navigazione in incognito attivata.
• Il tuo sito è impostato su privato e verifichi il link di ancoraggio dopo aver effettuato l'accesso. Imposta invece una password del sito e prova in un browser con navigazione in incognito attivata.
• La pagina utilizza già questo ID. Prova a utilizzarne uno diverso o a convertire le lettere in maiuscole o viceversa.

Ajax e ancore

Ajax è uno speciale metodo per il caricamento del sito che rende le pagine ricche di contenuti molto più veloci. Tuttavia, può interferire con i link di ancoraggio, specialmente sui dispositivi mobili.

Se i precedenti step per la risoluzione dei problemi non funzionano e il tuo modello supporta Ajax, disattivalo temporaneamente in Stili sito per verificare se è la causa del problema. Ajax è disponibile nelle seguenti famiglie di modelli:

• Brine
• Farro
• Tremont
• York

Nota: le personalizzazioni basate su codice non rientrano nell'ambito del nostro supporto. Ciò significa che non possiamo fornire ulteriore assistenza in relazione alla configurazione o alla risoluzione dei problemi. Inoltre, non possiamo garantire la funzionalità o la completa compatibilità del codice inserito con Squarespace. Ciò include il modo in cui funziona con il nostro design reattivo, soprattutto relativamente all'aspetto sui dispositivi mobili e al funzionamento su tutti i modelli. Il codice personalizzato potrebbe causare problemi di visualizzazione con i futuri aggiornamenti della nostra piattaforma. Pur non potendo offrire ulteriore assistenza, esistono diverse risorse per indicarti la giusta direzione da seguire:

• Scopri le procedure consigliate per aggiungere codice personalizzato.
• Leggi la nostra guida generale sulle personalizzazioni di terze parti.
• Visita il nostro Forum Squarespace dedicato a clienti e sviluppatori.
• Affidati a uno Squarespace Expert per creare un codice personalizzato per il tuo sito.

Link di ancoraggio su dispositivi mobili

Il comportamento dei link di ancoraggio sui dispositivi mobili può variare a seconda del dispositivo e del browser utilizzati. Ad esempio, se il tuo link di ancoraggio include l'URL completo, come consigliamo, il browser potrebbe ricaricare la pagina dall'inizio, invece di posizionarsi immediatamente sulla sezione desiderata.

Se preferisci un comportamento diverso dei link di ancoraggio sui dispositivi mobili, puoi provare formati alternativi, come /pageslug #unique-id o #unique-id, ma tieni presente che questi formati potrebbero non funzionare per alcune configurazioni o in alcuni browser per dispositivi mobili, come Safari.

Per maggiori informazioni, consulta Slug di pagina e ancore.

Link di ancoraggio della Pagina Indice

Le Pagine Indice impilate offrono un modo alternativo per aggiungere link di ancoraggio che non richiede codice. Per maggiori informazioni, visita Aggiunta di link di ancoraggio nella Pagina Indice.