Redirigez les visiteurs vers une partie spécifique d’une page.

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.

Sur les sites de la version 7.0, vous pouvez créer des liens d’ancrage en ajoutant des blocs Code aux zones de contenu.

Ce guide vous explique comment créer manuellement des liens d’ancrage sur un site de la version 7.0. Certains templates de la version 7.0 ont également des liens d’ancrage sur page Index intégrés. Pour ajouter des liens d’ancrage dans la version 7.1, consultez l’article Créer des liens d’ancrage.

Regarder une vidéo

Cette vidéo explique comment ajouter manuellement des liens d’ancrage dans la version 7.1, mais les étapes sont les mêmes dans la version 7.0.

Étape 1 - Ajouter un bloc Code

Dans l’éditeur de page, faites défiler l’écran jusqu’à l’endroit où vous souhaitez que le lien redirige et ajoutez un bloc Code. Vous pouvez l’ajouter à n'importe quelle zone de contenu de bloc, mais pas à des pages de collection, comme les blogs ou les galeries, où il n’est pas possible d’ajouter des blocs.

Dans le champ de code, ajoutez :

Destination du lien

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. Vérifiez que l’option Afficher le code source est désactivée, sinon le lien d’ancrage ne fonctionnera pas.

É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 :

1. Dans un bloc Texte, saisissez le texte de votre lien, surlignez-le et cliquez sur l’icône lien dans la barre d’outils du bloc Texte.
2. Sous URL, 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/

3. 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

4. Si vous souhaitez que le lien s’ouvre dans un nouvel onglet, activez l’option Ouvrir le lien dans un nouvel onglet.
5. Appuyez sur Entrée.

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

et

à l’étape 1. Si vous ne maîtrisez pas le langage HTML, utilisez les tags du titre 1 :

Lorsque vous utilisez des tags différents, ajoutez l’identifiant unique au code comme vous l’avez fait à l’étape 1 :

Destination du lien

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 :

Slugs de page et liens ancrés

Nous vous recommandons d’ajouter l’URL complète 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 le lien créé à l’étape 2 sans le slug ou l’URL de la page, comme ceci :

#unique-id

Astuce : pour savoir quels sont les navigateurs utilisés par vos visiteurs, référez-vous au panneau Analyse du trafic.

Lien redirigeant vers le haut ou le bas d’une page

Pour insérer un lien redirigeant vers le haut ou le bas de votre page, créez un lien vers l’en-tête ou le pied de page à l’aide de l’injection de code. La fonctionnalité Injection de code est une fonctionnalité premium.

Lien vers le haut de la page

Insérer un lien redirigeant vers le haut de votre page peut s’avérer utile si le contenu de votre page est long et que vous souhaitez permettre à vos visiteurs de revenir facilement au menu de navigation. Pour créer un lien redirigeant vers le haut d’une page :

1. 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.
2. Ouvrez le panneau Injection de code.
3. Dans le champ En-tête, ajoutez le code suivant : . 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 .
4. 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.

Lien redirigeant vers le bas d’une page

Insérer un lien redirigeant vers le bas de votre page peut s’avérer utile si vous souhaitez permettre à vos visiteurs de trouver facilement des informations ou les encourager à interagir avec un élément de votre pied de page, comme un bloc Newsletter.

Pour créer un lien redirigeant vers le bas d’une page :

1. Ajoutez du texte et un lien d’ancrage n’importe où dans le contenu de la 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 Pied de page comme texte et #bottom comme identifiant unique.
2. Ouvrez le panneau Injection de code.
3. Dans le champ Pied de page, ajoutez le code suivant : . Si vous avez utilisé un identifiant unique autre que #bottom lorsque vous avez configuré le lien, assurez-vous de le remplacer dans le tag ouvrant .
4. Cliquez sur Enregistrer.

Cette méthode permet de rediriger vos visiteurs vers le pied de page de chacune des pages de votre site.

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é

Lorsqu’un visiteur clique sur un lien d’ancrage, l’identifiant unique apparaît à la fin de l’URL du site. Votre identifiant unique peut être visible par vos visiteurs ; assurez-vous donc qu’il soit approprié.

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 d’ancrage peuvent également permettre d’ajouter une touche d’humour et de personnalité à votre site. Gardez à l’esprit que l’identifiant à la fin de l’URL affichera la barre d’adresse du navigateur pour les visiteurs.

Le texte de destination correspondant au lien 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

avec des espaces insécables à la copie de texte d'atterrissage. Le code HTML d'un espace insécable est  

Chaque ensemble de balises

 

que vous ajoutez avant que le texte ajoute un saut de ligne supplémentaire. Par exemple, si vous voulez deux sauts de ligne avant le texte de destination du titre 3, le bloc Code doit utiliser le code suivant :

 
 
Destination du lien

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.

Dépannage

Le lien d’ancrage ne fonctionne pas

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.
• Les guillemets du code HTML du texte de votre page de renvoi sont des guillemets droits, comme dans les exemples de ce guide. Les guillemets incurvés ou français ne fonctionneront pas dans le bloc Code. Le bloc Code utilise par défaut des guillemets droits, mais vous pouvez avoir des guillemets incurvés si vous avez copié-collé du code dans le bloc.
• 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 nom de 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.

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

Remarque : les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes donc 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 réactif 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 varie 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 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.