Conditional visibility

With conditional visibility, you can show or hide elements, components and even entire sections based on category, dates, text fields and locales. You can even get super granular and target a single CMS item. In this video, we're going to create a conditional for our CMS webinars collection based on the date of the webinar. And then we'll set another conditional in the navbar for the specific webinar.

Let's get started in the project. Here I have our CMS webinars collection and we have a few different divs because we have a few different things we want the user to do based on on whether or not the webinar has happened. If it hasn't happened yet, we want to show our first form where they sign up for the webinar if it has already happened. There are a few different things we want to do based on whether or not we have the link to the webinar. For this one, we'll show this div if it's happened, but we don't have the link yet. Once we do get the link, we'll want to show this piece where we have a form and then the link is behind that success date.

So to get started, let's just focus on the sign up for webinar. With this we'll click our registration div, we'll go to our settings, and then over here where it says visibility, we'll click on this little purple plus icon to open up conditional visibility. Here we'll click Create conditional and this opens up our visibility conditions panel. In here we'll go to date and time formatted. So this date would be on or after today. So. So that's always gonna read whatever the date is as it's figuring out the conditional. So that is it for if the webinar hasn't happened yet.

The next thing we'll wanna show is go through the conditional visibility on if our webinar has already happened. So for the first one we'll click on in progress and this will be our div for if the event has happened. But we don't have the link to the webinar yet. So here we'll go to visibility, click our little plus icon again, click Create Conditional. For this one we'll click date and time formatted is before today. So it is in the past. That's our condition. But we have another condition that we want to add too. So with this new conditional visibility, we can layer conditions on. So here we have this one set, but we also want to only show this if the webinar URL isn't in there yet. So we'll click Is not set and that's our conditional visibility for this one.

For our final div, this is the one where we have the webinar recording and it's after the event. So we're going to do the same thing, but just change that one piece of it. So here we'll go to the post event that has our other form. We'll again go to visibility, click our plus icon, click Create conditional date and time formatted is before today. And then our condition is the webinar URL is set. So we have that here.

And you can see as I've been going, that the divs have disappeared, but this one has stayed the same. That's because this one is way in the future. But if I go through and look at our other items, you can see that this one shows because we have access to the recording, because the link is set. If I go through a few more, we can see, for example, with this one, it's the case where the event has concluded, but we don't have the link yet. We can confirm this by looking in our cms, going to our webinars and kind of going in here and seeing this is conceptual reality. We have the webinar URL, it's in the past, that one should be showing the right form. Down here we'll go to Concept to Reality. We have the right one here.

All right, so we set up those different forms. Let's say we have a different use case where in our navigation for just a couple of webinars, we want it to show it more like a landing page. So instead of having all the navigation links, we just show the logo and our main call to action. So for this item, From Concept to Reality, this webinar, I'll go to our navbar component. And here we can see I have a couple visibility properties, the visibility of the CTA button and the nav menu. I'll click Nav menu here and here I also have my little conditional visibility icon. I'll click plus, create Conditional and I'll select Current webinar here. It kind of hides it by default because we haven't selected anything yet. But I will open the dropdown and I'll look for this one, which is From Concept to Reality. So for this one I actually want to switch it up. So I'll say if the current webinar is this one, I'll hide it. Otherwise show it. So coming out of here, I can see that it's been applied to this page, and I can check my other CMS items and confirm that it's still there on those pages. And it's just for this one that that nav is hidden.

And that's it. In this example we focused on date and link fields, but you can extend this further, bringing in conditionals based on categories, reference fields, and local. Be sure to check our full Webflow Help center documentation for the most up to date info, but that's how you can set conditional visibility on elements in Webflow.