Créer un lien raccourci ou un lien d’ancrage dans Webflow est une fonctionnalité simple mais puissante qui améliore l’expérience utilisateur en permettant de naviguer rapidement vers des sections spécifiques d’une page. Dans cet article, nous allons voir comment mettre en place un lien raccourci dans Webflow en quelques étapes.

Étapes pour créer un lien raccourci dans Webflow

Voici les étapes détaillées pour créer un lien raccourci vers une section spécifique de votre page Webflow :

1. Ajouter un ID à la section cible

La première étape consiste à ajouter un identifiant (ID) à la section que vous souhaitez cibler. Cela permettra à votre lien de savoir exactement où diriger l'utilisateur.

• Sélectionnez la section vers laquelle vous voulez diriger votre lien.
• Allez dans le panneau des paramètres (Settings).
• Dans la section ID, ajoutez un identifiant unique et explicite, par exemple section-programme. Assurez-vous que cet ID est unique pour éviter des conflits lors de la navigation.

2. Créer le lien vers la section

Maintenant que la section cible a un ID, vous devez créer un lien dans votre menu ou n'importe quel bouton.

• Sélectionnez le lien ou le bouton que vous souhaitez transformer en lien raccourci.
• Cliquez sur l'icône de réglage (la petite roue crantée) pour ouvrir les paramètres du lien.
• Sous la section Link Settings, sélectionnez Page Section.
• Choisissez l’ID de la section que vous avez défini précédemment dans la liste déroulante (ici, section-programme).

3. Tester le lien dans la preview

Une fois que tout est configuré, vous pouvez tester votre lien.

• Allez en mode aperçu (Preview) dans Webflow.
• Cliquez sur le lien que vous venez de créer.
• Vous devriez être automatiquement dirigé vers la section définie avec l’ID.

Astuce pour éviter que le titre soit coupé

Il peut arriver que le titre de la section cible soit coupé après le défilement, notamment si vous avez un menu fixe. Voici comment résoudre ce problème :

• Ajoutez un peu de padding au sommet de la section pour décaler le contenu. Cela garantira que le titre ne soit pas caché sous le menu ou coupé.
• Ajustez le padding selon vos besoins (par exemple, 4rem) pour que le défilement s’arrête juste au-dessus du titre.

Pourquoi utiliser des liens raccourcis ?

• Amélioration de l’expérience utilisateur : Les utilisateurs peuvent accéder rapidement aux informations qui les intéressent sans avoir à faire défiler manuellement.
• Navigation fluide : Parfait pour les pages longues ou les landing pages où la navigation rapide est cruciale.
• Design épuré : Pas besoin de charger des pages supplémentaires, ce qui rend l'expérience de navigation plus rapide et plus fluide.