Conditional visibility of an element | Webflow CMS

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

What is the problem?

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

One of the most obvious examples is a blog post page. It seems impossible to change the design of the template for a single blog post for example.

And yet... with Webflow, you can customize this CMS template page thanks to the magic feature: conditional visibility!

But there is a solution, an effective one.

Conditional visibility allows you to define conditions (references, name, and any other CMS field...) to make an element (button, title, image, video), or a block of elements (sections, div block, grid, container...) appear or disappear

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 wish to assign conditional visibility
3. Open the settings element ⚙️ (D)
4. Scroll down to : Conditional Visibility
5. Click on the little +
6. Define a visibility variable

How to remove conditional visibility?

In the ⚙️ of your item, access the condition and click on the 🗑 icon.

Example of a use case

Image and/or videos. The choice is yours!

If you have a question, don't hesitate to contact me on Linkedinor leave a comment on the Youtube video tutorial.

Example in pictures

1. Adding the filter

2. adding the condition

Video example

Discover in this video an example of a conditional visibility application!

(in progress 🎥)

How to identify that a conditional visibility is active?

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

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

Now you know everything 🎁

I hope that learning this feature has helped you! If you want to learn more about Webflow, feel free to ;

• Follow our Youtube channel Digidop (we post content every week)
• Follow our blog!
• Discover the Digidop TV