# Visibilité conditionnelle d'un élément | Webflow CMS Tutoriel3 minPublié le Jul 04, 2022Dernière mise à jour le ![Ajout d'une visibilité conditionnelle dans Webflow CMS templates pages](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6721ec7a4f036bca7601f536_64760069e93084646c9ef232_62c2bdc9a2108bcfd7a31013_Open-Graph-webflow-conditional-visibility.png)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleFonctionnalité méconnue et pourtant si puissante, elle vous permet de **personnaliser les pages "CMS Collection Pages template**" sur **Webflow**. Cette fonctionnalité magique, c'est la **Conditional Visibility.** ## C'est quoi le problème ? Webflow propose des[ pages statiques et dynamiques](/fr/blog/avantages-inconvenients-pages-statiques-dynamiques-webflow). Les pages dynamiques sourcent leurs données directement dans votre back office CMS ; nous les **appelons les pages** connectées au CMS ou **CMS templates**. Ces pages dynamiques fonctionnent sur un principe simple : un modèle, avec des champs connectés à votre back-office (CMS). L'un des exemples les plus parlants est la page d'un article de blog. Il semble impossible de changer le design du modèle pour un seul article de blog par exemple. Et pourtant... avec Webflow, **vous pouvez personnaliser cette page CMS template** grâce à la fonctionnalité magique : la **conditionnal visibility !** ## Mais il y a une solution, efficace. La visibilité conditionnelle vous permet de **définir des conditions** (références, nom, et tout autre de champs CMS...) pour faire **apparaître ou disparaitre un élément** (bouton, titre, image, vidéo), **ou un bloc d'éléments **(sections, div block, grid, container...) ![Page CMS templates Webflow avec Conditional Visibility activée](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6721ec7a4f036bca7601f57f_64760069e93084646c9ef0fd_62c2be0b7f5d657c2d3abb07_webflow-conditional-visibility.png) ### Comment activer la visibilité conditionnelle ? Pour activer la fonctionnalité de visibilité - Allez sur la page Template dans vos CMS Collection Page - Sélectionnez l'élément ou bloc d'éléments, auquel(s), vous souhaitez attribuer une visibilité conditionnelle - Ouvrez l'élément settings ⚙️ (D) - Descendez jusqu'à : Conditional Visibility - Cliquez sur le petit + - Définissez une variable de visibilité ### Comment supprimer la visibilité conditionnelle ? Dans les ⚙️ de votre élément, accéder à la condition et cliquer sur l'icône 🗑 ### Exemple d'un cas d'utilisation Image et/ou vidéos. Tu as le choix ! *Si tu as une question, n'hésite pas à me *[*contacter sur Linkedin*](https://www.linkedin.com/in/florian-bodelot-digidop/?originalSubdomain=fr)*, ou laisser un commentaire sur la vidéo tutoriel Youtube. * **Exemple en images** 1. Ajout du filtre ‍ ![Ajout du filtre de visibilité Webflow CMS templates](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6721ec7a4f036bca7601f584_64760069e93084646c9ef101_62c2bfb74d0a536957a3df32_conditional-visibility-switch.png) 2.Ajout de la condition ![edit condition webflow cms is on ou is off](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6721ec7a4f036bca7601f587_64760069e93084646c9ef0ff_62c2bfdc54de2542004cfbe3_edit-condition.png) **Exemple en vidéo** Découvre dans cette vidéo en français un exemple de cas d'application de visibilité conditionnelle ! (en cours de tournage 🎥) ### Comment identifier qu'une visibilité conditionnelle est active ? Il est facile d'identifier si une visibilité conditionnelle est active sur un élément ou un bloc d'éléments. - La couleur de votre élément passe du blanc au violet dans le navigator - Dans les ⚙️ de votre élément, une condition est présente **Voilà, vous savez tout 🎁** {{custom-blog-cta}} J'espère qu'apprendre cette fonctionnalité vous a aidé ! Si vous voulez en apprendre plus sur Webflow, n'hésitez pas à ; - Suivre notre [chaîne Youtube Digidop](https://www.youtube.com/c/digidop/videos) (on post du contenu toute les semaines) - Suivre notre [blog](/fr/blog) ! Formation Webflow Gratuite[Commencer la formation ](https://www.youtube.com/watch?v=g2THwMHO-jI&list=PLrxXFd7V8-fjAJUo37CXDPvR4oEkmelkk)![Florian Bodelot](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a725470105160732b0a8a_florian-website-vf.webp)Florian BodelotCo-fondateur[ ](/fr/team/florian-bodelot)[ ](https://fr.linkedin.com/in/florian-bodelot-digidop)[ ](https://twitter.com/florian_bodelot)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)