Conditional visibility by date - Webflow

Webflow offers the possibility to customize the items of a collection thanks to conditions or even a dynamic page. It is possible to create variants for each of your items according to specific criteria.

Here is an article on the conditional visibility feature of Webflow.

Today, we are going to look at conditional visibilities around dates in Webflow. To do this, we'll show you how to customize the style of an item that is coming up (that starts in the future).

Step 1: Add a date field to your collection

Just like the item to hide an item after or before a certain time, we will add a date field to our collection. In our example, we add a start date for our event. We then fill our collection with new items (in our case, new events).

Step 2: Create a style for your conditional items

In our case, we just add a Div block with an overlay and a text inside that signals that the event is coming. However, you can customise your item as you wish.

Initially your style will be assigned to all your items, but we will add a conditional visibility to all the items that we want to be visible or not for a certain time.

In our example, we will add a conditional visibility to our Div block which includes our "to come" text.  

Step 3: Add conditional visibility by date

We will now add conditional visibility to display the overlay and text only when the start of our event is in the future.

We go to the parameters of our element. We select conditional visibility, then we choose our date field (Start Date). We then select the option "Is after or equal to... "and then 0 days (to set the condition based on the current date). We leave the last option untouched as the date value is 0.

You can of course customise these settings to suit your needs.

Is after or equal to means the future time or equal to the value you set below

Is before or equal to means past or equal to the value you set below

For example, we could create different styles for our items depending on whether they are in 1 week or 2 weeks or 1 year, etc.

After saving our conditional visibility, we see that only our events whose start date is in the future are styled with the overlay and the text "coming soon".

This way, you can easily customize your event collections or even your blog if you wish!

To learn more about Webflow, don't hesitate to pre-register for our NoCode training!