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
- Set up Blog Posts and Categories Collections, linking them via a Reference field.
- On the blog post template page, add a Collection List of blog posts with conditional visibility set to show only posts with the same category and exclude the current post.
You want to use conditional visibility in Webflow to filter and display category-specific blog posts on a dynamic blog post page. This is possible using Collection Lists and conditional logic tied to reference or multi-reference fields.
1. Set Up Your CMS Collections Correctly
- Make sure you have a Blog Posts Collection and a Categories Collection.
- In the Blog Posts Collection, include a Reference or Multi-Reference Field that links to the Categories Collection.
- Assign the appropriate category to each blog post entry.
2. Add a Collection List to the Blog Post Template Page
- Go to the Blog Post Template Page in the Pages panel.
- Add a Collection List to the page and connect it to the Blog Posts Collection.
3. Apply Conditional Visibility Based on Category
- Webflow doesn't natively allow filtering a Collection List by current post’s category on a static or dynamic page using standard filters.
- However, you can use conditional visibility inside the Collection List to show only posts from the same category as the current post:
- Highlight the element inside the Collection List item (e.g., the whole item div).
- Under the Element Settings Panel, go to Conditional Visibility.
- Set visibility rule like: "Category (name) equals Current Blog Post's Category".
- Important: This only works if the relation is a single reference field and you’re working inside a Collection Template Page.
4. Avoid Showing the Current Post Again
- Add another conditional visibility rule to exclude the current blog post from being shown in the related posts list.
- Rule: "Name is not equal to Current Blog Post’s Name" (adjust for your field name).
5. Optional: Use CMS Filters with Multi-Reference
- If you're using a Multi-Reference field, conditional visibility won't work for matching.
- In that case, consider using a tool like Jetboost.io or Wized for advanced filtering logic, or use Webflow Logic (beta) or custom JavaScript.
6. Video Tutorials
- Webflow University: Search for "CMS reference field" or “related posts” tutorials.
- Example: https://university.webflow.com/lesson/dynamic-related-content
- YouTube Channels such as:
- Ran Segall’s Flux Academy
- Pixel Geek’s Webflow tutorials
- Finsweet (also offers Components for related CMS filtering)
Summary
To filter category-specific blog posts using conditional visibility on a dynamic blog page:
- Reference the category in your CMS,
- Use a Collection List on the dynamic blog post page,
- Add conditional visibility rules to show posts with the same category,
- Optionally exclude the current post.
For more help, Webflow University's “related content” tutorial is a great visual step-by-step guide.