How to Create a Blog on Framer

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.

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."

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

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.

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

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

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.

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.

Repeat the same process to add a new frame, but this time, click and drag the 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.

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.

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.

Click Save to keep the changes.

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.

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.

Choose Tablet and then repeat the same for Phone.

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.

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.

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.

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!

FAQs

Conclusion

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!