Comment ajouter et utiliser un custom attribute dans Webflow ?

Introduction

Vous maîtrisez les bases de Webflow, vous créez de superbes designs, mais vous commencez à vous heurter à certaines limites natives de l'outil ? Vous souhaitez ajouter un système de filtres avancé, intégrer un espace membre ou simplement lier un script JavaScript spécifique à un bouton ? C'est là qu'entre en scène le fameux custom attribute (ou attribut personnalisé).

S'il peut paraître un peu technique au premier abord, l'attribut personnalisé est en réalité l'une des fonctionnalités les plus puissantes de Webflow. C'est la clé qui permet de faire le pont entre votre design visuel et des fonctionnalités avancées.

Dans cet article, nous allons démystifier ce terme et voir ensemble, étape par étape, comment ajouter un custom attribute à n'importe quel élément de votre site Webflow.

‍

Qu'est-ce qu'un custom attribute ?

Pour faire simple, imaginez qu'un élément de votre site (un bouton, une image, un bloc de texte) est une boîte. Le custom attribute est une petite étiquette que vous allez coller sur cette boîte pour donner des instructions supplémentaires au navigateur web ou à des scripts externes.

En HTML (le langage de base du web), un attribut se compose toujours de deux parties :

‍

• Un nom (Name) : L'identifiant de l'étiquette (souvent précédé de "data-", par exemple data-filter).
• Une valeur (Value) : L'instruction précise liée à ce nom (par exemple category-1).

Pourquoi utiliser les attributs personnalisés sur Webflow ?

L'utilisation des custom attributes ouvre un monde de possibilités infinies. Voici les cas d'usage les plus fréquents :

‍

• Les intégrations d'outils tiers : C'est l'utilisation numéro un. Des solutions comme les Finsweet Attributes (pour créer des filtres CMS, des barres de recherche, des tris), Memberstack (pour gérer des comptes utilisateurs) ou Weglot (pour la traduction) fonctionnent toutes en ajoutant des custom attributes à vos éléments Webflow.
• L'accessibilité (A11y) : Les attributs permettent d'ajouter des balises "ARIA" (Accesssible Rich Internet Applications). Cela aide les lecteurs d'écran à mieux comprendre la structure de votre site pour les personnes malvoyantes.
• Le code sur-mesure (JavaScript / CSS) : Si vous écrivez votre propre code, cibler un élément via un attribut personnalisé (ex: data-action="open-modal") est une pratique beaucoup plus stable que de cibler une classe CSS qui pourrait changer visuellement.

Tutoriel : Ajouter un custom attribute en 4 étapes

Ajouter cette fameuse "étiquette" sur Webflow est un jeu d'enfant et ne prend que quelques secondes.

Étape 1 : Sélectionner l'élément cible

Sur votre Designer Webflow, cliquez simplement sur l'élément auquel vous souhaitez ajouter l'attribut. Il peut s'agir d'une Section, d'un Div Block, d'un lien, d'un bouton... absolument tout !

Étape 2 : Ouvrir le panneau des paramètres

Rendez-vous dans la barre latérale droite de votre écran. Au lieu d'être dans l'onglet du pinceau (Style), cliquez sur l'icône en forme d'engrenage : c'est le panneau Element Settings (Raccourci clavier : touche D).

Étape 3 : Créer le nouvel attribut

Faites défiler le panneau vers le bas jusqu'à trouver la section intitulée Custom Attributes. Cliquez ensuite sur la petite icône "+" pour ajouter un nouvel attribut.

Étape 4 : Renseigner le Nom et la Valeur

Une petite fenêtre apparaît avec deux champs de texte :

• Dans le champ Name, entrez le nom de l'attribut (par exemple, fs-list-field). Notez que Webflow passera automatiquement le texte en minuscules, c'est la norme !
• Dans le champ Value, entrez la valeur correspondante (par exemple, description).
• Appuyez sur la touche "Entrée" de votre clavier ou cliquez en dehors du champ pour sauvegarder.

‍

Et voilà, votre attribut est en place et prêt à être utilisé !

Les attributs dynamiques via le CMS

Une fonctionnalité intéressante de Webflow est la possibilité de lier la Valeur (Value) d'un custom attribute à un champ de votre base de données (CMS).

Si votre élément se trouve dans une Collection List, vous verrez un petit point violet apparaître à côté du champ "Value". En cliquant dessus, vous pouvez demander à Webflow d'injecter dynamiquement le nom d'une catégorie, l'ID d'un article ou une couleur spécifique pour chaque élément généré. C'est très pratique pour créer des systèmes de filtres dynamiques performants !

Les limites de Webflow à connaître

Sachez que Webflow réserve certains noms d'attributs de base pour son propre fonctionnement. Vous ne pourrez pas utiliser des noms comme class, id, href ou style dans la section Custom Attributes, car ils sont déjà gérés nativement par l'interface de Webflow.

‍

Conclusion

Les custom attributes sont la preuve que Webflow n'est pas qu'un simple outil de "No-Code" visuel, mais un véritable moteur de développement front-end professionnel. En maîtrisant cette petite fonctionnalité, vous repoussez les limites techniques de vos projets.

‍