How do I use conditional visibility for dynamic site elements in Webflow?
TL;DR
- Select a CMS-bound element within a Collection List or Page and open its settings panel.
- Add visibility conditions based on CMS field values using logic like “is set” or “equals,” and preview or publish to apply changes site-wide.
Conditional visibility in Webflow allows you to show or hide elements based on the content within a CMS item. This is useful for customizing what users see on dynamic pages or CMS Collections.
1. Select the Dynamic Element
- Click on the element nested within a Collection List or a Collection Page.
- Make sure the element is bound to a CMS item, or its parent is (e.g., inside a Collection List).
2. Open Element Settings
- In the right sidebar, click the settings icon (gear icon).
- Scroll to the Conditional Visibility section.
- Click “+ Add Condition”.
3. Set a Visibility Condition
- Choose the field from the CMS item that triggers visibility (e.g., "Image is set", "Category equals News", etc.).
- Set the logic using operators like is set, equals, is not set, not equals, etc.
- Webflow will now only show this element if the condition matches.
4. Add Multiple Conditions (Optional)
- Click “+ Add Condition” again to add additional rules.
- Multiple conditions use AND logic—all must be true for the element to appear.
5. Preview and Publish
- Use Preview Mode to see how the visibility changes across different CMS items.
- Publish your site to make sure the logic works correctly for live visitors.
Summary
To use conditional visibility for dynamic elements, select a CMS-bound element, add visibility rules from the settings panel, and define when it should appear based on CMS field values. This helps personalize content display across your Webflow CMS.