Pourquoi utiliser une ancre?
Ces liens sont souvent utilisés pour permettre aux utilisateurs d'accéder rapidement à une partie spécifique d'une longue page web sans avoir à faire défiler tout le contenu.
Une meilleure expérience : une navigation simplifiée
Lorsque l'utilisateur clique sur le lien, la page se déplace automatiquement vers la section spécifiée par l'ancre, rendant la navigation plus facile et permettant un accès rapide à des parties spécifiques du contenu.
Les ancres servent donc à améliorer l'expérience utilisateur (UX) : on peut s'en servir comme une sous-navigation, un sommaire, un menu contextuel. Orienter le visiteur directement vers l'information qui l'intéresse permet d'améliorer son expérience.
Comment créer une ancre dans Webflow ?
Dans Webflow, il suffit :
Définir une section vers laquelle le lien pointe :
- Créer une div
- Dans les Settings de la div, on lui attribue le tag "Section"
- Toujours dans les Settings de la div, on lui attribue un ID
Créer le lien :
- Créer un lien : Text link ou Block link
- Dans les paramètres du lien, sélectionner lien vers une section
- Dans le menu déroulant, sélectionner la section
Les limites de l'ancre dans Webflow
L'accès à l'information est plus rapide cependant les paramètres par défaut de Webflow ne sont pas optimisés.
Cliquer sur un lien d'ancrage dans Webflow amène à la section ancrée en haut de la page ou juste en dessous de la barre de navigation. Ce paramètre n'est pas user friendly.
Comment utiliser une ancre pour garantir une bonne expérience ?
Pour optimiser l'utilisation des ancres dans Webflow on peut configurer deux aspects : le positionnement de la section dans la fenêtre de navigation. La vitesse du défilement.
Centrer verticalement la section
Pour centrer le positionnement de la section dans le fenêtre on a besoin d'un nouvel attribut HTML.
- Sélectionner la section
- Dans les Settings, créer un Custom attribute
- Donner lui le nom suivant Name = data-scroll
- Définir sa valeur suivante Value = mid
Gérer la vitesse de défilement du scroll automatique
Pour créer un défilement plus doux, on a besoin d'un nouvel attribut HTML.
- Sélectionner la div Body
- Dans les Settings, créer un nouveau Custom attribute
- Donner lui le nom suivant Name = data-scroll-time
- Sélectionner la section
- Dans les Settings, créer un nouveau Custom attribute
- Donner lui le nom suivant Name = data-scroll-time
- puis Définir sa valeur suivante Value = 1 et plus
Pour la valeur du scroll, 1 correspond à 1000 Ms. Il s'agit de la valeur par défaut de Webflow.
Tester plusieurs valeurs selon la longueur de la page jusqu'à trouver la valeur la plus agréable.
Comment créer un lien qui pointe vers la section d'une autre page ?
Généralement, pour créer un lien d'ancre, on utilise un élément HTML appelé "ancre" ou "balise d'ancre" (<a>). On spécifie l'URL de la page, suivi d'un hashtag (#), suivi du nom ou de l'identifiant de la section vers laquelle le lien doit diriger.
Si vous créer un lien depuis la "home page" vers la page "Notre équipe" pour pointer la section "Nos valeurs" par exemple, alors il faudra dans la page "Notre équipe" :
- Sélectionner la Div qui contient les éléments de la partie "Nos valeurs"
- Dans les Settings de la div, on lui attribue le tag "Section"
- Toujours dans les Settings de la section maintenant, on lui attribue ID "valeurs"
- Configurer votre lien sur la homepage : choisir url puis https://homepage.fr/notre-equipe#valeurs
NB : pour créer lien vers une section depuis une autre page, il faut choisir une URL. L'ancre ne permet de naviguer qu'au sein d'une même page.
