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.

Questa guida descrive come aggiungere dei link di ancoraggio a qualsiasi sezione del tuo sito con un Blocco Codice.

Guarda un video

Step 1 - Aggiungi un Blocco codice

Nell'editor della pagina, scorri fino alla sezione da collegare con un link e aggiungi un blocco codice. Puoi aggiungerlo a qualsiasi sezione di blocco, ma non ad altri tipi di sezione come sezioni galleria, sezioni di pagine di raccolta o Layout intelligenti, poiché non è possibile aggiungere blocchi a queste sezioni.

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.

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. Il link creato nello Step 2 porta adesso 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

È consigliabile aggiungere lo slug di pagina e l'URL prima dell'ID univoco nella maggior parte dei casi. 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 di Safari e stai aggiungendo un link a una posizione nella stessa pagina (ad es., scorrimento in basso fino a un'intestazione inferiore), puoi utilizzare la formattazione #unique-id senza lo slug di pagina o l'URL.

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 Torna all'inizio come testo e #top come ID univoco.
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 Vai al piè di pagina come testo e #bottom come ID univoco.
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. Assicuratevi che il vostro 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”.

Le ancore possono anche essere un modo per personalizzare il tuo sito. Ricorda però che i visitatori vedranno l'ID alla fine dell'URL.

La sezione collegata sarà visualizzata sulla parte superiore del 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

 

che aggiungi prima del testo aggiunge un'altra interruzione di riga.

Creare link a sezioni che non supportano i blocchi

Non puoi creare link direttamente ad alcuni tipi di sezioni, come le sezioni galleria o i layout intelligenti, perché non puoi aggiungere blocchi a tali sezioni. Tuttavia, puoi creare un effetto simile seguendo questi passaggi:

1. Aggiungi una sezione vuota sopra la sezione da collegare.
2. Segui i passaggi precedenti per aggiungere il blocco codice alla sezione vuota e impostare il link di ancoraggio.
3. Per evitare uno spazio vuoto creato dalla sezione vuota, clicca sulla sezione vuota, quindi su Modifica sezione e disattiva Riempi schermo .

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:

• Sia stato aggiunto l'URL 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 è 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.

Il link di ancoraggio passa sotto il blocco di codice

Se l'intestazione del tuo sito ha abilitato la posizione fissa, potrebbe apparire un link di ancoraggio che passa sotto il blocco codice con il tuo ID univoco. Per evitare che ciò accada, disattiva l'opzione Posizione fissa o aggiungi un po' di spazio sotto il blocco di codice e sopra il contenuto a cui vuoi che vada il link di ancoraggio.

Nota: Le modifiche al codice personalizzato 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 mobili, come il browser mobile Safari.

Per maggiori informazioni, consulta Slug di pagina e ancore.

Link di ancoraggio nella versione 7.0

Se il tuo sito è nella versione 7.0, ci sono alcune considerazioni speciali da fare quando si impostano i link di ancoraggio.

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

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.