Comment utiliser les components sur Webflow ?

Les components sont des éléments essentiels à la création d'un site pour assurer la facilité de maintenance et mise à jour dans le temps. Néanmoins, les retours clients m'ont démontré que leur utilisation était loin d'être intuitive.

‍

Dans cet article, nous allons voir comment créer, mettre à jour et gérer les components Webflow pour en exploiter tout le potentiel.

Un component est un groupement de divers éléments. Sa structure dépendra de la manière dont il a été créé. Elle sera constituée de l'élément sélectionné au moment de la création et de tous ses éléments enfants (c'est-à-dire les élements qu'il contient).

Les components sont extrêmement pratiques pour toutes les structures récurrentes sur un site telles que :

• Les barres de navigations
• Les footer
• Les formulaires
• ...

En créant et utilisant ce type de structure, vous pourrez mettre à jour simultanément un ensemble sur l'intégralité de votre site. Cette technique diminue le risque d'erreur et d'oubli lorsque vous mettez à jour votre contenu.

Le processus est très simple. Il vous suffit de sélectionner une structure que vous souhaitez réutiliser à différents emplacements.

Dans mon cas, je choisis d'utiliser une section. Voici les étapes à suivre :

1. Sélectionnez l'élément à enregistrer.
2. Ouvrez l'onglet "component".
3. Cliquez sur "Create a new component".
4. Nommez votre component de manière à pouvoir le retrouver facilement.

‍

La fonctionnalité très puissante qui peut amener la confusion est la création de versions locales (par page ou section) du component. Il permet de garder et mettre à jour la structure tout en adaptant le contenu en fonction de la page sur laquelle il se trouve.

Pour créer ces versions, il nécessaire de paramétrer des "properties". Ces dernières peuvent concerner :

• Les textes
• Les images
• Les liens
• Les ID
• La visibilité d'un élément

Il faut donc définir quels sont les éléments de votre component que vous souhaitez faire varier d'une page à l'autre et créer la "property" associée.

‍

Voici les étapes à suivre :

1. Sélectionnez le component et cliquez sur "Edit component".
2. Sélectionnez l'élément que vous souhaitez faire varier.
3. Dans le panneau de réglage à droite, cliquez sur le petit bouton violet et créer votre property.
4. Pour sortir du mode éditeur du component, cliquez sur "Back to instance"

‍

‍

‍

‍
Une fois le paramétrage effectué, en sélectionnant votre component, vous pourrez voir sur la droite l'ensemble des champs modifiables localement.

‍

Il y a donc deux cas de figure pour mettre à jour un component. Le mettre à jour sur l'ensemble du site, en modifiant la version initiale, ou le mettre à jour localement en utilisant les "properties".

‍

Mettre à jour le component sur l'ensemble du site

Pour les modifications de la version initiale, vous devez accéder au component en cliquant sur "Edit component". Toutes les modifications que vous allez appliquer seront alors appliquées à toutes les instances.

Si vous avez créé des properties, alors vous devez les éditer en cliquant sur "properties settings". En changeant, l'image, le texte ou le lien dans cet onglet, vous changez la version par défaut. S'il n'existe pas une version locale, alors elle sera mise à jour avec cette nouvelle version.

‍

‍

Mettre à jour le component localement

Pour créer une version locale, il suffit de remplir les champs créés à l'étape précédente. Les modifications ne seront alors appliquées que sur l'élément que vous être en train de modifier.