How to Create a Blog on Framer

How to Create a Blog on Framer

Zoran Zoran
8 minute read

Listen to article
Audio is generated by DropInBlog's AI and may have slight pronunciation nuances. Learn more

Hey there! We hope you're having another great day. In this step-by-step tutorial, you'll discover how to create a blog on Framer using DropInBlog. As you'll see, it's as easy as Sunday morning. But before that, a few words on Framer.

Framer is a web design and prototyping tool equally suited for designers and developers. It allows you to create interactive designs, high-quality prototypes, fabulous custom animations, and exquisite websites.

Framer includes SEO (search engine optimization) and AI (artificial intelligence) features and is especially praised for its ability to import designs from Figma. In addition, it allows you to export designs into React code even though it's a no-code platform.

Most users agree that getting your head around Framer is a bit difficult and complex but worth it.

Can You Blog with Framer?

Framer has a CMS (content management system) that’s somewhat different from what we're used to seeing in typical no-code website builders like Wix and Squarespace. If we had to compare it to something familiar, it is similar to the Webflow CMS. (Generally speaking, if you're a first-time Framer user but have some experience with Webflow, the platform has a similar vibe.)

Since Framer includes a CMS, you can either create a blog template yourself using the CMS or pick one of the pre-built blog templates to start a blog.

However, remember what we said earlier: Framer is not easy to learn or, we'd add, to use. Connecting the dots and tailoring your Framer blog to your taste takes time. A straightforward and easy-to-learn solution specialized for blogging, such as DropInBlog, would be much more convenient. Stick with us, and you'll see why.

How to Create a Blog on Framer Using DropInBlog

From within your Framer admin panel, choose Pages and click the plus icon. Then, click New Page.

Create a New Page in Framer

Your new page will appear under Pages. Double-click the default generic name "page" and change it to a more meaningful and suitable one such as "blog."

Title your new page

Next, click Assets. Now, drag the Navigation and Footer components into your canvas, i.e., blank page.

Assets in Framer

If necessary, click on your top navigation bar and footer to adjust them – for instance, change their position and size – to fit the design of the rest of your website pages.

Navigation and Footer

In the upper menu on the left, click Layers and Desktop.


Under Breakpoint, you'll see the Height settings. Change Fixed to Fit Content.

Fit Content in Framer

The point of this step is to allow the page to expand or contract in line with the content we add.

The previous steps just prepared the ground for what follows. 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.

Click the Layout icon on the very top of the page and choose Frame.

Frame in Framer

Now, click and drag inside the canvas but outside the header and footer sections to draw your frame. Keep in mind that the size of the frame is unimportant. Next, click and drag the frame between the header and footer.

Click and Drag the Frame

Repeat the same process to add a new frame, but this time, click and drag the new frame inside the previous one.

Click and Drag New Frame Inside the Previous One

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.

Now, click on the outer frame in the canvas. The Size settings will appear on the right. Clicking on the Width dropdown will allow you to change the width from Fixed to Fill. Choose Fill to make the frame full width. For Height, choose Fit Content.

Width and Height Size

The inner frame is a placeholder for our blog. Click on it, and change only the Height value to 1000 since the width doesn't matter. This value, 1000, is somewhat arbitrary. Its whole point is to have a height that prevents the footer from colliding with the navigation header when the page loads.

Set up Height to 1000

This next step is crucial. Go to your DropInBlog account and click Code & Layout in the navigation bar. Scroll down a little until you see two lines of code, Step 1 and Step 2, under Blog Code.

Copy the code from Step 1 and return to your Framer account. Ensure you're on your blog page and click the Settings icon near the upper right corner. Scroll down until you get to the Custom Code section. Find the End of <body> tag subsection and click inside the box. Now, paste the code from Step 1.

Paste Step 1 Code

Click Save to keep the changes.

Save Code Insert

Click the Settings icon again to exit the Settings options. Return to DropInBlog and copy only the dib-posts part from the Step 2 code since Framer already has divs.

Now, return to Framer and click on the outer frame again. (You'll notice upon clicking that its label has changed to Stack due to the height we added to the inner frame.) On the right side, scroll down until you see the Scroll Section. In the Name field, paste dib-posts.

Add dib-posts to scroll section

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

If you want to add breakpoints that fit the rest of your website pages, click the plus sign next to Breakpoint.

Add Breakpoint in Framer

Choose Tablet and then repeat the same for Phone.

Framer Screen Sizes

Adding breakpoints ensures that the header and footer look good and are where they should be on different screens. If everything is well, your DropInBlog content will be responsive.

Next, move your mouse cursor to the top right corner and click Publish. Then, click Update.

Update Framer Site

Now, click the website link under Domains to see what your site looks like. It opens in a new tab. There, you'll see your blog page URL. Copy it and go to your DropInBlog account.

In DropInBlog, click Settings and paste the copied URL in the text field under Blog URL. Finally, click Save All Changes.

Add Framer Blog Link to DropInBlog Settings

Return to your Framer blog page and refresh it. Then, click on one of the blog posts. If it opens up and everything looks good, you did a perfect job!

Bonus: Change Your Navigation Link Styles

When you check your new blog page, you might notice that the navigation menu links don't adopt your new blog's style. It takes a few more simple steps to change that.

Head over to your DropInBlog account and click Code & Layout in the navigation bar. Scroll down until you see the Advanced section.

Under the Design Customization subsection, click inside the Link Color field and choose orange. Click the Primary Font Family field as well and increase the font size to 18px. You'll notice many other customization options to play around and customize your blog. You can experiment to see what works best for you. For our purposes, changing the link color and font size would suffice.

Click Save Design Customizations. You'll see a confirmation in the top right corner that your changes are saved.

Design Customization for Framer

Return to your Framer blog page and refresh it. The navigation link color and size have changed.

Live Framer Site

Click on whichever blog post you want to check if everything works fine. If it does, congratulations!


Framer is a good choice for bloggers seeking a versatile and effective platform, particularly for those comfortable with a steeper learning curve. While it's not the easiest tool for beginners, its capabilities for dynamic and interactive content are significant.
For streamlined blogging and content management, integrating DropInBlog with Framer can be highly beneficial, offering a user-friendly blogging solution.

Framer is indeed beneficial for SEO. It optimizes your pages for excellent SEO performance by default, offering complete control over SEO markup, indexing rules, redirects, and more. This ensures a strong foundation for search engine optimization.
Additionally, when used with DropInBlog's SEO Analyzer, you gain further insights and tools to enhance your blog's SEO, making your content more visible and effective in search engine rankings.


Framer may be a bit challenging to master, but adding a blog to it is not exactly string theory. All you need to do to create a blog on Framer is follow the several steps above. Once you add DropInBlog to Framer, you can enjoy all the blessings of a specialized, clear-cut blogging solution.

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

« Back to Blog

Get started embedding a blog into your website right now.

Try It For Free