A blog is one of the highest-return things you can add to a Framer site. It gives search engines fresh pages to index, gives visitors a reason to return, and gives you a place to answer the questions your customers actually ask. The good news: a Framer blog is just a CMS collection with two pages wired to it.
That's the mental model for this whole guide. Framer blog setup is not a separate feature you install. It's the same collections-and-pages system that runs any dynamic content, pointed at articles. Once you see it that way, the steps get simple and you can add a blog to Framer in well under an hour.
We build Framer templates for a living, and nearly every one ships with a blog already structured this way. So we've set up this exact flow more times than we can count. Below is the version we'd teach a friend, minus the parts that don't matter.
What does a Framer blog actually consist of?
A Framer blog is three things: a CMS collection that stores your posts, an index page that lists them, and a detail page that displays a single post. Framer generates one real URL per post automatically. Understand those three parts and the rest of the setup is just connecting them.
The collection is the database. Each row is a post, with fields for the title, body, image, date, and so on. The index page holds a collection list that shows every post as a card. The detail page is a single reusable layout that Framer clones for each post at publish time. Nothing about a blog is special to Framer. It's the standard content system, which is why our full Framer CMS tutorial doubles as the foundation for everything here.
You can build and preview the whole thing on Framer's free plan. Going live on a custom domain is where a paid site plan comes in.
How to set up your blog collection
Start by creating a collection named "Blog Posts" and giving it the fields a post needs. Open the CMS from the left sidebar, add a new collection, and use the three-dot menu to edit its fields. Framer starts you with a title and a slug, and you add the rest. This is the backbone of your framer blog cms.
A blog post collection usually needs these fields:
- Title (Plain Text): the post headline, and the source of your slug.
- Slug: the URL segment. Keep it short and readable, like
framer-blog-setup. - Body (Formatted Text): the article itself, with headings, links, and images inside.
- Excerpt (Plain Text): a one or two sentence summary for cards and previews.
- Cover Image (Image): the thumbnail and hero.
- Published Date (Date): what you sort the index by.
- Category (Option): a fixed list of topics you can filter on later.
- Author (Plain Text, or a Reference to an Authors collection if you have several writers).
Add three or four real posts before you design anything. Designing against real headlines, including your longest one, is how you catch layout breaks before your readers do.
How to build the blog index page
The index page lists your posts using a collection list. Add a page, open the Insert panel, drag your Blog Posts collection onto it from the Collection Lists section, then style one card and let Framer repeat it for every post. Sort by date so the newest article always leads.
Design a single card and bind its parts to fields: the frame's fill to the Cover Image, the heading to the Title, a line of muted text to the Excerpt and Published Date. Then set the card itself to link to your detail page, so a click opens the full article. Framer applies that card design to every post at once.
Two touches make the index feel professional. Sort the list by Published Date, newest first, so the page never goes stale on its own. And if you want a category page later, duplicate the index and add a filter on your Category option. That's the entire index. It maintains itself from here.
How to create the blog post template
The post template is a CMS detail page: one layout Framer reuses for every article. Go to the Pages tab, click the plus icon, add a new CMS page, choose the Blog Posts collection, and pick the detail page option. Framer gives you a blank layout that represents a single post, ready to connect to fields.
Now bind the layout to content. Select the headline layer, click the CMS icon on its content property, choose Set Variable, and pick the Title. Do the same for the Cover Image, the Published Date, and the Body. The Formatted Text body is what carries your in-article headings, links, and images, so give it real width and comfortable line spacing.
Because every post shares this one layout, spend your time here. Set the reading measure to a comfortable line length, size the body text at 18 to 20 pixels, and check it against your longest and shortest posts. Switch between items in preview and watch the same page refill with each article. When it looks right for all of them, it's done.
How to publish your blog and keep it fresh
Once the collection, index, and detail page are connected, add the blog to your navigation and publish. Link your header or footer menu to the index page so visitors can find it. From then on, adding a post is a matter of creating one collection item, and Framer builds the page and slots it into your index.
That's the quiet advantage of this setup. There's no template work per post, no fiddling with layouts, no broken formatting. You write, you set the fields, you publish. Keep a light cadence, even two posts a month, and the index stays current without any design effort on your side. If you interlink related posts inside the body text, you also give both readers and search crawlers a reason to keep moving through the site.
Troubleshooting a Framer blog
Most blog issues come from a missing connection rather than a bug. When something looks off, check these first. They cover almost every "my Framer blog isn't working" message we get.
- Cards link nowhere. The most common one. The collection list card was never linked to the detail page, so clicks do nothing. Set the link on the card frame.
- Posts show in the wrong order. The index isn't sorted by a Date field. Add Published Date and sort the list by it, newest first.
- The body looks unstyled. The body field is bound but its container is too narrow, or the Formatted Text styles were never set. Style the rich text once on the detail page.
- Broken or ugly URLs. Slugs were left on autopilot or duplicated. Set a clean slug per post.
- A blank page after publish. Usually an empty required field on one item. Fill every field you've bound, even with placeholder content.
Work down that list and a stubborn blog almost always sorts itself out in a couple of minutes.
Frequently asked questions
Do I need code to add a blog to Framer?
No. A Framer blog is built entirely with the visual CMS: a collection for posts, a collection list for the index, and a detail page for each article. You bind layers to fields by clicking, not typing. The only "code-like" step is writing clean slugs, and even those Framer generates from your titles.
Can I start a blog on the free Framer plan?
Yes. You can create the collection, design the index and detail pages, and preview the whole blog on the free plan, which makes it a low-risk way to learn the setup. Publishing that blog on a custom domain is the step that needs a paid site plan. Build first, upgrade when you go live.
Can I move an existing blog into Framer?
You can. Framer lets you import content into a collection from a CSV file, so an existing blog can move over without retyping every post. Export your current posts to a spreadsheet, map the columns to your collection fields, and import. Clean the data first, especially dates and slugs, and the migration is fast.
A blog that maintains itself
Adding a blog to Framer comes down to three connected pieces: a collection that holds your posts, an index that lists them, and a template that displays each one. Set those up once and every future article is just new content in an existing machine. No per-post design, no broken formatting, no plugins.
If you'd rather not build the structure by hand, browse our Framer templates; most include a ready-made blog, and SoftExchange is built around a business blog specifically. From there, our beginner template walkthrough covers making it yours, and the Framer forms guide shows how to turn new readers into subscribers. Write more, design less.
