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.

Vous pouvez utiliser deux types de liens ancrés sur votre site :

  • Liens d’ancrage standard – Un lien qui redirige vers un endroit spécifique d’une page Disposition ou d’une zone modifiable à l’aide de blocs. L’utilisation d’un bloc Code est requise.
  • Liens ancrés sur Page Index - Il existe un autre moyen d'ajouter des liens ancrés sur des Pages Index empilées,  qui ne nécessite pas de code.

Ce guide explique comment ajouter un lien ancré classique.

É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, surlignez le texte 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

Dans la zone Lien, 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/

Pour certains liens d’ancrage, cette étape n’est pas obligatoire, mais nous vous recommandons de la suivre pour la plupart des liens. 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’identifiant unique, le lien ressemblera à ceci :

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

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

Dans l’éditeur de contenu de la 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

Étape 5 - Enregistrer

Cliquez sur Ajouter un lien, puis 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, 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

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 ancré à la page ou au pied de page comme décrit de  l'Étape 1 à l'Étape 3. Vous pouvez, par exemple, utiliser « Retour en haut de page » comme texte et #haut en tant qu'identifiant unique.
  2. Dans le Menu principal, cliquez sur Paramètres, sur Avancé, puis sur Injection de code.
  3. Dans le champ Header (En-tête), ajoutez ce code : <a id="haut"></a> 
  4. Si vous utilisez un identifiant unique différent de #haut lorsque vous configurez le lien, assurez-vous de le remplacer dans le tag ouvrant <a>.
  5. Cliquez sur Save (Enregistrer).
Conseil : Vous pouvez suivre la même procédure pour les renvois en haut de pages individuelles.

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

En outre, des problèmes peuvent exister 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 le format #identifiant-unique 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 Analyses et statistiques du trafic

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 et de manière plus réactive. Il peut cependant compromettre la fonctionnalité des liens ancrés, en particulier sur les appareils mobiles.

Si votre modèle prend en charge l’architecture Ajax, désactivez Ajax temporairement dans le panneau Styles du site pour déterminer s’il s’agit là de l’origine du problème.

Ajax est disponible pour les familles de modèles suivantes :

  • Brine
  • Farro
  • Tremont
  • York

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 un espacement 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, une espace insécable s'écrit &nbsp; 

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

Résolution de problèmes

Suivez les conseils suivants si un lien ancré ne fonctionne pas :

  • Vérifiez que Ajax est désactivé.
  • Vérifiez que vous avez bien ajouté un slug de page comme indiqué à l'Étape 3, sans oublier les deux symboles /. Ceci est particulièrement important pour les liens de navigation, les liens renvoyant vers une autre page et pour Internet Explorer.
  • Assurez-vous que l'identifiant unique est parfaitement identique dans votre lien et dans le texte de destination. Toute différence dans l'orthographe ou l'utilisation des majuscules empêchera le lien de fonctionner.
  • Veillez à ce que le code HTML du texte de destination soit configuré correctement. Par exemple, si votre identifiant unique est #bambou, vous devez ajouter id=“bambou” au code HTML du texte de destination.
  • Le lien ancré ne fonctionnera pas si cet identifiant se trouve déjà dans votre template. Essayez un autre identifiant ou modifiez l'utilisation des majuscules.
  • Les Pages Index Squarespace contiennent parfois leur propre fonctionnalité intégrée de lien ancré, qui peut entrer en conflit avec les liens ancrés que vous ajoutez. Pour en savoir plus, consultez la page Ajouter des liens ancrés à une Page Index. Si les liens ancrés ne fonctionnent pas correctement sur votre Page Index, essayez de choisir un autre identifiant ou de modifier l'utilisation des 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é.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 106 sur 216