Framer basics

Components

Working with effects

Working with code

CMS

Recreate in Framer

Get notified 🔥

Updates right into your inbox when a new tutorial drops.

Get notified

Featuring a blogpost

Apr 20, 2023

Featuring a blogpost

Have a announcement or want to get more clicks on your latest blogpost. Add a featured blogpost to your homepage on top of the nav-bar.

Setting up the collection

Start by creating a selection by pressing I on the keyboard and dropping a collection list on the screen. Start with deleting all the extra content, but keep the title layer.





Setting up the CMS

You'll end up with all of the blogpost titles, so let's add a way to filter your CMS. Open your CMS and a Toggle field and call it Featured. Set default value "No" and after creating set one of your blogpost to featured "Yes".





Filtering on Featured

Let's add a little bit of styling to the featured blogpost. After adding your styling we are going to set up a filter to only show the featured blogpost. Select the collection list and create a filter that filters on the featured status.





Finishing touches

Allright, there you have it. A featured blogpost. All that's left to do is create some styling for the text. Would you like to remove the blogpost from the top. All you need to do is turn the Featured value for the blogpost to False and it disappears :)




Sorry

This is only available on Desktop.