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 ciascun titolo.
Questa guida descrive come aggiungere link di ancoraggio a qualsiasi sezione a blocco del tuo sito con un Blocco Codice.
Fase 1 - Crea un link
Aggiungi il link che i visitatori selezioneranno. Puoi utilizzare qualsiasi tipo di link, ma in questo esempio viene utilizzato un link di testo.
In un Blocco di testo, digita il testo da collegare, evidenzialo e clicca sull'icona Link nella barra degli strumenti Blocco di testo.
Step 2 - Aggiungere l'URL e lo slug di pagina
Per alcuni link di ancoraggio, questo step è facoltativo, ma è consigliato per la maggior parte dei link.
Nel campo Indirizzo Web, aggiungi:
- L'URL del sito
- Lo slug della pagina a cui desideri collegarti (anche se è la stessa pagina)
- Una barra inversa aggiuntiva (/)
L'aspetto dovrebbe essere il seguente:
https://examplesite.com/pageslug/
Se stai aggiungendo link di ancoraggio alla tua home page, non devi includere lo slug. Se cambi l'home page, aggiungi lo slug a tutti i link di ancoraggio che hai creato sulla vecchia home page o questi non funzioneranno correttamente.
Se desideri che i visitatori rimangano nella stessa pagina, clicca su 
per assicurarti che l'opzione Apri in nuova finestra sia disabilitata.
Suggerimento: se modifichi il tuo dominio principale o aggiorni lo slug di pagina in futuro, aggiorna anche il link di ancoraggio.
Step 3 - Creazione di un ID univoco
Dopo lo slug della pagina, inserisci un hashtag (#) seguito da testo. Il testo inserito in questa sezione sarà il tuo ID univoco.
- 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 sono sensibili a maiuscole e minuscole e possono essere utilizzati una sola volta per pagina. Consulta i nostri suggerimenti sulle procedure consigliate per maggiori informazioni.
Dopo aver aggiunto l'ID univoco, l'URL dovrebbe apparire nel modo seguente:
https://examplesite.com/pageslug/#unique-id
Clicca su Salva, quindi su Applica per salvare il link.
Step 4 - Collega l'ID univoco a una sezione della tua pagina
Nell'editor di pagina, scorri fino alla sezione in cui desideri che i visitatori vengano indirizzati e aggiungi un Blocco Codice.
Nel campo Codice, aggiungi:
<p id="unique-id">Questa è la destinazione del link</p>
All'interno del primo tag, sostituisci l'ID univoco tra le virgolette con il tuo ID univoco specifico. Sostituisci Questa è la destinazione del link con qualsiasi testo che desideri visualizzare sul tuo sito in questo punto.
Suggerimento: Non includere lo slug di pagina dell'ancora.
Step 5 - Salva
Clicca su Salva per pubblicare le modifiche. Il link creato nello Step 1 porterà ora i visitatori al testo definito nello Step 4.
Utilizzare diversi tipi di link
Nell'esempio precedente viene utilizzato il corpo del testo per il link di ancoraggio illustrato nello Step 1, 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 crea l'ID univoco come mostrato nello Step 2 e nello Step 3 sopra, utilizzando il seguente 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 <p> e </p> nello Step 4. Se non hai familiarità con il linguaggio HTML, prova a utilizzare i tag di Intestazione 1: <h1> </h1>
Quando utilizzi tag diversi, aggiungi l'ID univoco seguendo la procedura dello Step 4:
Il link di ancoraggio funziona anche senza testo visibile. Se non desideri che i visitatori visualizzino il testo nel tuo punto di destinazione, formatta il testo di destinazione eliminando tutto il testo tra i tag:
<p id ="uniqueid"></p>
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à:
- In Internet Explorer
- 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 Internet Explorer o 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 alla parte superiore
Per passare alla parte superiore della pagina, inserisci un link all'intestazione utilizzando Iniezione di codice. L'iniezione di codice è una funzionalità Premium.
- Aggiungi del testo e un link di ancoraggio nella parte inferiore della pagina o nel piè di pagina come descritto dallo Step 1 allo Step 3, ma non includere l'URL del sito o una barra (/) prima dell'ID univoco. Puoi utilizzare Torna all'inizio come testo e #top come ID univoco.
- Nel menu Home, clicca su Impostazioni, quindi su Avanzate e infine su Iniezione di codice.
- Nel campo Intestazione, aggiungi questo codice: <a id="top"></a>. Se hai utilizzato un ID univoco diverso da #top durante la configurazione del link, assicurati di sostituirlo nel primo tag <a>.
- Clicca su Save (Salva).
Questo metodo consente di passare alla parte superiore di ogni pagina del sito. Puoi utilizzare lo stesso processo per passare alla parte superiore di una singola pagina aggiungendo il codice alle impostazioni avanzate della pagina.
Restrizioni e procedure consigliate
I link di ancoraggio possono essere un potente strumento per i tuoi 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.
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 <p> con spazi unificatori alla copia del testo di destinazione. Nel linguaggio HTML, uno spazio unificatore è
Ogni set di <p> </p> che aggiungi prima del testo aggiunge un'altra interruzione di riga.
Risoluzione dei problemi
Se un link di ancoraggio non funziona, verifica che:
- Sia stato aggiunto uno slug di pagina, come descritto nello Step 2, includendo i due simboli /. Questo passaggio è particolarmente importante per i link di navigazione, i link di altre pagine e in Internet Explorer.
- 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"
- Sia stato aggiunto www. all'inizio dell'URL, se incluso nel tuo dominio principale.
In questi casi, il link di ancoraggio non funzionerà anche se tutto è impostato correttamente:
- Se utilizza il dominio incorporato del sito e lo verifichi mentre sei collegato. Provalo, invece, in un browser con navigazione in incognito attivata.
- Se 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 in incognito.
- Se la pagina utilizza già questo ID. Prova a utilizzare un ID diverso o a modificare le lettere maiuscole.
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.
Ajax e link di ancoraggio (versione 7.0)
Nella versione 7.0, Ajax è uno speciale metodo per il caricamento del sito che rende le pagine con contenuti pesanti molto più leggere e consultabili rapidamente. Tuttavia, questo può interferire con la funzionalità dei link di ancoraggio, in particolare su 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 vedere se è la causa del problema. Ajax è disponibile in queste famiglie di modelli:
- Brine
- Farro
- Tremont
- York
Link di ancoraggio nella Pagina Indice (versione 7.0)
Nella versione 7.0, 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.