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 ancré (« saut de page ») est une URL spéciale qui vous dirige vers une zone spécifique d'une page. Par exemple, la table des matières de ce guide contient des liens ancrés qui vous dirigent vers chaque en-tête.

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

  • Liens ancrés classiques - Un lien qui vous dirige vers une zone spécifique de toute Page Normale ou modifiable par des blocs. Cette fonctionnalité nécessite un Bloc Code, qui est une fonctionnalité ¨Premium
  • 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.

La solution présentée dans ce guide comprend un Bloc Code. Le Bloc Code est une fonctionnalité Premium disponible dans le plan Website Business actuel et les plans supérieurs :

  • Disponible dans : tous les plans Business et Commerce
  • Disponible dans : l'ancien plan Personnel (n’est plus disponible pour les nouveaux abonnements)
  • Non disponible dans : le plan Personnel actuel
  • Période d'essai : vous pouvez utiliser des Blocs Code au cours d'une période d'essai.

Pour en savoir plus, rendez-vous sur Fonctionnalités Premium.

Étape 1 – Créer un lien

Ajoutez le lien sur lequel les visiteurs vont cliquer. Nous utlisons un Bloc Texte dans l'exemple ci-dessous, mais vous pouvez utiliser n'importe quel type de lien. Dans le Bloc Texte, surlignez le texte et cliquez sur l'icône lien dans la barre d'outils Bloc Texte.

Step 2 - Créer un identifiant unique

Dans l'onglet External(Externe) de la fenêtre du lien, saisissez un hashtag suivi de texte. Ce texte est votre identifiant unique. Assurez-vous que Open in New Window (Ouvrir Dans une Nouvelle Fenêtre) n'est pas coché pour que les visiteurs restent sur la même page.

  • Dans cet exemple, l'identifiant unique est exemple-de-lien-ancré.
  • Vous pouvez saisir le texte de votre choix, mais il ne peut pas contenir d'espaces. Séparez plutôt 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.

Étape 3 - Ajoutez le slug de page

Avant le hashtag, ajoutez le slug de la page vers laquelle le lien renvoie (même s'il s'agit de la même page) et une barre oblique inversée supplémentaire, comme dans l'exemple ci-dessous :

/pageslug/#identifiant-unique

Cette étape n'est pas obligatoire mais nous vous recommandons de la suivre pour la majorité des liens. Consultez la page Trouver le slug de votre page si vous avez besoin d'aide supplémentaire.

Astuce: si vous modifiez le slug de page dans le futur, n'oubliez pas de modifier également le slug du lien ancré.

pageslug.png

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

Dans l'éditeur de contenu de votre page, faites défiler vers le bas jusqu'à la section à laquelle vous souhaitez renvoyer les visiteurs. Cliquez sur un Point d'Insertion et sélectionnez le Bloc Code.

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

id="exemple-lien-ancré"

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

<p id="anchor-link-example">C'est à cet endroit que le lien passera à</p>
Astuce : n'incluez pas le slug de page ou le hashtag (#) de votre lien ancré.

Étape 5 - Enregistrer

Cliquez sur Save (Enregistrer). Le lien que vous avez créé à l'Étape 1 renvoie maintenant les visiteurs au texte que vous avez saisi à l'Étape 4.

Utiliser différents types de liens

Nous utilisons du texte en tant que lien ancré dans l'Étape 1 dans l'exemple ci-dessus, mais vous pouvez utiliser n'importe quel type de lien, y compris des boutons et des images cliquables. Rendez-vous sur Ajouter des liens à votre site pour en savoir plus sur les différentes options de liens.

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 :

/pageslug/#identifiant-unique

Voici un exemple d'un lien ancré dans un Bloc Bouton :

button.png

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> à l'Étape 4. Si vous ne maîtrisez pas le langage HTML, essayez d'utiliser les tags de l'en-tête 1 : <h1> </h1>

Lorsque vous utilisez des tags différents, ajoutez l'identifiant unique comme indiqué à l'Étape 4 :

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 Settings (Paramètres), puis sur Advanced (Avancé) et enfin sur Code Injection (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 le slug de page avant l'identifiant unique dans la majorité des cas. Si vous n'ajoutez pas le slug de page au lien ancré, 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.

Pour trouver le slug de l'URL de la page, cliquez sur l'icône de la page concernée, dans la section Pages. Dans la section Paramètres de Page qui s'ouvre, recherchez le champ URL Slug (Slug de l'URL).Vous pouvez également le trouver en mode prévisualisation ou quand vous affichez votre site en mode incognito.

anchor2-about1.png

pageslug2.png

Si vous savez qu'aucun de vos visiteurs n'utilise Internet Explorer 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 le page), vous pouvez utiliser le format #identifiant-unique sans le slug de page.

Astuce : pour savoir quels navigateurs vos visiteurs utilisent, consultez la section Analyses de l'aperçu 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 template prend en charge Ajax, désactivez-le dans l'Éditeur de Style pour voir s'il est à l'origine du problème.

Ajax est actuellement disponible sur les templates suivants. Cette liste regroupe les templates par famille.

  • Famille Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Famille Farro - Farro, Haute
  • Famille Tremont - Camino, Carson, Henson, Tremont
  • Famille York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, 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 plus utiliser « panda » comme identifiant ailleurs sur cette même page. Vous pourrez l'utiliser sur une page différente, 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 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.
  • Si vous rencontrez des problèmes sur les appareils mobiles, vous devrez peut-être désactiver Ajax.
  • 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 du Service Client Squarespace peut vous aider à suivre les étapes de ce guide, mais elle ne pourra vous aider si vous souhaitez apporter d'autres modifications au code. Si vous avez besoin d'une aide supplémentaire, nous vous conseillons de consulter la communauté Squarespace Answers ou bien notre liste de ressources dédiées au code personnalisé.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 89 sur 167