Ajouter des liens d’ancrage aux pages Index dans la version 7.0

Dernière mise à jour le 28 juin 2024

Dans la version 7.0, les pages Index empilées ont une structure d’URL unique que vous pouvez utiliser pour créer des liens d’ancrage (ou des « sauts de page ») sans code personnalisé. Ces liens d’ancrage vous dirigent vers des zones spécifiques de la page Index. 

Par exemple, lorsque vous cliquez sur le bouton Découvrez nos réalisations sur le site de démonstration du template Hayden, la page défile vers le bas jusqu’à la section Moreau.

Accéder à cette fonctionnalité

Ce guide est destiné aux pages Index sur la version 7.0. Pour ajouter des liens d’ancrage sur la version 7.1 ou sur d’autres types de pages sur la version 7.0, reportez-vous à la page Créer des liens d’ancrage.

Templates compatibles

Les liens d’ancrage des pages Index fonctionnent le mieux avec les templates disposant de pages Index empilées. Dans ces familles de templates, lorsque les visiteurs cliquent sur un lien d’ancrage, ils accèdent à cette section de la page Index.

  • Bedford
  • Brine : le chargement Ajax peut être en conflit avec le comportement du lien d’ancrage. Vous pouvez également utiliser la navigation de l’index intégrée.
  • Pacific : vous devez ajouter -section à la fin du lien. Référez-vous à l’étape 3 ci-dessous pour en savoir plus.

Astuce

certains index en grille prennent en charge une fonctionnalité similaire. Vous pouvez également utiliser du code personnalisé pour ajouter des liens d’ancrage classiques sur n’importe quel template.

Étape 1 - Trouver le slug

Dans le panneau Pages, survolez la section d’index que vous souhaitez lier. Cliquez sur l'icône engrenage pour ouvrir les paramètres de la page pour cette section.

Copiez le slug qui se trouve dans le champ Slug d’URL. Ce slug va vous permettre de créer un lien d’ancrage.

Astuce

le slug peut s’afficher dans la barre du navigateur lorsque les visiteurs accèdent à cette section. Vous pouvez modifier le slug en remplaçant le texte dans ce champ.

Adding_Index_Page_anchor_links.png

Étape 2 - Créer le 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.

Astuce

l’index de chaque template propose des options uniques. Pour en savoir plus, consultez le guide correspondant à la famille dont fait partie votre template : Bedford, Brine ou Pacific.

Étape 3 - Ajoutez le slug de page

Suivez ensuite ces étapes :

  1. Dans le champ URL, collez le slug que vous avez copié lors de l’étape 1.
  2. Ajoutez un hashtag (#) avant le slug pour créer le lien. Dans cet exemple, le lien d’ancrage est #hours-and-location.
  3. Désactivez l’option Ouvrir le lien dans un nouvel onglet.
  4. Pour les templates Pacific, Charlotte, Horizon et Naomi uniquement, ajoutez -section à la fin de votre lien d’ancrage. Exemple : #horaires-et-adresse-section
  5. Appuyez sur Entrée.

Étape 4 - Ajouter le slug d’index

Si vous avez ajouté votre lien à une section qui se trouve dans le même index lors de l’étape 2, vous pouvez ignorer cette étape.

Pour tous les autres liens, tels que les liens de navigation ou les liens sur d'autres pages, ajoutez le slug de la page Index avant le lien d’ancrage. Ainsi, vos liens fonctionneront à partir des emplacements suivants :

  • Une autre page.
  • La navigation de votre site.
  • L’URL directe d’une sous-page.

Pour ajouter ceci :

  1. Copiez le slug de votre page Index dans les paramètres de la page.
  2. Ouvrez à nouveau l’éditeur de lien.
  3. Ajoutez le slug de page avant le lien d’ancrage entre deux symboles /, comme ceci :
https://exemplesite.com/slugindex/#slugpage
  1. Appuyez sur Entrée.

Remarque

If your primary domain includes www. before your domain name, include that in your anchor link URL too.

Exemples

Ajoutez des liens d’ancrage dans plusieurs sections afin d’aider les visiteurs à naviguer sur votre page Index. Cet exemple utilise le template Brine et trois types de lien : un bloc Bouton, un lien hypertexte et une URL de destination d’image.

Dans le template Brine, exemples de liens d’ancrage utilisant un bloc Bouton, un lien hypertexte et une URL de destination d’image.

Créez une navigation en plaçant les liens d’ancrage côte à côte. Cet exemple utilise le template Bedford et des liens hypertextes.

Exemples de liens d’ancrage dans le template Bedford, disposés côte à côte.

Page Index en grille et liens d'ancrage

Ces familles de templates avec des pages Index en grille prennent en charge une fonctionnalité similaire :

  • Avenue
  • Flatiron
  • Montauk

Vous pouvez créer un lien d’ancrage sur page Index dans ces templates à l’aide du format d’URL suivant :

/index-page-slug/#/page-slug

Cette option est particulièrement utile pour renvoyer vers des pages de l’index à partir de la navigation ou d’autres pages de votre site. La page s’ouvre avec tout type de mise en forme spécifique à l’index, de la même manière que lorsque vous cliquez sur son image mise en avant dans l’index.

Cet exemple utilise le template Avenue.

Exemple de comportement d’un lien d’ancrage dans une page Index en grille.

Dépannage

Suivez les conseils suivants si un lien d'ancrage ne fonctionne pas :

  • Si nécessaire, vérifiez que vous avez ajouté le slug de la page Index comme indiqué dans l’étape 4, sans oublier les deux symboles /. Ceci est obligatoire pour les liens de navigation et les liens provenant d’autres pages.
  • Si vous rencontrez des problèmes sur la version pour appareils mobiles et que votre template fait partie de la famille Brine, désactivez Ajax temporairement afin de déterminer s’il est à l’origine des problèmes.
  • Vérifiez que le slug de la page Index et que le slug de page de la section sont corrects. Si vous avez modifié l’un ou l’autre, vous devez mettre à jour le lien d’ancrage manuellement.
Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Ajouter des liens d’ancrage aux pages Index dans la version 7.0