Dans cet article, nous allons découvrir comment utiliser les propriétés des composants dans Webflow pour simplifier la gestion et la personnalisation des éléments réutilisables sur votre site. Grâce à cette fonctionnalité, vous pourrez modifier des éléments comme les images, le texte ou même la visibilité d'un composant, sans affecter les autres occurrences de ce même composant sur votre page.

Qu’est-ce qu’un Composant dans Webflow ?

Un composant dans Webflow est un élément réutilisable que vous pouvez dupliquer et personnaliser sur différentes pages. Au lieu de recréer des éléments identiques, vous pouvez en faire un composant que vous modifierez à un seul endroit, ce qui est très pratique pour les designs cohérents.

Cependant, parfois vous souhaitez personnaliser des éléments individuels d'un composant sans affecter les autres. C'est ici qu'interviennent les propriétés des composants.

Étape 1 : Créer un Composant dans Webflow

1. Sélectionnez l’élément que vous souhaitez transformer en composant (comme une carte ou une section).
2. Faites un clic droit et sélectionnez Create Component, ou utilisez le raccourci CMD + K.
3. Donnez un nom à votre composant, par exemple Benefit Card.

Maintenant, vous avez créé un composant que vous pouvez dupliquer et utiliser à différents endroits.

Étape 2 : Ajouter des Propriétés aux Composants

Pour personnaliser chaque instance de votre composant, il est important d'ajouter des propriétés. Voici comment ajouter des propriétés à des éléments spécifiques de votre composant.

Ajouter une propriété pour l’image

1. Sélectionnez l’image dans votre composant.
2. Rendez-vous dans l’onglet Settings et cliquez sur le petit bouton violet à côté du champ Image.
3. Sélectionnez Create and Connect New Property et donnez un nom à cette propriété, par exemple Image.
4. Vous pouvez également définir une image par défaut.

Ajouter une propriété pour le texte alternatif

1. Toujours dans Settings, ajoutez une propriété pour le texte alternatif en suivant la même démarche.
2. Nommez cette propriété Texte Alternatif.

Ajouter une propriété pour le titre et le paragraphe

1. Sélectionnez l'élément texte du titre et cliquez sur Create and Connect New Property.
2. Donnez-lui un nom, par exemple Titre.
3. Faites la même chose pour le paragraphe en le nommant Paragraphe.

Ajouter une propriété de visibilité pour l’image

1. Pour donner la possibilité de masquer ou afficher l’image, sélectionnez-la et créez une nouvelle propriété appelée Image Visibility.
2. Cette option vous permettra de cacher l’image selon vos besoins.

Étape 3 : Modifier les Propriétés des Composants

Une fois les propriétés créées, voici comment les utiliser :

1. Dupliquez votre composant sur la page.
2. Sélectionnez une instance du composant et modifiez les propriétés via le panneau de réglages (image, texte, titre, etc.).
3. Chaque modification affectera uniquement cette instance sans impacter les autres composants.

Étape 4 : Réorganiser les Propriétés

Vous pouvez également réorganiser l’ordre d’affichage des propriétés pour faciliter la gestion :

1. Rentrez dans le composant en cliquant dessus.
2. Rendez-vous dans l’onglet Props pour visualiser les propriétés.
3. Glissez-déposez les propriétés dans l’ordre souhaité.

‍

En utilisant les propriétés des composants dans Webflow, vous gagnez en flexibilité et en efficacité. Vous pouvez réutiliser le même composant tout en personnalisant chaque instance de manière unique, que ce soit pour les images, les textes, ou même la visibilité de certains éléments. Testez ces fonctionnalités et laissez libre cours à votre créativité !