Comment afficher du contenu conditionnel dans Webflow CMS ?
Apprenez à afficher du contenu conditionnel dans Webflow CMS selon les valeurs de vos champs : Switch, texte, Option et référence.
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.
| Type de condition | Champ CMS | Exemple |
|---|---|---|
| Champ booléen actif/inactif | Switch | Afficher un badge 'Nouveau' |
| Texte non vide | Plain Text | Afficher une section si description renseignée |
| Option sélectionnée | Option | Afficher la couleur selon la catégorie |
| Référence liée | Reference | Afficher un auteur si défini |
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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
