1. Créer un nouveau projet sur Webflow
Avant de commencer à créer la nav bar, il est nécessaire de créer un nouveau projet sur Webflow. Pour cela, connecte-toi à ton compte Webflow, clique sur "New Project" et donne un nom à ton projet.
3. Ajouter la barre de navigation “intelligente” de Webflow
La prochaine étape consiste à faire glisser l’élément “navbar” dans ton panneau des éléments, dans la rubrique “components”. Cette barre de navigation est pré-construite et possèdes des options qui te permettront de l’adapter facilement en mobile. La barre de navigation est composée de différents éléments :
- L’élément “Brand” : L'espace de marque est situé à gauche de la barre de navigation et est utilisé pour afficher votre identité visuelle. C'est ici que vous pouvez ajouter votre logo, du texte ou toute autre indication de marque. Il est important de rendre cette zone reconnaissable et distinctive pour renforcer l'image de marque de votre entreprise.
- L’élément “Nav Menu” : Le menu de navigation est l'élément principal de la barre de navigation et se trouve à droite de la zone de marque. Il s'agit d'un élément parent qui contient tous les liens de navigation. Pour offrir une expérience utilisateur optimale, il est important de créer un menu de navigation clair et organisé. Assurez-vous de structurer vos liens de manière logique et cohérente.
- L’élément “Nav Links” : Les liens de navigation sont les liens textuels situés dans le menu de navigation. Ils sont généralement liés à différentes pages ou sections de votre site web. Il est important de choisir des libellés clairs pour chaque lien de navigation afin de guider efficacement vos utilisateurs vers le contenu qu'ils recherchent. Vous pouvez également utiliser des icônes pour aider à identifier les différents types de liens.
- L’élément “ Menu Buttons” : Le bouton de menu est un élément de la barre de navigation qui n'apparaît que sur les écrans étroits, tels que les smartphones ou les tablettes. Il te permet d'accéder au menu de navigation (et aux liens de navigation) lorsque l'espace horizontal est limité. Le bouton de menu doit être facilement identifiable pour permettre aux utilisateurs de naviguer rapidement et facilement.
4. Personnaliser la nav bar
Maintenant que la structure de la nav bar est en place, il est temps de la personnaliser en fonction de tes préférences. Pour cela, tu peux modifier la couleur de fond, la couleur du texte, la police d'écriture, etc.
Pour modifier ces éléments, clique sur la nav bar, puis clique sur "Style" dans la barre latérale droite. Tu peux alors modifier la couleur de fond en utilisant le sélecteur de couleurs, modifier la couleur du texte en utilisant la palette de couleurs et modifier la police d'écriture en sélectionnant une police dans la liste.
5. Ajouter des effets de survol
Pour rendre ta nav bar encore plus interactive, tu peux ajouter des effets de survol. Par exemple, tu peux changer la couleur du texte lorsqu'un lien est survolé avec la souris.
Pour ajouter un effet de survol, clique sur le lien que tu souhaites modifier, puis clique sur l’état "Hover" dans la barre latérale droite. Tu peux alors modifier la couleur du texte, la couleur de fond, la bordure, etc.
6. Ajouter un menu déroulant (méga-menu) sur Webflow
Si ton site comporte beaucoup de pages, il peut être utile d'ajouter un menu déroulant à ta nav bar. Pour cela, clique sur "Add Element" dans le conteneur de nav bar, puis sélectionne "Dropdown" et fais-le glisser à l’intérieur de l’élément “Nav menu”.
7. Ajouter la nav bar à toutes les pages du site
Maintenant que ta nav bar est créée, il est temps de l'ajouter à toutes les pages de ton site. Tout d’abord nous te conseillons de transformer ta navigation en composants. Cela te permettra de faire des changements qui s’appliqueront sur toutes les pages où tu aura placé ta “nav bar”. Pour cela, clique droit sur ta navigation et choisi l’option “Create a component”. Ensuite clique sur "Composants" dans la barre latérale gauche, puis sélectionne ta nav bar et fais-la glisser sur chaque page de ton site.
8. Tester la nav bar
Une fois que ta nav bar est ajoutée à toutes les pages de ton site, il est important de la tester pour t'assurer qu'elle fonctionne correctement. Teste chaque lien pour t'assurer qu'il pointe vers la bonne page, et vérifie que les effets de survol fonctionnent comme prévu.
9. Optimiser la nav bar pour le référencement naturel
Pour maximiser la visibilité de ton site web, il est important d'optimiser ta nav bar pour le référencement naturel. Pour cela, il est conseillé d'utiliser des mots-clés pertinents dans les titres de chaque page, et de les inclure dans les liens de ta nav bar. Il est surtout important de prioriser l’ordre de tes liens afin que Google puisse comprendre à qui il doit donner plus de poids. Si cela n’est pas fait, n’oublie d’ajouter un tag “Nav” au niveau des paramètres de ta navigation sur Webflow afin d’indiquer qu’il s’agit bien de ta navigation de site.
10. Conclusion
Félicitations, tu viens de créer une nav bar fonctionnelle et personnalisée pour ton site web sur Webflow ! En suivant ces étapes simples, tu peux créer une nav bar professionnelle et optimisée pour le référencement naturel en un rien de temps.
FAQs
Est-ce que je peux ajouter des icônes à ma nav bar sur Webflow ?
Oui, tu peux ajouter des icônes en utilisant le widget "Icon" dans la barre latérale gauche.
Est-ce que je peux personnaliser le style de ma nav bar pour chaque page de mon site ?
Oui, tu peux personnaliser le style de ta nav bar pour chaque page en utilisant les classes de style.
Est-ce que je peux ajouter une barre de recherche à ma nav bar sur Webflow ?
Oui, tu peux ajouter une barre de recherche en utilisant le widget "Search Field" dans la barre latérale gauche.
Est-ce que je peux créer une nav bar responsive sur Webflow ?
Oui, tu peux créer une nav bar responsive en utilisant les outils de responsive design de Webflow.
Est-ce que je peux ajouter des sous-menus à ma nav bar sur Webflow ?
Oui, tu peux ajouter des sous-menus en utilisant le widget "Dropdown" dans la barre latérale gauche.
Devenez expert Webflow avec notre formation 100% OFFERTE
Rejoignez notre formation d'initiation et maîtrisez les bases de l'outil
Devenez expert Figma avec à notre formation 100% OFFERTE
Rejoignez notre formation d'initiation et maîtrisez les bases de l'outil
.avif)
