Les composants (anciennement symboles) sont des éléments dont la structures est synchronisée sur toutes les pages. Ils permettent donc une mise à jour rapide et facile des éléments liés
🔥 Pour ceux qui sont des utilisateurs de Figma, la logique n’est pas aussi poussé que dans ce dernier, désolée !
Il est important de noter que les composants sont idéals pour les éléments répétitifs comme les barres de navigation, les pieds de page et les boutons. Cela évite de devoir modifier chaque élément individuellement (par exemple quand vous souhaitez ajouter un nouveau lien dans votre barre de navigation), ce qui peut prendre beaucoup de temps et d'énergie. Ils réduisent ainsi le nombre de tâches répétitives et vous aidant en augmentant la cohérence du design sur l'ensemble du site.
En somme, les composants Webflow sont un outil puissant pour la création de sites Web plus efficaces et plus faciles à maintenir, il ne doivent pas être laissés de côté.
Identifier les composants dans mon site
Les composants et éléments qui les composent sont entourés en vert dans votre designer. Vous pouvez aussi les repérer dans l’architecture de votre site par ce logo bien identifiable.
Enfin, les
Des petites modifications d’une page à l’autre
Dans un composant, vous avez la possibilité de créer des “fields” (champs) que vous pourriez faire varier d’une instance à l’autre de votre composant.
📌 Une instance est une “copie” du composant. Chaque fois que vous ajouter votre composant à un nouvel endroit de votre site, même dans si c’est dans la même page,
Avec ces champs, vous pourrez modifier
- Un texte
- Un lien
- Une image
Attention cependant, il y a quelques petites choses qui ne pourront pas être changées avec ces champs, comme les couleurs ou l’ordre des éléments. Dans ce cas là, il sera nécessaire de créer un nouveau composant.
Quelques petits exemples pratiques :
- si vous souhaitez avoir un bouton bleu et un bouton rose, il faudra vous créer deux composants différents un pour chacune des couleurs
- si vous souhaitez utiliser votre bouton bleu, une fois avec le texte “appelez-nous” et une autre fois avec le texte “prendre rendez-vous” alors dans ce cas là vous pourrez utiliser le même composant !
→ Envie de savoir comment créer et modifier des composants ? Rendez-vous dans la formation “Développeurs” !
Les modifications de structure
Depuis peu, Webflow a aussi ajouté la possibilité de venir modifier aussi les éléments présents dans votre composant d’une page à l’autre avec l’option “visibilité”.
Vous pourrez dons créer des variantes encore un peu plus poussées de vos composants en cacher un bouton sur une page en particulier et en l’affichant sur une autre, par exemple.
💡 Attention cependant, cet élément sera encore présent dans votre page pour les robots, ceux qui viennent passer en revu votre site pour les moteurs de recherches afin de vous référencer.
Je vous invite donc à voir les chapitres sur le SEO pour faire attention à ne pas vous pénaliser !
En quoi est-ce différent des classes ? Elles sont aussi synchronisées sur toutes les pages non ?
Les classes et les composants sont deux fonctionnalités distinctes dans Webflow.
Les classes permettent de définir des styles pour un ou plusieurs éléments sur une page, tandis que les composants sont des éléments dont la structure est synchronisée sur toutes les pages.
Bien que les classes puissent être appliquées à plusieurs éléments, elles ne synchronise pas la structure (liste des éléments) de l’élément auquel elles sont appliquées. Cela signifie que si vous souhaitez modifier un élément sur toutes les pages, en ajoutant un texte ou une image par exemple, vous devrez modifier chaque élément individuellement. A contrario, si vous souhaitez changer la couleur de votre bouton, la classe sera suffisante, car dans ce cas, nous sommes sur un changement de design et non de structure.
En revanche, les composants permettent eux de synchroniser une structure, aussi complexe soit-elle.
Puissant mais à utiliser à bon escient !
Cependant, il est important de comprendre les limites des composants et de ne pas les considérer comme une solution universelle pour tous les problèmes de conception.
Dans certains cas, il peut être contre-productif de les utiliser. Par exemple, si une variation importante est nécessaire pour chaque instance de l'élément, il peut être plus efficace de créer chaque élément individuellement plutôt que d'utiliser un composant.
De même, si la conception de chaque page est très différente, l'utilisation de composants peut être moins pertinente.
En fin de compte, il est important de réfléchir à l'utilisation des composants en fonction des spécificités de chaque projet.
