Un lien d’ancrage (ou « saut de page ») est une URL spéciale qui redirige vers une zone spécifique dans une page. Par exemple, la table des matières de ce guide contient des liens d’ancrage qui vous dirigent vers chaque titre.
Ce guide explique comment ajouter des liens dʼancrage à nʼimporte quelle section de bloc de votre site grâce à un bloc Code.
Regarder une vidéo
Étape 1 - Ajouter un bloc Code
Dans l’éditeur de page, faites défiler l’écran jusqu’à la section vers laquelle vous souhaitez rediriger et ajoutez un bloc Code. Vous pouvez l’ajouter à n’importe quelle section de bloc, mais pas à d’autres types de sections tels que les sections Galerie ou les dispositions automatiques, car il n’est pas possible d’ajouter des blocs à ces sections.
Dans le champ de code, ajoutez :
<p id="identifiant-unique">Destination du lien</p>
Dans le premier tag, remplacez identifiant-unique entre guillemets par un identifiant unique spécifique pour votre lien :
- Vous pouvez saisir le texte de votre choix comme identifiant unique, mais il ne peut pas contenir d’espaces. Vous pouvez séparer les mots par des tirets.
- Les identifiants uniques sont sensibles à la casse et ne peuvent être utilisés qu’une seule fois par page. Pour en savoir plus, consultez nos recommandations.
Remplacez Destination du lien par le texte que vous souhaitez afficher sur votre site.
Étape 2 - Créer le lien
Ajoutez le lien sur lequel les visiteurs cliquent pour accéder au contenu que vous avez créé à l’étape 1. Nous utilisons un lien hypertexte dans cet exemple, mais vous pouvez utiliser n’importe quel type de lien :
- Dans un bloc Texte, tapez le texte de votre lien, surlignez‑le et cliquez sur lʼicône Lien dans la barre dʼoutils du bloc Texte.
- Dans le champ d’adresse web, ajoutez l’URL complète de la page (même s’il s’agit de la même page) et une barre oblique supplémentaire. Votre lien ressemblera à ceci :
https://exemplesite.com/slugdepage/
- Après le slug de la page, saisissez un hashtag (#) suivi de l’identifiant unique de l’étape 1. Votre lien ressemblera à ceci :
https://exemplesite.com/slugpage/#identifiant-unique
- Si vous souhaitez que le lien s’ouvre dans un nouvel onglet, cliquez sur
et activez l’option Ouvrir dans une nouvelle fenêtre.
- Cliquez sur Enregistrer, puis sur Appliquer pour enregistrer votre lien.
et activez l’option Ouvrir dans une nouvelle fenêtre.
Pour certains liens d’ancrage, il n’est pas nécessaire d’inclure l’adresse complète du site web, mais nous vous recommandons de le faire pour la plupart des liens.
Conseil : si vous ajoutez des liens d’ancrage à votre page d’accueil, vous n’avez pas besoin d’inclure le slug de la page. Si vous modifiez votre page d’accueil, ajoutez le slug à tous les liens d’ancrage que vous avez créés sur l’ancienne page d’accueil, sinon ils ne fonctionneront pas correctement.
Étape 3 - Enregistrer et publier
Cliquez sur Enregistrer pour publier vos modifications. Le lien que vous avez créé à l’étape 2 dirige désormais les visiteurs vers le texte que vous avez saisi à l’étape 1.
Utiliser différents types de liens
Nous utilisons dans l’exemple ci-dessus un corps de texte pour le lien d’ancrage de l’étape 2, mais vous pouvez utiliser n’importe quel type de lien, y compris des boutons et des URL de destination d’images. Si vous voulez découvrir quelles sont les différentes options pour les liens, consultez l’article Ajouter des liens sur votre site.
Pour tous les types de liens, ajoutez l’URL et l’identifiant unique comme indiqué à l’étape 2 ci-dessus, en utilisant le format suivant :
https://exemplesite.com/slugpage/#identifiant-unique
Formater le texte de destination
Pour donner au texte de destination un format autre que le corps de texte, modifiez les tags <p> et </p> à l’étape 1. Si vous ne maîtrisez pas le langage HTML, utilisez les tags du titre 1 : <h1> </h1>
Lorsque vous utilisez des tags différents, ajoutez l’identifiant unique au code comme indiqué à l’étape 1 :
<h1 id="identifiant-unique">Destination du lien</h1>
Rediriger vers un espace vide
Le lien d’ancrage fonctionne même sans texte visible. Si vous ne souhaitez pas que du texte apparaisse à votre point de destination, mettez en forme le texte de destination sans aucun élément entre les tags :
<p id="identifiant-unique"></p>
Slugs de page et liens ancrés
Nous vous recommandons d’ajouter l’URL et le slug de page avant l’identifiant unique dans la majorité des cas. Si vous n’ajoutez pas le slug de page au lien d’ancrage, ce dernier ne fonctionnera pas dans les cas suivants :
- Si votre lien est un lien de navigation
- Si votre lien renvoie vers une autre page
Des problèmes peuvent survenir dans les navigateurs mobiles Safari avec les liens d’ancrage qui ne contiennent pas l’URL du site. Pour trouver l’URL de votre page, consultez l’article Slugs d’URL.
Si vous savez qu’aucun de vos visiteurs n’utilise le navigateur mobile Safari et que vous créez un lien qui les redirige vers une autre zone située sur la même page (par exemple, vers un en-tête situé plus bas sur la page), vous pouvez utiliser #unique-id dans votre lien sans le slug ou l’URL de la page.
Astuce : pour savoir quels sont les navigateurs utilisés par vos visiteurs, référez-vous au panneau Analyse du trafic.
Lien vers le haut de la page
Pour insérer un lien redirigeant vers le haut de votre page, créez un lien vers l’en-tête à l’aide de l’injection de code. La fonctionnalité Injection de code est une fonctionnalité premium.
- Ajoutez du texte et un lien d’ancrage en bas de la page ou au pied de page, comme indiqué à l’étape 2. Cependant, nʼincluez pas lʼURL de votre site ou de barre oblique (/) avant l’identifiant unique. Vous pouvez utiliser Haut de page comme texte et #top comme identifiant unique.
- Dans le Menu principal, cliquez sur Paramètres, sur Avancé, puis sur Injection de code.
- Dans le champ En-tête, ajoutez le code suivant : <a id="top"></a>. Si vous avez utilisé un identifiant unique autre que #top lorsque vous avez configuré le lien, assurez-vous de le remplacer dans le tag ouvrant <a>.
- Cliquez sur Enregistrer.
Cette méthode redirige vers le haut de chaque page de votre site. Vous pouvez utiliser le même processus pour rediriger vers le haut dʼune page unique en ajoutant le code aux paramètres avancés de la page.
Limites et bonnes pratiques
Les liens ancrés peuvent constituer un outil puissant pour faciliter la navigation des visiteurs dans votre site, mais il est important de garder en tête certains éléments.
Les identifiants ne peuvent être utilisés qu'une seule fois sur chaque page
Par exemple, si vous utilisez l’identifiant panda sur votre page d’accueil, vous ne pourrez pas ajouter ultérieurement panda comme identifiant sur cette même page. Vous pourrez l’utiliser sur une autre page, mais pas une seconde fois sur votre page d’accueil.
Les identifiants sont sensibles à la casse
Si votre HTML indique id="Panda", mais que votre lien comporte lʼidentifiant #panda, le lien ne fonctionnera pas.
L'identifiant unique est intégré à l'URL lorsqu'une personne clique sur le lien ancré
Quand un visiteur clique sur un lien ancré, l'identifiant unique s'inscrit à la fin de l'URL du site.
Vous pouvez saisir l'identifiant de votre choix
La création d’un identifiant facile à retenir peut simplifier le processus de configuration et faciliter la résolution de problèmes, le cas échéant. Les identifiants faciles à retenir sont pourvus d’une certaine logique, comme #haut pour un lien « Haut de page ».
Les liens ancrés sont également un moyen d'ajouter une touche d'humour et de personnalité à votre site. Gardez à l'esprit que les visiteurs peuvent voir l'identifiant à la fin de l'URL.
La section à laquelle vous renvoyez les utilisateurs s’affiche en haut du navigateur
Le texte de destination apparaît en haut du navigateur, ou aussi haut que possible si peu de contenu se trouve en dessous
Si vous ne voulez pas que votre texte soit en haut de la fenêtre du navigateur, vous pouvez créer de l'espace avant celui-ci en ajoutant des balises <p> avec des espaces insécables à la copie de texte d'atterrissage. Le code HTML d'un espace insécable est
Chaque ensemble de>balises <p> </p> que vous ajoutez avant que le texte ajoute un saut de ligne supplémentaire. Voir les images ci-dessous pour référence.
Garder les liens à jour
Si vous changez de domaine principal ou si vous mettez à jour le slug de la page par la suite, pensez également à mettre à jour vos liens d’ancrage. Les liens d’ancrage ne fonctionneront pas correctement s’ils utilisent des URL obsolètes.
Résolution de problèmes
Si un lien d’ancrage ne fonctionne pas, vérifiez que :
- Vous avez ajouté l’URL comme indiqué à l’étape 2, y compris le slug de la page et deux symboles /. Cela est particulièrement important pour les liens de navigation et les liens provenant d’autres pages.
- L’identifiant unique est parfaitement identique dans votre lien et dans le texte de destination. Toute différence dans l’orthographe ou l’utilisation de minuscules et de majuscules empêchera le lien de fonctionner.
- Le code HTML du texte de destination est correct. Par exemple, si votre identifiant unique est #bambou, vous devez ajouter le lien id=“bambou” au code HTML du texte de destination.
- Vous avez ajouté www. au début de votre URL si votre domaine principal l’inclut.
- Vous le testez alors que vous êtes déconnecté(e) ou que vous utilisez une fenêtre de navigation privée. Cliquer sur un lien d’ancrage en étant connecté peut fonctionner dans certains cas, mais il ne s’agit pas d’un test fiable permettant de connaître l’expérience de vos visiteurs.
Même si tout est configuré correctement, le lien d’ancrage ne fonctionnera pas si :
- Il utilise le domaine prédéfini de votre site et vous le testez alors que vous êtes connecté(e). Testez-le dans un navigateur en mode incognito.
- Votre site est défini sur privé et vous testez le lien d’ancrage alors que vous êtes connecté(e). Définissez plutôt un mot de passe du site et testez dans un navigateur en mode incognito.
- La page utilise déjà cet identifiant. Essayez un autre identifiant ou modifiez l’utilisation des minuscules/majuscules.
Remarque : les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes pas en mesure de vous aider ni pour la configuration ni pour la résolution de problèmes. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design adaptatif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l’ensemble des templates. Le code personnalisé peut également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :
- Découvrez les bonnes pratiques pour ajouter un code personnalisé.
- Consultez notre guide général sur les personnalisations tierces.
- Rendez-vous sur le forum Squarespace, notre communauté qui regroupe clients et développeurs.
- Trouvez un Squarespace Expert qui vous aidera à créer du code personnalisé pour votre site.
Liens d’ancrage sur mobile
Selon l’appareil et le navigateur, le comportement du lien d’ancrage peut varier sur les appareils mobiles. Par exemple, lorsque votre lien d’ancrage inclut l’URL complète comme nous le recommandons, le navigateur peut recharger la page au point de destination au lieu de descendre directement au point de destination.
Si vous préférez un comportement de lien d’ancrage différent sur mobile, vous pouvez essayer d’autres formats pour le lien d’ancrage, tels que /slugpage#identifiant-unique ou #identifiant-unique, mais gardez à l’esprit que ces formats peuvent ne pas fonctionner pour certaines configurations ou certains navigateurs mobiles, comme le navigateur mobile Safari.
Pour en savoir plus, consultez la section Slugs de page et liens d’ancrage.
Liens d’ancrage sur la version 7.0
Si votre site utilise la version 7.0, certaines considérations particulières doivent être prises en compte lors de la configuration des liens d’ancrage.
Ajax et liens ancrés
Ajax est une méthode spéciale de chargement de site qui permet aux pages riches en contenu de s’afficher plus rapidement. Cela peut cependant interférer avec les liens d’ancrage, en particulier sur les appareils mobiles.
Si les étapes de dépannage ci-dessus ne fonctionnent pas et que votre template prend bien en charge Ajax, désactivez-le temporairement dans Styles du site pour voir si cela est à lʼorigine du problème. Ajax est disponible pour les familles de templates suivantes :
- Brine
- Farro
- Tremont
- York
Liens d’ancrage des pages Index
Il existe une autre façon dʼajouter des liens dʼancrage pour les pages Index empilées, sans que cela requière du code. Pour en savoir plus, consultez lʼarticle Ajouter des liens dʼancrage sur une page Index.