How to Add a Blog to Framer in 2026 (Step-by-Step Tutorial)

You can add a blog to Framer in two ways: Framer's native CMS (good for portfolios, limited SEO and author tools) or a blog plugin like DropInBlog (full SEO toolset, author profiles, schema, AI content tools). 

The native CMS keeps everything in Framer, while the blog plugin lets you publish without touching your Framer project. Pick the plugin if blogging is part of your SEO strategy.

TL;DR: Adding a Blog to Framer

• Framer allows blogging through its CMS, but it lacks core features such as categories, tags, author pages, and advanced SEO tools.
• The four main ways to add a blog to Framer are: DropInBlog, Framer CMS, a headless CMS, and iframe embeds.
• DropInBlog provides fast setup, strong SEO features, detailed author profiles, rich media support, and styling that matches Framer automatically.
• Integrating DropInBlog requires adding the blog plugin to your project. From there, you just need to create a new page in Framer, connect your DropInBlog account to Framer, drop the blog embed onto the page, verify the integration, and create a code override for your site’s navigation menu.
• The blog post includes tips for customizing blog styling and ensuring consistent navigation within Framer.

Can You Blog with Framer?

Yes. Framer has a built-in CMS that’s somewhat different from what we're used to seeing in typical no-code website builders like Wix and Squarespace. If you have some experience with Webflow, you’ll find the platform has a similar vibe.

You can create a CMS Collection for posts, design a template page, and connect your content through Framer’s no-code interface. For simple sites, this works well enough: you can publish posts, list them in a feed, and keep everything within Framer’s design system.

However, Framer’s CMS wasn’t designed with serious blogging in mind. There are some limitations to be aware of:

• No dedicated blog features like categories, tags, or author pages
• Limited SEO controls compared to specialized tools
• More manual design and maintenance work if you want to scale beyond a handful of posts

This is why many Framer users look for alternatives that offer better SEO, easier publishing, and richer blogging features without giving up the design freedom that makes Framer popular.

What's New in Framer CMS (2026)

Framer shipped CMS 3.0 alongside Dynamic Filters in 2026, as well as a Server API for syncing CMS collections with external sources. The biggest practical changes for blogging are:

• Table view with bulk actions: edit multiple posts at once, similar to a spreadsheet
• Dynamic Filters: no-code filtering with search fields, tabs, dropdowns, and checkboxes (closer to category navigation)
• Server API: webhook triggers and scheduled jobs for external content workflows
• Wireframer + Workshop AI tools: generate layouts and components from text prompts

These updates close some gaps in Framer's native blog story, as bulk content management and filter-based navigation are genuinely useful. But Framer still lacks an SEO scoring tool, author profiles with E-E-A-T structure, automatic blog schema markup, and a built-in topic discovery workflow. If you're blogging for SEO and AI search visibility, you'll still hit those walls.

Why Add a Blog to Framer?

Framer is excellent for landing pages, portfolios, and marketing sites – but without a blog, your site risks staying static. A blog is what transforms a one-off project into a platform that grows with your audience.

Here’s why adding a blog to your Framer site matters:

• SEO and visibility: Blogs let you target long-tail keywords and get indexed by search engines – something a one-page site can’t do well.
• Authority and trust: Regular posts position you or your brand as an expert, building credibility with your audience.
• Engagement: Useful content keeps visitors on your site longer and increases the chance they’ll convert.
• Ease of publishing: With DropInBlog, you can add and optimize posts without constantly editing your Framer project.

In short, if you want your Framer site to drive ongoing traffic and conversions, not just look great, adding a blog is the way forward. Here’s a quick breakdown of the four main ways to add a blog to Framer:

Option 1: Use DropInBlog (Best for Most Users)

Best for: Most users and marketers who want fast setup and SEO tools.

One of the easiest and most powerful ways to add a blog to a Framer site is with DropInBlog, a cloud-based blogging platform that plugs directly into your project via a plugin. 

Instead of trying to bend Framer’s CMS into something it wasn’t built for, DropInBlog gives you a full-featured blogging system that’s SEO-friendly, styled to match your site, and ready in minutes.

What DropInBlog Gives You

With DropInBlog, you can:

• Schedule posts and assign roles – great for teams and contributors
• Add multiple authors to meet Google’s E-E-A-T standards
• Easily find your next blog topic with Blog Pilot™
• Optimize every post with the built-in SEO Analyzer
• Boost key terms with Mention Boost™ so AI models surface your content
• Add rich media: images, videos, tables of contents, product embeds
• Make site-wide changes instantly with Smart Snippets™
• Turn posts into podcasts with Blog Voice AI™
• Customize layout and styling so your blog matches your Framer project
• Create fast, indexable posts with clean URLs

All of this is managed in a simple dashboard – no need to update Framer every time you publish. DropInBlog automatically inherits your Framer fonts and styles, so your blog looks native from day one.

Pros and Cons of Using DropInBlog with Framer

Try it on your own site

Start 7-Day Free Trial No card required

How to Add a Blog to Framer Using DropInBlog (Step-by-Step)

Now that you know why blogging on Framer is worth it and what your options are, let’s walk through the fastest method: adding DropInBlog to your Framer site. This process takes just a few minutes and doesn’t require any coding skills.

Step 1: Create a new "Blog" page in Framer

In the Framer admin panel, open Pages. Then, click the plus icon and select New page from the dropdown.

Rename the page to something SEO-friendly like "blog."

💡 Pro Tip: Keep your URL slug short and SEO-friendly (/blog).

Step 2: Install the DropInBlog Plugin From Framer’s Marketplace

Next, go to Framer’s Marketplace and type “DropInBlog” into the search bar in the top right to open the DropInBlog plugin page.

Click the Open Plugin button and select your Framer project from the dropdown.

The plugin will be added to your project, and a small window will appear inside the editing area. Now, you need to connect DropInBlog to your project.

Step 3: Connect Your DropInBlog Account to Framer 

In the DropInBlog –The Blog Plugin window, click Connect DropInBlog.

You’ll be taken to DropInBlog’s registration page, and here, you should choose how you want to sign up: Continue with Google or Continue with Email.

Choose the method that suits you best and set up your account credentials.

Next, you’ll be asked to authorize Framer access to your DropInBlog account. Click Authorize to proceed.

The following screen will inform you that the authorization was successful and prompt you to close the window.

When you click the Close button, the window will close, and you’ll be back in Framer’s editor.

Step 4: Add the DropInBlog Embed to Your Blog Page

Once you’re back in the editor, you’ll see your blog’s name under Choose your blog. Click Add Full Blog, and the embed will appear on the left side of the editing area.

Make sure you’re on the blog page and drag and drop the embed onto the page.

Press the Publish button in the top right to publish your blog page.

Step 5: Verify the Integration

To ensure everything was set up correctly, go to the Code & Layout page of your DropInBlog account. To do that, open the DropInBlog plugin by going to Canvas → Plugins → Browse all.

Alternatively, you can open the Quick Actions menu by pressing Command + K (Mac) or Control + K (Windows) on your keyboard. Click Browse plugins, and under Recents, you’ll see the DropInBlog blog plugin.

Click the arrow next to DropInBlog – The Blog Plugin and select Manage posts from the dropdown.

This will take you to the Posts page of your DropInBlog account. In the menu on the left, find and open the Code & Layout page, then click Verify Integration.

If asked to add your blog link, copy it from your live Framer site and paste it into the corresponding field. You’ll get a confirmation that your blog is live.

Now you can test your live site. Click through to your new blog page, open a few posts, and check that everything loads and responds correctly.

Step 6: Add a Blog Link to Your Site’s Menu

To make it possible for your visitors to view your blog, make sure you’ve added a blog link to your site’s navigation.

We’re using a component, so we’ll just copy one of the menu items, rename it to blog, and link it to our new blog page.

Step 7: Add a Code File to Your Framer Site

To ensure your new blog page fully loads the moment your visitors access it from your site’s navigation, you need to create a new code file. You don’t need to code anything, though. Just copy and paste the code provided below. 

If you skip this step, your visitors will have to reload your blog page to view the content.

Open the Assets tab in Framer, then click the plus sign next to Assets and select Code file from the dropdown.

In the pop-up that opens, name your file “DropInBlogOverride,” and choose the New Override option.

When you click on the Create button, you’ll be taken to the code editor. First, delete the default code, then paste the following code into the editor:

// dropinblogOverride.ts
import { Override } from "framer"


export function DropInBlogLink(): Override {
   return {
       onClick: (e: MouseEvent) => {
           e.preventDefault()
           e.stopPropagation()


           const el = e.currentTarget as HTMLElement
           const href = el.getAttribute("href")


           if (href) {
               window.location.href = href
           }
       },
   }
}

Step 8: Apply the Code Override to Your Site’s Navigation

Now that you’ve created a new code override, all that’s left is to apply it to your site’s navigation menu.

If your navigation code is in a component, double-click on it to edit it.

On the right side of the editor, click on the plus sign next to Code overrides to expand the options menu.

Then, select the blog page you previously created and paste the embed component.

In the dropdown next to File, select DropInBlogOverride, and in the dropdown next to Override, select DropInBlogLink.

Save your changes by clicking the Publish button in the top-right of the page.

Step 9 (Optional): Add Recent Posts to Your Homepage

If you want to display your blog posts on your homepage or any other page of your Framer site, you can add the Recent Posts embed to the page of your choice. 

First, select the page where you want to show recent posts from your blog. Then you need to access your project’s plugins, which you can do by going to Canvas → Plugins → Browse all or by clicking Browse plugins in the Quick Actions menu.

Under Recents, you’ll see the DropInBlog blog plugin.

Click it, and you’ll see the same small window that appeared when you added the plugin to your project. This time, you need to select Add Recent Posts Widget. When you click this option, you’ll see the widget on the left side of the editing area.

All you have to do now is drag and drop it onto the page. In the menu on the right, you’ll have a couple of options to customize how your blog posts appear.

You can set the number of posts you want to show and choose how they appear: as preview cards or a list of links.

Finally, click Publish in the top right, then click Update to publish the changes you made to your Framer project.

Option 2: Framer CMS

Best for: Designers or small site owners who want a native Framer blog.

Framer CMS comes with pre-built blog templates that you can adapt to your site. It’s a native solution, but keep in mind it requires more setup time than DropInBlog and offers fewer SEO tools out of the box.

How to set it up:

• Create a new page in Framer.
• Select a Blog template from the CMS options.
• Add fields for title, author, date, and body content.
• Connect these fields to your content collections.
• Publish your site with the CMS-enabled blog.

Pros and Cons of Using Framer CMS

Framer CMS is fine for simple, personal blogs – but if you want better SEO and faster publishing, DropInBlog is still the stronger option.

Option 3: Headless CMS (Contentful, Sanity, Strapi, etc.)

Best for: Developer teams that need maximum flexibility and are comfortable managing API-driven workflows.

Headless CMS platforms are powerful but complex. They’re best suited for large or content-heavy sites where scalability and integrations matter more than speed of setup.

How to set it up:

• Sign up for a headless CMS (e.g., Contentful, Sanity, Strapi).
• Create a content model for blog posts (title, body, categories, authors).
• Connect the CMS API to Framer using custom code or an integration layer.
• Build your blog template in Framer to fetch and display posts dynamically.
• Publish your Framer site and manage content from the CMS dashboard.

Pros and Cons of Using a Headless CMS

A headless CMS gives you enterprise-level power, but for most Framer users, it’s too complex compared to the quick and SEO-friendly DropInBlog solution.

Option 4: iframe Embed

Best for: Site owners who already have a blog elsewhere (WordPress, Ghost, Medium) and just want to display it inside Framer.

An iframe embed is the quickest way to display a blog in Framer, but it comes with major SEO drawbacks – search engines don’t crawl iframe content. It can also look mismatched with your site’s design.

How to set it up:

• Create or host your blog externally.
• In Framer, add a new frame or section.
• Paste an <iframe> embed code pointing to your external blog URL.
• Adjust width and height to fit your layout.

Pros and Cons of Using iframe

An iframe embed can work for quick fixes, but if you want a professional blog that looks native and ranks well in search, DropInBlog is the better route.

Bonus: Change Your Navigation Link Styles

Once your blog is live, you may notice the navigation menu links don’t perfectly match your site’s styling. Fortunately, you can easily fix this with DropInBlog’s design customization options.

How to do it:

• In your DropInBlog dashboard, go to Code & Layout → Design → Design Customizations.
• Update Link Color, Font Family, and Font Size to match your site.
• Click Save Design Customizations to apply changes.

Return to your Framer blog page and refresh it. The navigation link color and size have changed. Click on whichever blog post you want to check if everything works fine. If it does, congratulations!

💡 Pro Tip: Keep styling consistent across your blog and main site – this builds trust and makes the blog feel native to Framer.

Ready to Start Blogging?

By now, you’ve seen multiple ways to add a blog to Framer – from native CMS templates to headless setups. Each has pros and cons, but for most users, DropInBlog is the fastest, most SEO-friendly, and easiest way to go live with a professional blog.

What makes DropInBlog different:

• Launch a blog in minutes, not hours.
• SEO Analyzer, schema, and Mention Boost™ built in.
• Works seamlessly with Framer’s responsive design.

In the meantime, if you have any questions, reach out – we'd be happy to help in any way we can. Happy blogging!