Créez un lien pour faire défiler vers une section spécifique de votre page

Vous souhaitez guider vos visiteurs directement vers une section spécifique de votre page, comme les informations produit, la FAQ ou un formulaire de contact, en un seul clic ? C'est exactement ce que vous cherchez. liens d'ancrage sont pour.

Dans ce guide, vous apprendrez à créer des liens à défilement fluide dans GemPages Version 7, en utilisant des boutons, des images ou des éléments de texte pour faire défiler n'importe quelle section de votre page — aucun codage n'est nécessaire.

Qu'est-ce qu'un lien d'ancrage ?

An lien d'ancrage (également appelé « lien de défilement ») vous permet d'envoyer les visiteurs vers une section spécifique de la même page, sans recharger la page ni forcer les utilisateurs à faire défiler manuellement.

GemPages rend cette fonctionnalité facile à configurer en vous permettant de lier n'importe quel élément cliquable (comme un bouton ou un titre) à un ID de section sur la page.

Avant de commencer : obtenez l’identifiant de la section

Pour créer un lien d'ancrage, vous avez d'abord besoin de Identifiant de section de la destination vers laquelle vous souhaitez que les utilisateurs fassent défiler la page.

Comment trouver l'ID de section :

• Passez la souris sur la section vers laquelle vous souhaitez créer un lien dans l'éditeur.
  
• Faites un clic droit sur la section.
  
• Choisissez « Classe de copie » Dans le menu déroulant.

• Vous aurez une classe comme .gp0XsMH_MSPour le convertir en identifiant, remplacez simplement le point (.) avec hachage (#).

Exemple : .gp0XsMH_MS → #gp0XsMH_MS

Vous utiliserez cet ID de section lors de la configuration du lien.

Comment créer des liens d'ancrage dans GemPages

Dans GemPages, vous pouvez créer des liens d'ancrage de deux manières simples :

• Utilisation d'un bouton ou d'une image : Vous pouvez transformer un bouton, image ou bannière principale en un lien cliquable qui redirige les visiteurs vers une section spécifique de la même page. C'est idéal lorsque vous souhaitez une action claire, comme « Voir les détails du produit », « Accéder à la FAQ » ou « Nous contacter ».
• Utilisation de texte (texte d'ancrage) : Vous pouvez également ajouter des liens d'ancrage directement à texte à l'intérieur des titres ou des blocs de texteLorsque les visiteurs cliquent sur le texte, la page défile jusqu'à la section correspondante. Cette option est particulièrement adaptée aux pages longues, aux mises en page avec table des matières ou aux liens de navigation discrets.

Les étapes de chaque méthode sont expliquées ci-dessous :

Option 1 : Créer un lien d’ancrage à l’aide d’un bouton ou d’une image

Veuillez suivre ces étapes pour créer un bouton ou une image sur lequel les utilisateurs peuvent cliquer pour faire défiler vers le bas jusqu'à une partie spécifique de votre page. Ces instructions s'appliquent à l'élément Bouton, mais peuvent également être utilisées pour les éléments Bannière et Image.

Étape 1 : Allez dans Administration Shopify > Applications et sélectionnez Générateur de pages GemPages pour accéder Tableau de bord GemPagesAccédez à la section Pages et choisissez votre modèle préféré pour accéder à l'éditeur.

Étape 2 : Faites glisser un Bouton un élément sur votre page.

Étape 3 : Cliquez sur le bouton pour afficher la configuration dans la barre latérale gauche. Activez le bouton « Lien ».

Étape 4 : Sélectionner l'action Après clic : choisissez une action qui se déclenche lorsque le lien est cliqué :

• Ouvrir la page: Ouvrir une autre page/URL.
• Faites défiler jusqu'à: Faites défiler jusqu'à une section spécifique de la page.
• Ouvrir une fenêtre contextuelle: Ouvrir une fenêtre contextuelle spécifique.
• Envoyer un mail:Envoyer un e-mail à une adresse e-mail spécifique.
• Faire un appel téléphonique:Effectuez un appel téléphonique lors de la navigation sur mobile ou tablette.

Dans ce cas, nous choisirons Faites défiler jusqu'à.

Étape 5 : Collez le Identifiant de section vous avez copié précédemment, ou sélectionnez une destination dans la liste.

Étape 6 : Frappez le bleu Enregistrer bouton. Ensuite, appuyez sur Enregistrer et Publier pour vérifier le résultat sur la page en direct. 

Votre bouton défile désormais en douceur jusqu'à la section lorsque vous cliquez dessus.

Option 2 : Créer un lien d’ancrage à l’aide de texte (texte d’ancrage)

Si vous préférez utiliser des liens textuels plutôt que des boutons ou des images, vous pouvez créer des liens d'ancrage directement dans les éléments de texte.

Étape 1: Dans le Tableau de bord GemPages, ouvrez votre modèle et entrez le Éditeur.

Étape 2: Dans le Éditeur, faites glisser un élément textuel sur votre page, par exemple un Élément d'en-tête.

Étape 3:Sélectionnez le texte auquel vous souhaitez ajouter un lien d'ancrage, déclenchant le panneau de texte en ligne pour une personnalisation supplémentaire.

Étape 4:Cliquez sur l'icône de la chaîne pour révéler un URL personnalisée champ.

Étape 5: Collez le Identifiant de section de la destination dans le champ et cliquez sur Lien vers cette URL.

Étape 6: Enregistrer et Publier la page pour vérifier le résultat sur votre page en direct.

Questions fréquentes

1. Puis-je créer un lien d'ancrage directement vers un élément (par exemple, un bouton ou une image) ?

Actuellement, les liens d'ancrage dans GemPages ne fonctionnent qu'avec sections or rangées, pas avec des éléments individuels.

Si vous souhaitez créer un lien direct vers un élément, placez-le dans une ligne. Copiez ensuite la classe de la ligne (et convertissez-la en identifiant) pour l'utiliser comme destination de défilement.

2. Pourquoi mon lien d'ancrage ne défile-t-il pas jusqu'au bon élément ?

La plupart du temps, cela est dû au fait que l'élément ne se trouve pas dans une section ou une ligne. Assurez-vous que l'élément cible est bien inclus dans une ligne et utilisez l'ID de section de cette ligne pour un défilement fluide.

3. Puis-je utiliser des liens d’ancrage pour des fenêtres contextuelles ou des URL externes ?

Non. Les liens d'ancrage sont conçus uniquement pour le défilement au sein d'une même page. Pour des actions telles que l'ouverture d'une fenêtre contextuelle ou la création d'un lien vers une page externe, utilisez les options correspondantes dans le menu « Après le clic ».

4. Puis-je faire défiler un bouton jusqu'au bas de ma page ?