Conditional Visibility of an Element | Webflow CMS

Tutorial
July 4, 2022
3 min
Addition of conditional visibility in Webflow CMS template pages
Key points

A little-known yet powerful feature, it allows you to customize the "CMS Collection Pages template" on Webflow. This magical feature is Conditional Visibility.

What’s the problem?

Webflow offers static and dynamic pages. Dynamic pages source their data directly from your CMS back office; we call them CMS-connected pages or CMS templates. These dynamic pages operate on a simple principle: a template with fields linked to your back office (CMS).

One of the most illustrative examples is a blog post page. It seems impossible to change the design of the template for just one blog post, for instance.

And yet... with Webflow, you can customize this CMS template page using the magical feature: conditional visibility!

But there is an effective solution.

Conditional visibility allows you to set conditions (references, names, and any other CMS fields...) to show or hide an element (button, title, image, video), or a block of elements (sections, div blocks, grids, containers...)

Webflow CMS templates page with Conditional Visibility activated

How to activate conditional visibility?

To activate the visibility feature

  1. Go to the Template page in your CMS Collection Page
  2. Select the element or block of elements to which you want to assign conditional visibility
  3. Open the element settings ⚙️ (D)
  4. Scroll down to: Conditional Visibility
  5. Click on the small +
  6. Define a visibility variable

How to remove conditional visibility?

In the ⚙️ of your element, go to the condition and click on the 🗑 icon

Example of a use case

Images and/or videos. You have the choice!

If you have a question, feel free to contact me on LinkedIn, or leave a comment on the YouTube tutorial video.

Example in images

1. Adding the filter

Adding the visibility filter to Webflow CMS templates

2. Adding the condition

edit condition webflow cms is on or is off

Example in video

Discover a practical application case of conditional visibility in this video in French!

(currently filming 🎥)

How to identify if conditional visibility is active?

It is easy to identify whether conditional visibility is active on an element or a block of elements.

  • The color of your element changes from white to purple in the navigator
  • In the ⚙️ of your element, a condition is present

There you go, you know everything now 🎁

{{custom-blog-cta}}

I hope learning this feature has been helpful to you! If you want to learn more about Webflow, feel free to:

Free Webflow Courses
Start your journey
Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today