Comment réaliser une navigation progressive par point sur Webflow ?

Dans cet article, nous allons explorer comment créer une navigation par points sur Webflow. Cette fonctionnalité, souvent utilisée sur les landing pages, permet de naviguer rapidement entre différentes sections de la page en cliquant sur des points fixes situés sur le côté droit de l'écran. Voici un guide étape par étape pour y parvenir.

Qu'est-ce qu'une Navigation par Points ?

Une navigation par points est un élément de design fixe sur le côté d'une page web, qui permet aux utilisateurs de se déplacer rapidement entre les sections principales de la page. Chaque point correspond à une section spécifique, et lorsqu'on clique dessus, la page défile automatiquement vers cette section. De plus, les points se remplissent d'une couleur spécifique lorsqu'on atteint la section associée, offrant ainsi un repère visuel clair.

Étape 1 : Préparation du Projet

Pour commencer, ouvrez votre projet Webflow et assurez-vous que votre page est prête pour ajouter la navigation par points. Si votre projet n'a pas encore cette fonctionnalité, suivez les étapes ci-dessous :

1. Ajout de la Div de Navigation :
   • Sélectionnez le body de votre page et utilisez le raccourci Cmd+E pour ouvrir la barre de recherche.
   • Ajoutez une div et nommez-la nav.component.
   • Changez sa position en fixed et positionnez-la à droite (right: 0), afin qu'elle reste fixe lors du défilement.

Étape 2 : Création des Points de Navigation

2. Ajout des Liens :
   • À l'intérieur de la div nav.component, ajoutez plusieurs link blocks en utilisant Cmd+E.
   • Nommez chaque lien nav-link et définissez leur taille (largeur et hauteur) à 1rem pour créer des petits points.
   • Appliquez un style de bordure solide avec une largeur de 1px et transformez les liens en cercles en réglant le border-radius à 100%.
3. Ajout de Padding et Centrement :
   • Ajoutez du padding de 1rem autour de chaque lien pour créer de l'espace interne.
   • Utilisez Flexbox pour centrer les liens verticalement dans la div nav.component. Réglez display: flex, flex-direction: column, et justify-content: center.

Étape 3 : Liaison des Points aux Sections

4. Ajout des ID aux Sections :
   • Pour chaque section de votre page que vous souhaitez lier à un point de navigation, attribuez un ID unique. Par exemple, Hero section, About section, Customers section, FAQ section.
5. Liaison des Liens aux Sections :
   • Pour chaque nav-link, utilisez les paramètres de lien pour sélectionner la section correspondante en utilisant l'ID que vous avez attribué précédemment.

Étape 4 : Stylisation et Interaction

6. Stylisation des Points Actifs :
   • Lorsque vous êtes dans une section spécifique, le lien correspondant doit se colorer pour indiquer la position actuelle. Pour ce faire, sélectionnez le lien actif (current) et appliquez la couleur de fond souhaitée.

Étape 5 : Test et Finalisation

7. Test de la Navigation :
   • Activez le mode preview et testez les liens de navigation. Assurez-vous que chaque clic sur un point défile correctement vers la section associée et que le point se colore lorsque la section est active.
8. Finalisation et Ajustements :
   • Ajustez les espaces entre les points en utilisant la propriété CSS gap pour créer un écart équitable entre chaque lien.
   • Révisez l'apparence et le comportement de la navigation pour s'assurer qu'elle fonctionne parfaitement sur tous les appareils.

Félicitations ! Vous avez créé une navigation par points efficace et élégante sur Webflow. Cette fonctionnalité améliore non seulement l'expérience utilisateur mais ajoute également une touche de professionnalisme à votre site. Pour aller plus loin dans l'apprentissage de Webflow et découvrir d'autres astuces avancées, n'hésitez pas à rejoindre notre plateforme de formation, CORIACE. Vous y trouverez des cours complets et des projets pratiques pour maîtriser Webflow de A à Z.

Rejoignez-nous sur CORIACE et développez vos compétences Webflow dès aujourd'hui !