Aperçu des composants - Aide Webflow

Utilisez les composants pour gérer les mises en page et le contenu récurrents plus efficacement sur votre site.

Les composants vous donnent le pouvoir de créer des blocs personnalisables à partir d'éléments et d'éléments enfants pour maintenir un flux de travail de conception cohérent, efficace et évolutif. Vous pouvez réutiliser ces blocs sur votre site et les modifier en un seul endroit pour éviter de réviser individuellement chaque mise en page récurrente.

Comment créer un composant

Vous pouvez créer des composants visuellement dans Webflow, ou importer des composants existants à partir d'une base de code externe avec DevLink. Cette section est axée sur le développement visuel.

Vous pouvez créer un composant à partir d'un élément ou d'un groupe d'éléments, et choisir si chaque instance est identique sur votre site ou permet des modifications de son contenu, de sa mise en page ou de son style :

• Contenu et design identiques par instance — créez un composant pour les mises en page récurrentes (par exemple, barres de navigation et pieds de page) à réutiliser sur votre site. Toute modification du contenu ou du design met automatiquement à jour chaque instance du composant.
• Contenu unique par instance — créez un composant avec une mise en page et un design cohérents, mais permettez à chaque instance d'avoir un contenu différent (par exemple, une mise en page de section héroïque qui peut avoir un texte, des images ou des vidéos uniques par instance) en utilisant des propriétés et des emplacements de composant.
• Différentes variantes de style par instance — créez un composant avec des options de style et de mise en page prédéfinies (par exemple, boutons pleins et contours, ou mises en page de cartes horizontales et verticales). Les variantes de style de composant vous permettent de personnaliser le design de chaque instance sans avoir besoin de créer des composants séparés.

Pour créer un composant :

1. Sélectionnez l'élément que vous souhaitez transformer en composant
2. Ouvrez le panneau des composants, le panneau de style ou le panneau des paramètres de l'élément
3. Cliquez sur l'icône “créer un composant” en haut du panneau
4. Donnez un nom et une description optionnelle à votre composant et cliquez sur Créer

Vous pouvez également dupliquer un composant existant en sélectionnant le composant, en cliquant sur les points "plus d'options" et en choisissant Dupliquer.

Vous serez à l'intérieur du composant principal après avoir créé un composant — ce qui signifie que toute modification du composant principal se répercute sur toutes les instances de ce composant. À tout moment, vous pouvez entrer dans le composant principal sur n'importe quelle instance de composant en :

• Double-cliquant sur l'instance de composant
• Clic droit sur l'instance et en cliquant sur Modifier le composant
• Sélectionnant l'instance et en cliquant sur l'icône "crayon" dans l'étiquette
• Sélectionnant l'instance et en cliquant sur l'icône "clé" en haut à droite du panneau droit

En savoir plus sur la modification du composant principal.

Comment utiliser et réutiliser un composant

Une fois que vous avez créé un composant, vous pouvez le réutiliser n'importe où sur votre site :

1. Ouvrez le panneau des composants
2. Survolez un composant pour voir un aperçu
3. Cliquez et faites glisser le composant souhaité vers n'importe quelle page de votre site
4. Déposez l'instance de composant directement sur le canevas ou dans le Navigateur

Lorsque vous sélectionnez une instance de composant, elle sera mise en surbrillance et entourée en vert. Ouvrez le panneau des composants pour voir combien de fois chacun de vos composants a été utilisé sur votre site.

Pour voir la hiérarchie des éléments d'un composant dans le panneau Navigateur, maintenez Option + double-cliquez (sur Mac) ou maintenez Alt + double-cliquez (sur Windows) sur le composant, ou cliquez sur l'icône "modifier le composant principal". Vous ne pourrez voir la hiérarchie des éléments du composant qu'à partir du composant principal (pas à l'intérieur d'une instance de composant).

Comment modifier un composant

Explorons les différentes façons d'interagir avec et de modifier un composant :

• Modifier le composant principal
• Propriétés, emplacements et variantes de style du composant
• Créer des variantes de style de composant
• Gérer la propriété de variante
• Changer la variante d'une instance de composant
• Réorganiser, renommer, dupliquer ou supprimer des variantes de style de composant
• Quitter le composant principal
• Modifier des composants dans l'éditeur
• Changer le nom ou la description d'un composant
• Grouper des composants
• Supprimer un composant

Modifier le composant principal

Pour apporter les mêmes modifications à toutes les instances d'un composant, vous devez modifier le composant principal. Vous pouvez modifier le composant principal sur n'importe quelle instance de composant en :

• Double-cliquant sur l'instance de composant sur le canevas
• Maintenant Option + double-cliquant (Mac) ou Alt + double-cliquant (Windows) sur l'instance dans le Navigateur
• Effectuant un clic droit sur l'instance et en cliquant sur Modifier le composant
• Sélectionnant l'instance et en cliquant sur l'icône “modifier le composant” dans l'étiquette
• Sélectionnant l'instance et en cliquant sur l'icône “modifier le composant” en haut du panneau droit

Les modifications apportées au composant principal affecteront chaque instance de composant (sauf si cette instance de composant a des propriétés appliquées à des éléments spécifiques au sein du composant). Lors de la modification du composant principal, vous pouvez changer la structure et l'ordre des éléments pour affecter simultanément toutes les instances de composant sur votre site.

Propriétés, emplacements et variantes de style du composant

Les propriétés (props), emplacements et variantes de style du composant vous permettent de créer des configurations uniques sur chaque instance d'un composant :

• Props — connectez les paramètres d'élément individuels dans le composant principal (par exemple, texte, liens, images ou vidéos) aux props. Cela vous permet de personnaliser ces paramètres sur chaque instance sans changer la structure ou le design global du composant. Les props peuvent également être connectés à des champs CMS pour extraire dynamiquement du contenu de vos collections CMS.
• Emplacements — les emplacements sont des éléments que vous pouvez placer dans des composants existants qui agissent comme des espaces réservés pour d'autres composants. Cela vous permet de construire des composants de manière modulaire, où chaque instance peut inclure différents composants dans l'emplacement.
• Variantes de style — définissez plusieurs options de design pour un seul composant, vous permettant d'adapter son apparence à différents cas d'utilisation. Par exemple, vous pouvez proposer des variantes de style comme des boutons pleins ou en contour, ou des mises en page de cartes horizontales et verticales.

Créer des variantes de style de composant

Vous pouvez créer des variantes d'un composant avec différentes mises en page, couleurs, styles de police, etc. (par exemple, des boutons pleins ou en contour, ou des mises en page de cartes horizontales et verticales) et choisir quelle variante utiliser pour chaque instance de votre composant sur votre site.

Pour créer une variante de style de composant :

1. Modifiez le composant principal
2. Allez dans le panneau de style
3. Cliquez sur l'icône “variantes de composant” dans le sélecteur de style
4. Cliquez sur l'icône “plus”
5. Donnez un nom unique à la variante
6. Appuyez sur Entrée/Retour pour confirmer

Gérer la propriété de variante

Lorsque vous créez une variante de style de composant, une propriété de variante est automatiquement créée pour ce composant. Vous pouvez changer le nom de la propriété de variante, l'ajouter à un groupe de propriétés et définir une variante par défaut pour le composant dans le panneau des propriétés.

Pour changer le nom de la propriété de variante :

1. Modifiez le composant principal
2. Allez dans le panneau des propriétés
3. Cliquez sur la propriété de variante
4. Entrez un nom de propriété unique
5. Appuyez sur Entrée/Retour pour confirmer

Pour ajouter la propriété de variante à un groupe de propriétés :

1. Modifiez le composant principal
2. Allez dans le panneau des propriétés
3. Cliquez sur la propriété de variante
4. Sélectionnez un groupe ou entrez un nom unique pour créer un nouveau groupe
5. Cliquez sur Créer ou appuyez sur Entrée/Retour pour confirmer

Définir une variante par défaut pour un composant :

1. Modifiez le composant principal
2. Allez dans le panneau des propriétés
3. Cliquez sur la propriété de variante
4. Choisissez une variante dans le menu déroulant des valeurs par défaut

Changer la variante d'une instance de composant

Comme pour d'autres propriétés de composant, vous pouvez choisir la variante de style pour chaque instance d'un composant. Pour changer la variante d'une instance de composant :

1. Cliquez une fois sur le composant pour ouvrir le panneau des propriétés
2. Choisissez la variante pour cette instance dans le menu déroulant des variantes

Réorganiser, renommer, dupliquer ou supprimer des variantes de style de composant

En mode design, vous pouvez gérer les variantes de style de composant (réorganiser, renommer, dupliquer ou supprimer des variantes).

Pour réorganiser les variantes d’un composant :

1. Modifiez le composant principal
2. Allez dans le panneau de style
3. Cliquez sur l’icône “variantes de composant” dans le sélecteur de style
4. Cliquez et faites glisser une variante pour la déplacer à une nouvelle position

Pour renommer une variante :

1. Modifiez le composant principal
2. Allez dans le panneau de style
3. Cliquez sur l’icône “variantes de composant” dans le sélecteur de style
4. Survolez la variante et cliquez sur l’icône “plus d’options”
5. Cliquez sur Renommer
6. Entrez un nouveau nom de variante unique
7. Appuyez sur Entrée/Retour pour confirmer

Pour dupliquer une variante :

1. Modifiez le composant principal
2. Allez dans le panneau de style
3. Cliquez sur l’icône “variantes de composant” dans le sélecteur de style
4. Survolez la variante et cliquez sur l’icône “plus d’options”
5. Cliquez sur Dupliquer
6. Entrez un nouveau nom de variante unique
7. Appuyez sur Entrée/Retour pour confirmer

Pour supprimer une variante :

1. Modifiez le composant principal
2. Allez dans le panneau de style
3. Cliquez sur l’icône “variantes de composant” dans le sélecteur de style
4. Survolez la variante et cliquez sur l’icône “plus d’options”
5. Cliquez sur Supprimer
6. Cliquez sur Supprimer dans la fenêtre contextuelle pour confirmer

Quitter le composant principal

Une fois que vous avez terminé de modifier le composant principal, vous pouvez quitter le composant principal en :

• Cliquant sur la flèche “retour” dans le coin supérieur gauche du Designer
• Cliquant en dehors du composant sur la toile
• Appuyant sur Échap sur votre clavier

Modifier les composants dans l'Éditeur

Si vous avez invité des éditeurs de contenu à mettre à jour le contenu de votre site dans l'Éditeur, toutes les modifications qu'ils apportent aux éléments de composant qui ne sont pas modifiés avec une propriété de composant et qui sont cohérents dans toutes les instances, s'appliqueront à toutes les autres instances.

Alternativement, si l'éditeur de contenu apporte des modifications aux éléments de composant qui sont modifiés via une propriété de composant, ces modifications ne s'appliqueront qu'à l'instance de composant qu'ils éditent.

Changer le nom ou la description d'un composant

Pour changer le nom ou la description d'un composant :

1. Ouvrez le panneau des composants
2. Survolez un nom de composant et cliquez sur les points "plus d'options" qui apparaissent
3. Cliquez sur Modifier les paramètres
4. Apportez vos modifications et Enregistrez

Renommer une instance de composant

Vous pouvez renommer des instances de composant individuelles pour les identifier plus facilement — cela est particulièrement utile lorsque vous réutilisez le même composant plusieurs fois sur une page.

Pour renommer une instance de composant :

• Dans le Navigateur ou en haut du panneau de droite :

1. Double-cliquez sur le nom du composant
2. Tapez le nouveau nom
3. Appuyez sur Entrée ou cliquez ailleurs pour enregistrer votre nom personnalisé

• Sur le canevas :

1. Faites un clic droit sur l'instance de composant
2. Cliquez sur Renommer
3. Tapez le nouveau nom
4. Appuyez sur Entrée ou cliquez ailleurs pour enregistrer votre nom personnalisé

Pour réinitialiser le nom au nom original du composant, supprimez le nom personnalisé lors du renommage ou faites un clic droit sur l'instance dans le Navigateur ou sur le canevas et cliquez sur Réinitialiser le nom.

Grouper les composants

Pour organiser vos composants en groupes :

1. Ouvrez le panneau des composants
2. Survolez un nom de composant et cliquez sur les points "plus d'options" qui apparaissent
3. Choisissez Modifier les paramètres
4. Choisissez un groupe existant dans le menu déroulant Groupe, ou tapez pour créer un nouveau groupe

Pour renommer ou dissocier un groupe de composants, survolez le titre du groupe et cliquez sur les points "plus d'options".

Supprimer un composant

Pour supprimer complètement un composant :

1. Retirez ou dissociez toutes les instances du composant de votre site
2. Ouvrez le panneau Composants
3. Survolez un nom de composant et cliquez sur les points "plus d'options" qui apparaissent
4. Choisissez Modifier les paramètres
5. Cliquez sur Supprimer et confirmez

Comment dissocier une instance de composant de son composant principal

Pour dissocier une instance de composant et y apporter des modifications indépendamment du composant principal :

1. Faites un clic droit sur n'importe quel élément de composant dans l'instance que vous souhaitez dissocier
2. Cliquez sur Dissocier l'instance

Une fois dissociée, si vous modifiez toute autre instance liée de ce composant dans votre conception, cela ne changera pas l'instance dissociée.

Partager des composants entre sites avec les Bibliothèques

Vous pouvez partager des composants natifs et de code entre sites dans un Espace de travail avec les Bibliothèques. Cela peut accélérer votre flux de travail et améliorer votre système de conception en fournissant un seul endroit pour mettre à jour les composants utilisés sur plusieurs sites dans votre Espace de travail.

Retour à l'aide de webflow