As easy and dynamic as Webflow may be, its native blogging capabilities can quickly become overkill. Having to learn and fumble around with various collections, fields, and lists can be really helpful when doing something which needs that level of precision, but for many of us that may not be the case.

Most of us just want a place to showcase ourselves, our thoughts, and our skills to the world with minimum hassle. With DropInBlog we can avoid that unnecessary complexity altogether by simply copying and pasting a few lines of code into the right places.

Note: Webflow doesn't allow you to add our custom code snippets without 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. It may seem like an unnecessary hurdle but there's sadly, there's no way around it 🤷.

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. 

Search Results

Search Results

Connecting to DropInBlog 

In your Webflow site builder, open the pages tab in the left-hand toolbar. When you hover over Home a gear icon will appear that will open a new settings panel. All the way at the bottom, 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 where exactly on the page we want our posts to be loaded in. This is important, so follow me closely here...

In the Add Elements tab, the little square with a plus, we can drag and drop a new Container wherever we want onto our site. 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. 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.

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.

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 mine, pretty slick eh?

One Last Step

Now... we have everything loading on the home 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 home 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.

Closing Thoughts 

Once again DropInBlog has made what would otherwise have been a tedious process of learning the setup and terminology of some overpowered CMS into a couple minutes of effortless bliss 😇.

We are a small team of individuals 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 you had trouble with or you just have some suggestions for how we could improve DropInBlog, hit us up on messenger or feel free to send an email through our support page.