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. 💪
But that's not to say it’s a perfect tool. 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 an easy-to-use blog on Webflow, 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, and here’s why: 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 speak SQL like a second language. 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 more complicated their simple solution becomes. Your typical catch-22.
Therefore, you may spend days or weeks perfecting your website, and when the time comes to add a blog, you find that Webflow’s native blogging solution requires a lot more time and effort than you had initially expected. The blog feels clunky, and you’re 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 be 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.
SEO Doesn't Have to Be Mysterious
If you're using Webflow, you're probably pretty seasoned in the way of the web 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.
Reading guides online about SEO, you'll find it's a quagmire of guessing, outdated information, and sometimes things that are just plain wrong. Some will advocate stuffing your post full of keywords, adding certain metadata, or even backlinking, but it's 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 actually help you with 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. What it does is 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. Check out this integration tutorial here for more detailed information.
Webflow and DropInBlog - The Perfect Union
There are many general-purpose CMSs other than Webflow that are not ideal blogging solutions – simply, 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.
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. You can either go here to add your site or here to upgrade your Webflow account to at least the Lite version. You can find more information about Webflow’s pricing plans here.
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 four lines of code under Step 1, so copy those, 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.
Just like that, we've added DropInBlog, and we're ready to start using all the goodies it gives us.
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 onto our new Blog page. You can use other elements if you want, but containers will 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, the one with another little gear, we need to set the ID to “dib-posts” (you can find this ID under Step 2 in your DropInBlog account). 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 showing in the page builder; it's all happening behind the scenes and will be loaded in when the page is published.
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!
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.
Webflow is a great no-code development platform, but it’s difficult for blogging by itself. For one, its CMS requires extensive knowledge that most people don’t have the time to learn, and two, it’s just not simple enough and would deter you from using it within five minutes.
However, DropInBlog makes blogging on Webflow very simple because it’s a tool that was created exclusively for blogging – nothing less and nothing more. It’s easy to set up and use, adapts to your chosen layout, and has advanced features that will help you optimize your blog posts for search engines.
Of course! Creating a blog on Webflow is pretty simple, and it takes no more than three minutes. All you need to do is create a new page, paste a few lines of code from your DropInBlog account, and voilà! You now have a full-featured blog on Webflow.
Webflow doesn’t have any SEO plugins though it does include standard SEO functionality, which isn’t nearly enough for serious blogging. So, to get the best search engine rankings, you’ll need to know the current best practices and how to implement them into your content, and you can get this with DropInBlog’s built-in SEO Analyzer.
The SEO Analyzer is an intelligent and interactive tool that gives you immediate feedback on your content by giving you suggestions on how to optimize your content as you type. In other words, instead of just letting you edit the basic metadata, it tells you what you should be putting there to make your blog posts visible on search engines.
Your article is graded based on multiple criteria, and you get a total SEO score based on the grades for each of these criteria – the higher the score, the more optimized your article.
Webflow allows you to modify the title tag, add a meta description and title tags for all images, and edit the URL, which is all pretty standard. However, there is no guide on how well you’ve optimized the page or any pointers about whether you’re missing something. This is where DropInBlog comes in.
The SEO Analyzer makes SEO really tangible, which is one of the best features of DiB. It identifies the gaps as you go and immediately steers you in the right direction by giving you suggestions. The feedback you receive is in the form of actionable tips that are very straightforward and easy to understand. For example, it may prompt you that the main keyword isn’t mentioned enough in the text or that it doesn’t appear in the meta-description.
Therefore, improving your SEO score is really a matter of following the tips given by the SEO Analyzer. As soon as you reach a score of 90 or above, your article is ready to be published.
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 email us through our support page.