Creating a blog with Webflow may seem like a natural next step as you delve into designing your website. However, it's important to acknowledge that Webflow isn't particularly suited for blogging. While it excels in design flexibility, its native blogging features can be overwhelming, especially for beginners. The complexity of setting up collections, fields, and lists can deter many from using Webflow's blog functionality to its full potential when they attempt to create a blog on Webflow.
Recognizing the complexities of Webflow for blogging, many bloggers are seeking user-friendly alternatives. Among these, DropInBlog stands out for its seamless integration with Webflow sites. With just a simple copy-paste of a few lines of code, the entire blogging journey becomes more accessible, allowing you to create a blog on Webflow without the typical challenges. This streamlined approach with DropInBlog ensures that your focus remains on creating engaging content, while effortlessly managing the technical aspects.
So, let's dive into how you can leverage DropInBlog with Webflow to create an engaging, easy-to-manage blog.
Table of Contents
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, 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 on Webflow Using DropInBlog
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! 🍰
In the following section, we'll show you how to integrate DropInBlog with Webflow.
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.
Creating a New Blog Page
In your Webflow site builder, open the Pages tab in the left-hand toolbar.
Then, add a new page and name it “Blog” or any title of your choice. Make sure to click on Create so your new blog page is saved.
Since the page is blank, the next thing you want to do is to add your navigation menu and footer. You do that by clicking on Components on the left sidebar, and then on Navigation.
Similarly, to add your footer, you need to click on Components and then on Footer.
Your newly created blog page will now have a navigation menu and footer.
Adding Your Posts
After you have created a blog page, you need to decide where you want your blog posts to display on the page. The best place would be between the navigation menu and the footer. To do that, place the cursor by clicking on the header.
Then go to the left sidebar, click on Add Elements, and then scroll down under the Advanced category and select Embed.
A new pop-up window will appear, this is where you need to add two snippets of code from your DropInBlog account.
Getting the Snippets
If you haven’t done so already, you need to get a DropInBlog account to complete this step.
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.
Copy these two snippets and paste them into the HTML Embed Code Editor.
Once you’ve added the code, click on Save & Close to save these changes.
Publishing
It's now time to publish your 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?
Adding Your Blog URL to Your DropInBlog Account
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. Make sure to click Save All Changes. Now, unless there are any other settings you want to tinker with, you're all set!
Adding a Blog Page to the Navigation Menu
Another important step, which is also recommended for SEO purposes, is to add a link to your blog page in the navigational menu.
Double-click on the navigation menu until you see the blue border around the menu (like in the screenshot below).
Next, right-click on one of the existing menu items and choose Duplicate.
Once you've created a duplicate menu item, we need to adjust the settings. Click on the menu item that you want to rename and open the Nav Link Settings (the gear icon on the right of the blue bar).
Within the Nav Link Settings popup, enter the name of your blog page in the field next to Text. Additionally, from the Page dropdown, select your blog page.
Finally, make sure to click on Publish to selected domains to save these changes. The navigation now displays the blog page and links to it.
If you want to add a blog link to the footer, you can repeat this process.
Design Customization
With DropInBlog, you have the freedom to tweak several design elements to your liking.
These include adjusting the link color and underline options for better visibility, selecting the primary font and heading font family for a cohesive look, adjusting the image frame settings, and setting the number of posts per row for a neat layout.
DropInBlog offers a preview feature, allowing you to see and fine-tune these customizations in real time, ensuring your blog not only reads well but also looks stunning.
To access Design Customizations in DropInBlog, go to the Code & Layout section, scroll down, and click on Advanced. Here, you can personalize various design elements of your blog.
Webflow Blog Examples
Take a look at some Webflow blogs below and discover the capabilities of DropInBlog for yourself.
Benefits of Using DropInBlog with Webflow
Let's delve into DropInBlog's powerful features that streamline your blogging process and supercharge your SEO efforts.
Effortless Integration and Advanced Features
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.
Enhancing SEO Performance with DropInBlog
If you're using Webflow, you're probably already aware of how search engines work and know the value of SEO. 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 rather just some basic guidelines you should follow. On the other hand, DropInBlog will directly help you boost your SEO for each post with another invaluable tool: the SEO Analyzer.
The Power of DropInBlog's SEO Analyzer
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 chance of attracting organic traffic through search engines is high.
Maintaining Brand Consistency - 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
FAQs
What is Webflow used for?
Webflow is a web design tool, CMS, and hosting platform that allows users to design, build, and launch responsive websites visually, without coding. It's widely used for creating professional websites, blogs, e-commerce sites, and custom web applications. Webflow's visual interface makes it popular among designers, while its robust features cater to developers' needs.
How much does Webflow cost?
Webflow offers various pricing plans: the free Starter Plan for hobby sites, the Basic Plan at $14/month (billed yearly) for static sites, the CMS Plan at $23/month (yearly) for content-driven sites, and the Business Plan at $39/month (yearly) for larger sites. For enterprise-grade solutions, Webflow provides a customizable Enterprise Plan, with details available upon contact.
Is Webflow good for blogs?
Webflow does have a built-in blogging functionality, which you would encounter when trying to create a blog on Webflow, but they've pushed things a little too far and made it overwhelmingly complicated to use. And while it’s complicated, that doesn't mean it's jam-packed with great features. Webflow still lacks some essential features you might see with popular competitors like WordPress.
However, a fitting plug-and-play Webflow blog alternative would definitely be DropInBlog.
Are Webflow blogs SEO-friendly?
Webflow-built websites are SEO-friendly, but they leave a lot to be desired in the SEO domain, especially if you’re a newbie.
Webflow prioritizes clean code and light, well-designed website structure – both factors that play a big part in crawlability. You'll be able to optimize your URLs, meta titles, and descriptions. That said, DropInBlog's built-in SEO Analyzer streamlines this whole process.
What’s the best way to start a blog on Webflow?
The simplest way is to just stick with the native blogging tool Webflow provides. However, your frustration in using it for regular blogging might change your feelings about that. A better way to blog on Webflow is to stick with your beautiful Webflow site but integrate a professional blogging tool like DropInBlog.
Closing Thoughts
When aiming to create a blog on Webflow, DropInBlog offers a valuable solution, enabling seamless integration of a robust blogging platform with 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.
