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 link di ancoraggio a qualsiasi sezione a blocco del tuo sito con un Blocco Codice.
Guarda un video
Step 1 - Aggiungi un Blocco codice
Nell'editor di pagina, scorri fino alla sezione a cui desideri collegarti e aggiungi un blocco codice. Puoi aggiungerlo a qualsiasi sezione blocco, ma non ad altri tipi di sezione come sezioni galleria o layout intelligenti, poiché non è possibile aggiungere blocchi a tali sezioni.
Nel campo Codice, aggiungi:
<p id="unique-id">Questa è la destinazione del link</p>
All'interno del primo tag, sostituisci l'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 qualsiasi testo che desideri visualizzare sul tuo sito in questo punto.
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:
- In un Blocco di testo, digita il testo da collegare, evidenzialo e clicca sull'icona Link nella barra degli strumenti Blocco di testo.
- Nel campo dell'indirizzo web, aggiungi l'URL completo della pagina (anche se è la stessa pagina) e una barra inversa aggiuntiva. Dovrebbe apparire così:
https://examplesite.com/pageslug/
- Dopo lo slug della pagina, inserisci un hashtag (#) seguito dall'ID univoco dello step 1. Dovrebbe apparire così:
https://examplesite.com/pageslug/#unique-id
- Se vuoi che il link si apra in una nuova scheda, clicca su
e abilita Apri in una nuova finestra.
- Clicca su Salva, quindi su Applica per salvare il link.
e abilita Apri in una nuova finestra.
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 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 <p> e </p> nello Step 1. 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 al codice seguendo la procedura dello Step 1:
<h1 id="unique-id">Questa è la destinazione del link</h1>
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:
<p id="unique-id"></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à:
- 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 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 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.
- 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 crea 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.
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.
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
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"
- 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.
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
A seconda del dispositivo e del browser, il comportamento dei link di ancoraggio può variare su dispositivi mobili. Ad esempio, quando il tuo link di ancoraggio include l'URL completo come consigliamo, il browser potrebbe ricaricare la pagina nel punto di destinazione invece di saltare immediatamente al punto di destinazione.
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 link di ancoraggio.
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.