Using conditional visability on your Webflow site

Overview

Conditional Visibility is a feature that works within dynamic context (collection template pages or dynamic lists) to allow the showing or hiding of an element based on conditions of the collection fields.

How to use it

Step 1: Select an element within dynamic content

In order to use Conditional Visibility, you first need to select an element that is within dynamic content, meaning it must be either within a collection template page, or a dynamic list.

The element you select could be anything from a div block, heading text, image or even an entire section of your page.

Once selected, you will find the Conditional Visibility within the Settings panel.

Step 2: Add your conditions

These conditions are the conditions for which you want to show or hide the element you’ve selected.

In the example above, we show/hide a “Featured” label when a collection item has the Featured switch turned On. In this case, the Featured field is a Switch field.

These conditions can vary, however, a common use case is to show or hide content based on whether or not that fields has content at all.

For example, if you had an image field, but are unsure that all your items will have images when you add them, it may be wise to add conditional visibility to the image field on your site so that it doesn’t break your page when one does not exist.