As easy and dynamic as Webflow may be, its native blogging capabilities can be a bit daunting. Having to learn and configure 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: 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.
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. All the way 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 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 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.
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 mine, 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.
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 some suggestions for how we could improve DropInBlog, hit us up on messenger or feel free to send an email through our support page.