Comment afficher du contenu conditionnel dans Webflow CMS ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher du contenu conditionnel dans vos collections CMS Webflow selon les valeurs des champs.

1. Utilisez les conditions natives Webflow

Dans votre Collection List Template, sélectionnez l'élément que vous voulez afficher conditionnellement. Dans le panneau Settings > Conditional Visibility, définissez la condition basée sur un champ CMS. Exemples : afficher un badge si le champ "is_new" est activé, cacher une section si le champ "description" est vide.

2. Conditions sur les champs Switch (booléens)

Les champs Switch sont les plus simples pour le contenu conditionnel. Créez un champ Switch dans votre CMS (ex: "Featured", "Premium", "Nouveau"). Dans le Designer, appliquez une Conditional Visibility sur l'élément : "Show when [champ] is On".

3. Conditions sur les champs texte

Pour afficher un élément uniquement si un champ texte est renseigné, utilisez la condition "is not empty". Utile pour les champs optionnels comme une citation, une vidéo ou une description courte.

4. Conditions sur les champs Option (enum)

Les champs Option permettent des conditions plus granulaires. Exemple : afficher un badge rouge si la valeur est "Urgent", orange si "Normal". Créez plusieurs éléments avec des conditions différentes sur le même champ Option.

Conclusion

Le contenu conditionnel évite de créer plusieurs templates pour des variantes légères. Cas d'usage :

• Badge "Nouveau" ou "Populaire" sur les cards produit
• Section auteur affichée uniquement si renseignée
• Prix barré affiché uniquement si une promo est active