How do I use conditional visibility for dynamic site elements in Webflow?

Conditional visibility in Webflow lets you show or hide elements on a Collection page or inside a Collection List based on the content from the CMS.

1. Select a Dynamic Element

• Click on the element inside a Collection List or a Collection Page that pulls data from the CMS.
• This must be a bound element (such as a text block, image, or div) that exists within a CMS context.

2. Open the Settings Panel

• Go to the Settings panel (right-hand toolbar with the gear icon).
• Scroll to the section labeled Conditional Visibility.

3. Add a Visibility Condition

• Click + Add Condition.
• You'll see a dropdown menu with all available CMS fields.
• Select the field you want the condition to be based on (e.g., "Image is set", "Category equals 'Blog'", or "Featured is true").

4. Define the Rule

• After selecting the field, set a condition rule:
• Equals: Show if the field matches a specific value.
• Is Set / Is Not Set: Show if a field (like image or link) has content.
• Greater Than / Less Than: For numeric or date fields.

5. Apply and Stack Multiple Conditions (If Needed)

• Click Done to apply the rule.
• You can click + Add Condition again to add additional filters (AND logic only).
• Webflow does not support OR logic—all conditions must be true for the element to show.

6. Test and Preview

• Use Preview mode to test how conditional visibility behaves for different CMS items.
• If hiding elements causes layout issues, use additional Padding/Margins or Display settings (e.g., Display: None).

Summary

To use conditional visibility in Webflow, select a CMS-bound element, go to its Settings panel, and add visibility conditions based on CMS field values. This feature is powerful for customizing layouts based on the dynamic data of each Collection item.