How can Webflow hide a page section when a CMS list is empty?
TL;DR
- Use Conditional Visibility on the CMS List Wrapper to set a condition like "Items in Collection is Zero."
- Save and publish changes to ensure sections only display when items are present.
To hide a page section in Webflow when a CMS list is empty, you need to use conditional visibility settings. Follow these steps to accomplish this:
1. Select the CMS List Wrapper
- Go to the page where the CMS collection list is located.
- Click on the CMS List Wrapper to select it. This typically surrounds the collection items in your Webflow Designer.
2. Open the Settings Panel
- Go to the Settings Panel (right sidebar) while the CMS List Wrapper is selected.
3. Use Conditional Visibility
- Click on Conditional Visibility under the "Element Settings" section.
- Add a Condition by clicking on the "+" icon.
- Set a Condition to hide the element.
- For example, you might choose "Items in Collection" and set it to "Is Zero."
4. Apply Changes
- Save and Publish your changes to see them live.
Summary
To hide a section in Webflow when a CMS list is empty, use Conditional Visibility on the CMS List Wrapper with a condition like "Items in Collection is Zero." This ensures the section only appears when there are items to display.