In this guide, we'll show you how to add a full-featured blog to your Carrd website by simply adding just a few lines of code.
Carrd is a great tool for creating elegant one-page websites. But what if you want to add a blog to your site? Carrd comes with a good selection of elements for adding static content, and by integrating DropInBlog you can extend your website functionality with a full-featured blog.
You'll need to create a DropInBlog account, which you can do for free with a 14-day trial, and you'll need an existing Carrd Pro Standard (or higher) account and website.
Additionally, you'll need to add your blog to the homepage of your Carrd site. This is due to how Carrd renders sub-pages, which aren't compatible.
Adding an Embed element
Navigate to the Carrd dashboard and select the website you'd like to edit. Choose a place for your blog section to appear and select the element immediately above by clicking directly on it. Use the plus icon to add a new element and choose Embed from the dropdown list.
Embedding your blog
Once the Embed element has been added, a sidebar will appear with options for editing the new element. Ensure the type has been set to Code and scroll down the sidebar to the Code textarea. Here is where we'll be adding the DropInBlog script.
Open a new browser window and head on over to your DropInBlog account. Select Code & Layout from the main navigation. In the Blog Code steps, copy the code shown in Step 1 and Step 2, which looks something like this:
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
Switch back to your Carrd website and paste the code into the Code textarea. Once you've added the code, hit the Done button just underneath the textarea.
Next head back over to DropInBlog again and select Settings from the main navigation. Locate the Blog URL field and add your Carrd website URL. Hit Save all changes in the DropInBlog settings and switch back to your Carrd website.
Publishing your blog enriched website
To publish your website with these new changes click the save (💾) icon in the top right corner. Then click Publish Changes in the sidebar when it appears. After that, Carrd will publish your website changes and give you a link to view your website. Use the link to check out your shiny new blog! ✨
Tips for using Carrd
Due to Carrd's selection of very well-designed themes and starting points, your blog will automatically inherit those styles and look gorgeous right out of the box! However, if you want to add some custom styling you can use standard CSS to adjust the presentation. Just use a new embed element and add CSS within the
<style>…</style> tags to begin customizing the design of your blog.
If you'd like any help with the setup of your new Carrd blog, or have questions on how to use any of the DropInBlog features... just shoot us a message. We're standing by waiting to help you get the most out of your new Carrd blog. Enjoy!