How to Create a Blog on Framer (Step-by-Step Tutorial)

Framer is a web design and prototyping tool that allows you to create interactive designs, high-quality prototypes, custom animations, and websites. 

Getting your head around the platform is a bit difficult, but worth it because you get access to features such as importing designs from Figma and exporting them into React code via a plugin.

But the question you probably have is whether Framer allows you to add a blog to your site.

Article Summary

• Learn how to add a fully functional blog to your Framer site using DropInBlog.

• Compare different blogging methods: DropInBlog, Framer CMS, Headless CMS, and iframe embeds.

• Discover why DropInBlog is the best option for most users – offering SEO tools, fast setup, and seamless styling.

• Step-by-step tutorial to embed DropInBlog into your Framer project with zero coding required.

• Bonus tips on customizing design, improving responsiveness, and aligning blog navigation with your site.

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.

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 with two lines of code. 

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 EEAT standards

• 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

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.

• Click the ➕ icon → New Page.

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

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

Step 2: Add Navigation and Footer components

• Open the Assets panel.

• Drag the Navigation component into your canvas.

• Drag the Footer component into your canvas.

• Adjust their position and size to match the style of your other site pages.

💡 Pro Tip: Keep header/footer styles consistent across your site for a seamless experience.

Step 3: Prepare the layout

• In the upper-left menu, click Layers → Desktop.

• Under Breakpoint settings, change Height → Fit (instead of Fixed).

This ensures your page expands or contracts automatically as content is added.

💡 Pro Tip: Setting this now saves you from spacing issues later when posts start loading dynamically.

In the next few steps, we'll integrate DropInBlog with Framer. To do that, we'll have to add a middle section between the navigation header and the footer.

Step 3: Insert nested frames for content

• In the top menu, click the Layout icon → Frame.

Draw an outer frame between your header and footer.

Draw an inner frame and place it inside the outer frame (nested).

💡 Pro Tip: Think of the outer frame as the “container” and the inner frame as the “blog placeholder.”

Ensure you've completed this step correctly by checking whether one of the frames is inside the other, not next to it, just like you see in the image above.

⚠️ Common Mistake: If the inner frame won’t nest, delete and redraw it – proper nesting is required for the embed to display.

Step 5: Adjust sizing 

Select the outer frame:

• Set Width → Fill
• Set Height → Fit.

Select the inner frame:

• Set Height → 1000px
• (This prevents the footer from overlapping with the header.)

At this point, you’ve set up the structural foundation for your Framer blog. Next, you’ll embed DropInBlog’s code and connect your blog URL.

Step 6: Add the DropInBlog embed code

• Log in to your DropInBlog account.

• In the top menu, go to Code & Layout.

• Under Blog Code, copy the code from Step 1.

• In Framer, open your blog page → click the ⚙ Settings icon.

• Scroll down to Custom Code → End of <body> tag.

• Paste the Step 1 code.

• Click Save to apply changes.

• Back in DropInBlog, copy only the “dib-posts” part of the Step 2 code.

• Return to Framer, select the outer frame, and paste "dib-posts" into the Name field under Scroll Section.

This was the final step in adding a blog to Framer.

⚠️ If nothing shows up after publishing, check:
- Did you paste Step 1 code under End of <body>?
- Did you set the frame name to exactly “dib-posts” (no typos)?

Step 7: Connect your blog URL

• In Framer, click your website link under Domains to open your live site.

• Copy the blog page URL (e.g., https://yoursite.com/blog).

• In DropInBlog, go to Settings → Blog URL.

• Paste the copied URL and click Save All Changes.

• Refresh your blog page in Framer.

• Test by clicking on a post – if it opens correctly, your blog is live!

💡 Pro Tip: Bookmark your blog URL in DropInBlog – you’ll reuse it for SEO settings, analytics, and sharing.

Step 8: Finalize Breakpoints for Responsiveness

Once you’ve embedded the blog and set the URL, the final step is making sure your design looks great across devices.

In Framer, click the ➕ next to Breakpoint.

• Add Tablet and Phone if you haven’t already.

• Make adjustments so your Navigation, Footer, and blog content look right on each screen size.

• Once satisfied, go to the top-right corner and click Publish → Update.

• Test your live site: click through to your new blog page, open a few posts, and check that everything loads and responds correctly.

💡 Pro Tip: Check that your navigation menu adapts to smaller screens – dropdown menus or collapsible navs may need tweaking.

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 → Advanced → 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!