Having a blog filled with dynamic content is great for engagement, but sometimes your most valuable posts get lost in the noise. With Webflow, you can easily pin featured posts to the top of your blog or resources page so they get the visibility they deserve.
Here’s how to do it.
Set Up the Featured Pill in Design Mode
Start in Design Mode, not Build Mode.
You’ll begin by creating a simple “featured pill” – a styled div that highlights your featured content.
- Create a div block and apply the following styles:
- Padding top and bottom:
7px
- Padding left and right:
14px
- Background colour of your choice
- Border radius:
100vw
to create a pill shape
- Padding top and bottom:
- Add a text block inside the pill with a label like “Featured”.
At this stage, the pill will show on every post – don’t worry, you’ll control this with conditional visibility shortly.
Add a Featured Field to Your CMS
Now it’s time to set up a way to flag posts as featured.
- Go to your CMS Collection (e.g. Blog Posts).
- Click the settings cog.
- Add a new field of type Switch and name it something like
Featured?
. - Drag the new field to the top of the collection fields for quick access.
Now, when editing a blog post, you’ll see a switch that lets you mark it as featured. Enable it for any posts you want to pin.
Apply Conditional Visibility
With the featured pill selected in the Designer:
- Open the Element Settings panel.
- Scroll to Conditional Visibility.
- Add a condition: only show the pill when the
Featured?
switch is toggled on.
This makes sure the pill only shows on posts that are actually featured.
Sort the Collection List to Show Featured Posts First
To pin featured posts at the top of your blog list:
- Select your Collection List Wrapper.
- In the Element Settings panel, find the Sort Order settings.
- Add a sort rule:
- Sort by
Featured?
–on first
- Sort by
- If needed, add a second sort (e.g. by
Publish Date
) to control the order of featured posts among themselves.
If nothing changes, double-check whether other sort settings are overriding your featured sort. Reorder them so Featured?
is the top rule.
Final Thoughts
That’s it. You’ve now got a flexible, CMS-driven way to pin featured posts to the top of your blog in Webflow.
It’s quick to implement, easy to manage, and makes a big difference in drawing attention to your most valuable content.