Hide Element if CMS field is empty

I set up sections on each page to pull from the CMS. Every other section has a background color. When one section has content, it reflects on the other pages as an empty colored div. How do I add conditional visibility, i.e. if the CMS field is empty, the div doesn’t appear on published page? Thanks!

Here is my public share link: LINK
(how to access public share link)

1 Like

In general, conditional visibility is available only in collection pages.
In your case that you want to set certain color or size to a collection and hide if collection is empty, you can design the “Collection list” itself with bg color, size, padding etc.
Set empty state to hidden.
Add a filter to the collection to show only if content is set.

I hope this (work around) helped :slight_smile:

I think the only issue with that is if I make a filter on one project page and set conditional visibility in the editor, it won’t show on all the other pages right? Because it’s a global element

I stumbled upon this thread when I was trying to hide a div containing some CMS content.
For Webflow 2021 you can set conditional visibility under the element settings (cog icon) on the right-hand side of the designer.
Hope this helps anyone else looking for a similar answer!


@jaira Thank’s
That is the easiest and correct way to hide an element. :+1: