How can I use conditional visibility in Webflow to filter category-related blog posts on a dynamic blog page? Are there any video tutorials available for this? Thank you!
TL;DR
- Create Blog Posts and Categories CMS collections, linking them via a reference or multi-reference field.
- On the Categories Template page, add a Collection List of Blog Posts and filter it to show posts where the category matches the current category.
To filter category-related blog posts on a dynamic blog page in Webflow, you’ll use conditional visibility and collection lists connected via multi-reference or reference fields. Here's how to do it correctly.
1. Set Up Your CMS Structure
- Create two CMS Collections: one for Blog Posts and one for Categories.
- In your Blog Posts collection, add a Reference field (single category) or Multi-reference field (multiple categories) that links to the Categories collection.
2. Create a Dynamic Category Page
- Go to the Pages panel and find the Categories Template (Webflow auto-generates it when you have a Categories CMS collection).
- This page will dynamically display content for each category.
3. Add a Collection List to Display Filtered Blog Posts
- On the Categories Template Page, add a Collection List to the canvas.
- In the Collection List Settings, choose the Blog Posts collection as the source.
4. Apply Filter to Show Only Related Blog Posts
- With the Collection List selected, go to its Settings Panel.
- Set a filter condition: Choose the Category field (in Blog Posts), then specify “is equal to Current Category.”
- This ensures only blog posts linked to the category currently being viewed are shown.
5. Optional: Use Conditional Visibility for Elements
- Inside each blog post item, you can use Conditional Visibility to show or hide elements (e.g., tags, buttons) based on field values.
- For example, set a Text Block to only show if the post has a featured = true switch enabled.
6. Video Tutorials Available
- Webflow has an official lesson on this in their Webflow University:
- Search for "Filtering CMS Content by Category".
- Specific tutorial: “Build a blog with Webflow CMS” – it includes category filtering.
- YouTube also features community-led tutorials; search “Webflow category filtering tutorial” for visual walkthroughs.
Summary
To filter blog posts by category, use a Categories Template page and a Collection List of blog posts with a filter where the blog’s category reference matches the current category. Conditional visibility enhances flexibility but isn't the primary filtering method—collection list filters handle that. Check Webflow University for visual guides.