Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Créer des liens ancrés

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.

Étape 1 – Créer un lien

Ajoutez le lien sur lequel les visiteurs cliqueront. 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.

Étape 2 - Ajouter l’URL et le slug de page

Pour certains liens d’ancrage, cette étape n’est pas obligatoire, mais nous vous recommandons de la suivre pour la plupart des liens.

Dans le champ dʼadresse web, ajoutez :

  1. L’URL de votre site
  2. Le slug de la page que vous liez (même s’il s’agit de la même page)
  3. Une barre oblique supplémentaire (/)

Votre lien ressemblera à ceci :

https://exemplesite.com/slugdepage/

Si vous souhaitez que les visiteurs restent sur la même page, cliquez sur l'icône engrenage et vérifiez que l’option Ouvrir dans une nouvelle fenêtre est désactivée.

Conseil : si vous changez de domaine principal ou si vous modifiez le slug de page, pensez à modifier également le lien d’ancrage.

Étape 3 - Créer un identifiant unique

Après le slug de la page, saisissez un hashtag (#) suivi d’un texte. Ce texte est votre identifiant unique.

  • 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. Consultez nos conseils et recommandations si vous avez besoin d'une aide supplémentaire.

Après avoir ajouté lʼID unique, lʼURL doit ressembler à ceci :

https://exemplesite.com/slugpage/#identifiant-unique

Cliquez sur Appliquer pour enregistrer votre lien.

Étape 2 - Lier l'identifiant unique à une section de votre page

Dans l’éditeur de page, faites défiler l’écran jusqu’à la section vers laquelle vous souhaitez que le lien renvoie les visiteurs, et ajoutez un bloc Code.

Remplacez les mots Hello, World! par le texte que vous souhaitez voir apparaître sur la page. Ajoutez ensuite

id="identifiant-unique"

dans le premier tag, en insérant votre identifiant unique entre les guillemets, comme suit :

<p id="identifiant-unique">Destination du lien</p>
Astuce : n'incluez pas le slug de page ou le hashtag (#) de votre lien ancré.

code-block-example.jpg

Cliquez sur Appliquer.

Étape 5 - Enregistrer

Survolez Terminé et cliquez sur Enregistrer. Le lien que vous avez créé lors de l’étape 1 renvoie maintenant les visiteurs au texte que vous avez saisi lors de l’étape 4.

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 1, 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 créez un identifiant unique comme indiqué dans l’étape 2 et l’étape 3 ci-dessus, en utilisant le format suivant :

https://exemplesite.com/slugpage/#identifiant-unique

Formater le texte de destination

Si vous souhaitez donner au texte de destination un format autre que le corps de texte, modifiez les tags <p> et </p> lors de l’étape 4. 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 comme indiqué à l’étape 4 :

format-text-as-h1s.jpg

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 :

  • Dans Internet Explorer
  • 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 Internet Explorer ou 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 #identifiant-unique 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 Outils d'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 la zone d'Injection de code. La fonctionnalité Injection de code est une fonctionnalité Premium.

  1. Ajoutez du texte et un lien dʼancrage en bas de la page ou au pied de page, tel que décrit dans les étapes 1 à 3. Cependant, nʼincluez pas lʼURL de votre site ou de barre oblique (/) avant lʼID unique. Vous pouvez utiliser Haut de page comme texte, et #top comme identifiant unique.
  2. Dans le Menu principal, cliquez sur Paramètres, sur Avancé, puis sur Injection de code.
  3. 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>.
  4. Cliquez sur Enregistrer.

Cette méthode permet de créer un lien vers le haut de chaque page de votre site. Vous pouvez utiliser le même processus pour créer un lien renvoyant vers le haut dʼune page unique en ajoutant le code aux paramètres avancés de la page.

Limites et recommandations

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 #début pour un lien « Retour au début ».

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 souhaitez pas que votre texte apparaisse tout en haut de la fenêtre du navigateur, vous pouvez ajouter de l’espace au-dessus en insérant des tags <p> et des espaces insécables dans la zone de saisie du texte de destination. En langage HTML, un espace insécable s’écrit « &nbsp; ». 

Chaque série de tags <p>&nbsp;</p> ajoutée avant le texte correspond à un nouveau saut de ligne. Consultez les images ci-dessous pour référence.

Résolution de problèmes

Si un lien d’ancrage ne fonctionne pas, vérifiez que :

  • Vous avez ajouté un slug de page comme indiqué dans l’étape 2, sans oublier les deux symboles /. Ceci est particulièrement important pour les liens de navigation, les liens provenant d’autres pages et pour Internet Explorer.
  • 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.

Dans les cas suivants, le lien d’ancrage ne fonctionnera pas, même si la configuration est correcte :

  • S’il utilise le domaine prédéfini de votre site et que vous le testez alors que vous êtes connecté(e). Testez-le dans un navigateur en mode incognito.
  • Si la page utilise déjà cet ID. Essayez dʼutiliser un autre ID ou de modifier lʼutilisation des minuscules/majuscules.
Remarque : l’équipe de l’assistance client peut vous aider à suivre les étapes de ce guide, mais nous ne pouvons pas vous aider si vous souhaitez apporter d’autres modifications au code. Si vous avez besoin d’une assistance supplémentaire, nous vous conseillons de consulter le forum Squarespace ou notre liste de ressources dédiées au code personnalisé.

Ajax et liens dʼancrage (version 7.0)

Sur la version 7.0, Ajax est une méthode spéciale de chargement du site qui permet aux pages riches en contenu de sʼafficher de manière plus rapide et plus agile. Cependant, Ajax peut compromettre la fonctionnalité des liens dʼancrage, en particulier sur appareil mobile.

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 ces familles de templates :

  • Brine
  • Farro
  • Tremont
  • York

Liens dʼancrage de la page dʼindex (version 7.0)

Sur la version 7.0, il existe une autre façon dʼajouter des liens dʼancrage pour les pages dʼindex empilées, sans que cela requiert du code. Pour en savoir plus, consultez lʼarticle Ajouter des liens dʼancrage sur une page dʼindex.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 135 sur 303