How to Create a Blog on Webflow

So, you've graduated from using ready-made templates and moved on to designing your layouts yourself using Webflow. That's awesome! Webflow is a fantastic way for you to create your own website and finally flex your design muscles. 💪 

However, as great as Webflow is, you’d probably agree that its native blogging capabilities can be a bit daunting. Sure, learning and configuring various collections, fields, and lists can be really helpful when creating something that needs that level of precision, but for many of us, this is too much.

Since Webflow has a steep learning curve already, when it comes to blogging, many of us just want a tool that’s both effective and easy to use. With that being said, let’s dive into how to create a blog on Webflow – the easy way. But first, let’s recap why Webflow can be tricky to use for blogging by itself. 

Why Webflow Isn’t Particularly Good for Blogging: The Webflow CMS

Creating a blog in Webflow can be a bit of a challenge, as they introduced a CMS (content management system) which basically acts as a big database for all of your files. This system is great for experienced web developers who've been writing server-side code for years and are familiar with SQL. However, for mere mortals, it can be a real head-scratcher.

Purpose-Built vs. Built for Every Purpose

Here’s what happened: Webflow tried to turn databases into something simple, so they created a general-purpose CMS that could be made into many things – a jack of all trades, if you will. 

This resulted in a system that can imitate a blogging platform but actually lacks many of the necessary features that purpose-built blogging platforms like WordPress or Weebly provide.

This problem is due to the same issue many no-code website builders face (think Squarespace and Wix). They strive to create a simple solution for making beautiful websites, but the more features they try to implement, the less user-friendly their supposedly simple solution becomes.

Therefore, you may spend days or weeks perfecting your website, and when the time comes to add a blog, you could find that Webflow’s native blogging solution requires even more effort, as well as a lot more time and effort than you had initially expected. 

The blog feels clunky, and you’re left wondering why you can’t just write a simple blog post and have it show up on your site.

Blogging in Webflow Doesn’t Need to Be Complicated

Luckily, you can opt for a much better alternative, like DropInBlog, the most user-friendly blogging tool that allows you to skip all this mess. 

There are no CMS collections to set up, and you don't have to manually configure each part of your Webflow template. You literally just copy and paste a couple of lines of code into your layout, and DropInBlog handles the rest. It’s a piece of cake! 🍰

DropInBlog - A Truly Simple Alternative

The best thing about DropInBlog is that it's simple to use while still giving you the option to get technical with code if you want to go deeper. You have access to a variety of complex features that would otherwise take forever to obtain in Webflow. Take a look:

As you can see, DropInBlog allows you to choose which information about your content you want to make visible. You can easily toggle them off and on at any time and customize your blog posts’ previews. But that’s not all you’re getting. 

You also need to optimize your content for search engines so it can be easily found when someone searches for topics that you blog about, which is key to driving traffic to your site. In other words, you’ll need to step up your SEO game, and DropInBlog can certainly help.

SEO Doesn't Have to Be Mysterious

If you're using Webflow, you're probably already aware of how search engines work and know the value of SEO or have at least heard of it. You've built this beautiful site, but how do you get people to look at it? SEO is what gets your blog posts and website to the top of search engine results.

While reading guides online about SEO, you'll find it's a quagmire of guesses, outdated information, and sometimes information that’s just plain incorrect. Some will advocate stuffing your post full of keywords, adding certain metadata, or even backlinking, but it's all guesswork to figure out what's actually useful to an ever-changing search algorithm.

Unfortunately, Webflow does not offer tools to analyze your blog posts but just basic guidelines you should follow. On the other hand, DropInBlog will directly help you boost your SEO. Besides the ease of use and flexibility, DropInBlog also offers another invaluable tool: the SEO Analyzer. 

Added SEO Benefits

When it comes to SEO, DropInBlog’s SEO Analyzer is your best friend. It’s an interactive tool that assists you as you’re writing your posts and gives you immediate feedback. 

It analyzes your post and provides a simple bullet-point list of things you can do to improve your SEO. This may be something simple, like including your main keyword in the meta-description, or something more advanced, like adding an alt tag image description.

As you’re constructing your post, the tool grades your content and gives you a score out of 100. In general, anything between 90 and 100 is considered a good SEO score, which means that the chances of attracting organic traffic through search engines are high.

Keep Your Own Style

Additionally, with DropInBlog, you can choose a professionally designed template and have your blog running on Webflow in seconds. DropInBlog looks at the existing CSS of your site and automatically adopts it. It takes about as long as dragging and dropping any other element into your Webflow layout.

Webflow and DropInBlog - The Perfect Union

General purpose CMSs like Webflow’s are not ideal blogging solutions – simply put, when a platform wasn't built from the ground up for blogging, it shows. In contrast, DropInBlog was specifically built for one purpose: to make adding a blog to any site painless and simple.

With the power of both platforms, you'll now have:

• A blog that is simple to implement & maintain
• A ton of options at the flick of a switch
• A purpose-built blogging platform
• Blog posts that are analyzed for SEO

How to Create a Blog on Webflow

Before we begin, you should know that in order to add custom code to Webflow, you'll need either a paid account or paid hosting for your site. Webflow has a range of pricing plans to choose from, but you can also check out our review of the different plan options to see which one is best for you.

Getting the Snippets

Alrighty, let's get started! Go ahead and log into your DropInBlog account and find the Code & Layout page. There, you'll see the two snippets used for connecting Webflow to your DropInBlog content. 

For now, we're just going to use the line of code under Step 1, so copy that and then we can hop on over to Webflow. 

Connecting to DropInBlog

In your Webflow site builder, open the pages tab in the left-hand toolbar and create a new page called Blog (or whatever you'd like!).

Now, when you hover over your new Blog page, a gear icon will appear that opens a new settings panel.

At the bottom of that panel, under where it says "Before </body> tag," we can paste in the code snippet we copied from DropInBlog.

Adding Our Posts

Now that Webflow is connected to DropInBlog, we need to tell it exactly where on the page we want our posts to be loaded. This is important, so follow closely.

In the Add Elements tab, the little square with a plus, we can drag and drop a new Container wherever we want on our new Blog page. You can use other elements if you want, but containers will neatly center your content and add some spacing around the sides, which looks best most of the time.

When we click on the container, a new sidebar will appear on the right. In the Settings tab, we need to set the ID to “dib-posts,” which is visible in Step 2 on the DropInBlog Code & Layout page. Setting the container's ID tells DropInBlog what content we want to pull in from our account – in this case, our posts!

Once you get the hang of this, you'll see you're not just limited to pulling in posts – you can add more containers with other IDs like dib-categories or dib-authors.

A note: Don't worry that nothing is immediately showing in the page builder as you go; it's all happening behind the scenes and will be loaded in when the page is published.

Publishing 

It's now time to publish our new Webflow site. On the top right of the site builder, you'll find the publish tab with a cute little rocket ship. Just select your site from the dropdown, hit Publish Selected Domains, then click on the link to your new site.

Here's a preview of ours. Pretty slick, eh?

One Last Step

Now we have everything loading on the blog page, but the links to the posts themselves won't work properly. This is because while Webflow is connected to DropInBlog, DropInBlog isn't yet connected to Webflow, and therefore it doesn't know where to generate our posts, so the links to them won't work.

To resolve this, just copy the URL of your published site, head over to the Settings page on your DropInBlog account, and paste it into the Blog URL input field. Now, unless there are any other settings you want to tinker with, you're all set!

Custom Styles

Though DropInBlog will automatically use any CSS styles your site already has in place, you can still easily restyle anything from DiB however you want. 

Back in your blog page's settings, above where we added our snippet, you can throw any custom styles inside of some style tags, and you're good to go.

FAQs

Closing Thoughts

Once again, DropInBlog comes to the rescue allowing you to seamlessly integrate a powerful blogging solution into your Webflow site.

You can now take full advantage of DropInBlog's built-in features and launch your Webflow website to the next level! 🚀

The DropInBlog team is dedicated to bridging the gap between professional developers and people who just want a place to express themselves. If there was any part of this integration process you had trouble with, or you just have suggestions for how we could improve DropInBlog, feel free to message us.