How do I use conditional visibility for dynamic site elements in Webflow?
TL;DR
- Select a dynamic CMS-linked element in a Collection List or Page.
- In the Element Settings panel, add visibility conditions based on CMS fields using logic like "is set", "equals", or "contains".
- Combine conditions with AND logic if needed, then preview and publish to test behavior.
Conditional visibility in Webflow allows you to show or hide dynamic elements based on specific criteria from your CMS content. Here’s how to set it up properly.
1. Select the Dynamic Element
- Click on the element (e.g., a heading, image, button, div block) that's linked to your CMS content.
- Make sure the element is inside a Collection List Wrapper or on a Collection Page.
2. Open the Element Settings
- In the right-hand Element Settings panel, scroll to the Conditional Visibility section.
- Click + Add Condition to open the condition builder.
3. Set Your Visibility Conditions
- Choose a field from your CMS item (e.g., “Category”, “Featured?”, or “Image”).
- Choose a logic option, such as:
- Is set / Is not set – Checks if the field has content or is empty.
- Equals / Does not equal – Matches a specific value (e.g., “Featured = Yes”).
- Contains / Does not contain – Matches partial values in text fields.
- Greater than / Less than – Works with number or date fields.
For example:
- Show a “Featured” badge only if the “Featured” switch is turned on.
- Display a video thumbnail only when the video URL field is set.
4. Apply Multiple Conditions (If Needed)
- Use AND logic to combine conditions (e.g., show element if “Featured = Yes” and “Category = News”).
- Webflow does not currently support OR logic; all conditions must be true.
5. Preview and Test
- Switch to Preview mode to confirm the element behaves as expected across different CMS items.
- Publish to your staging site to see how it looks live.
Summary
To use conditional visibility in Webflow, select a dynamic element, open the Conditional Visibility settings, and define logic based on your CMS fields. This enables you to tailor content display based on the data for each item.
