Composants Webflow : créer des components personnalisés (2026)

Les composants personnalisés Webflow sont la base d'un site qu'on peut faire évoluer sans tout reprendre. Les étapes ci-dessous suivent la présentation officielle des composants Webflow (mise à jour le 2 septembre 2026).

Qu'est-ce qu'un composant Webflow ?

Un composant est un groupe d'éléments enregistré comme modèle. Le composant principal (main component) contient la structure et les styles. Chaque copie placée sur une page est une instance. Modifier le composant principal met à jour toutes les instances ; modifier une instance n'affecte qu'elle.

Exemple classique : la barre de navigation. Construite une fois en composant, elle s'affiche sur toutes les pages, et l'ajout d'un lien se fait en un seul endroit.

Pourquoi utiliser des composants dans Webflow ?

• Cohérence : un bouton, une carte ou un en-tête gardent le même rendu partout.
• Maintenance : une correction se fait une fois, pas sur chaque page.
• Autonomie des équipes : avec des propriétés bien définies, une personne du marketing peut assembler une page sans casser la mise en page.
• Partage : les bibliothèques diffusent les mêmes composants sur plusieurs sites d'un Workspace.

Comment créer un composant dans Webflow

À partir d'éléments existants

1. Sélectionnez l'élément ou le groupe d'éléments (par exemple la section qui contient votre carte).
2. Ouvrez le panneau Components : Cmd + Maj + A sur Mac, Ctrl + Maj + A sur Windows.
3. Cliquez sur l'icône de nouveau composant, puis sur Convert selection.
4. Nommez le composant, rangez-le dans un groupe et ajoutez une description si besoin.
5. Vérifiez les propriétés suggérées par Webflow : renommez-les ou décochez celles qui sont inutiles, puis cliquez sur Create.

À partir de zéro

Dans le panneau Components, choisissez Create blank. Le Component Canvas s'ouvre avec un simple div comme conteneur, dont vous pouvez changer la balise dans Element settings. Cette méthode est idéale pour construire une bibliothèque de composants avant les pages.

Modifier un composant : principal ou instance ?

• En contexte : double-cliquez sur une instance (ou clic droit, Edit component). Vous modifiez le principal, visible dans la page.
• Dans le Component Canvas : clic droit, Open component, pour travailler sur le composant isolé.
• Sortir : flèche de retour à côté du nom du composant, ou touche Échap.

Le panneau Components indique combien de fois chaque composant est utilisé. Un composant ne peut être supprimé que s'il n'a plus aucune instance.

Les propriétés (props) : personnaliser chaque instance

Une propriété est une valeur du composant que chaque instance peut remplacer. La documentation Webflow sur les propriétés de composants liste ces types :

Pour créer une propriété :

1. Ouvrez le composant principal (double-clic sur une instance).
2. Ouvrez le panneau Properties (touche K), cliquez sur le plus et choisissez un type.
3. Donnez un nom clair et une valeur par défaut, et rangez la propriété dans un groupe si le composant en a beaucoup.
4. Reliez-la : sélectionnez l'élément, ouvrez Element settings, cliquez sur le point violet à côté de la valeur et choisissez la propriété. Une propriété non reliée n'a aucun effet.

Une instance placée dans une page modèle CMS peut relier ses propriétés aux champs de la Collection (texte, image, lien, date, nombre, référence...). Une même carte sert alors pour tous les articles.

Les variantes : plusieurs styles pour un même composant

Les variantes déclinent un composant en plusieurs versions : bouton plein ou contour, carte claire ou sombre. Dans le composant principal, cliquez sur le plus à côté de Variants dans le Navigator, puis nommez la variante. Les styles modifiés dans la variante de base s'appliquent à toutes ; ceux modifiés dans une variante restent propres à elle. Un composant n'a qu'une propriété de variante, mais autant de variantes que nécessaire, selon la documentation sur les variantes de composants.

Les slots : insérer d'autres composants

Un slot est un emplacement réservé dans un composant, où l'on dépose d'autres composants. Exemple : une section à deux colonnes dont la colonne de droite accepte au choix une image, un formulaire ou une vidéo. La structure reste verrouillée, le contenu reste libre.

Comment délier une instance (unlink) ?

Clic droit sur un élément de l'instance, puis Unlink instance. L'instance devient un groupe d'éléments ordinaires : les propriétés deviennent des réglages fixes, les variantes des styles, les slots des éléments. Elle ne recevra plus les mises à jour du composant. Pour garder l'original intact, dupliquez l'instance et déliez la copie. Les instances placées dans un texte enrichi ne peuvent pas être déliées.

Partager des composants entre plusieurs sites

Les bibliothèques (Libraries) partagent des composants entre les sites d'un même Workspace, avec une mise à jour centralisée. Elles accueillent aussi les code components (composants React importés par une équipe technique) et les composants code générés par l'IA. Le nombre de bibliothèques dépend du plan Workspace : une seule sur Core, illimité sur Agency.

Bonnes pratiques pour des composants Webflow durables

• Nommez par fonction : Card / Article plutôt que Bloc bleu. Utilisez les groupes et les descriptions du panneau.
• Exposez peu de propriétés : seulement ce qui change vraiment d'une instance à l'autre. Trop de réglages rend le composant fragile.
• Préférez les variantes aux duplications : un bouton avec trois variantes vaut mieux que trois composants bouton.
• Masquez les composants techniques : l'option de visibilité du panneau permet de les cacher aux rôles Marketer.
• Testez chaque breakpoint : un composant est réutilisé dans des contextes variés, son responsive doit tenir partout.

Pour structurer une bibliothèque complète, la logique de l'atomic design aide à découper les éléments, et la méthode Client-First aide à nommer les classes qu'ils contiennent.

Chez Synqro, Webflow Premium Partner depuis 2019, nous pensons les composants dès la maquette, pour que l'équipe du client puisse ensuite assembler de nouvelles pages seule. Pour un site complet (8 à 12 semaines) ou une landing page (2 semaines), contactez notre agence Webflow.