Imagine a typical Blog index page that shows all of your blog post titles / thumbnail images.
It is ordered newest to oldest.
I want some of those blog posts to visually pop as they are “featured”
I know you can do this by creating a separate collection list and filtering by featured on/off and changing the design of those collection lists accordingly.
However, those featured posts will no longer show up in the correct chronological order.
Ideally a user would be scrolling through all the blog posts and every so often encounter a completely different looking one because it’s featured.
You can definitely do something like this using Webflow’s conditional visibility feature!
Here is a project I made really quick that shows something like this: READ-ONLY LINK
Here’s a SNAPSHOT of the featured article with the conditions.
Pretty much, whatever elements you would want shown when featured, you would set it as “Featured is On”. Then, whatever elements you want hidden when a collection item is featured, you would set it to “Featured is Off.”
If you want to do a totally different look when a blog post is featured, then I suggest you create 2 div blocks inside your collection list item: One for featured posts, then the other for non-featured posts.
Thanks a lot! This worked perfectly. I looked at your read-only link and that helped a lot. I found it confusing that the featured background had an absolute position with 0, 0, 0, 0 but I couldn’t see any other way for it to work as expected so used the same settings.