How to Create a Blog on HighLevel

Dave Dave
4 minute read

In this guide, we’ll show you how to add a fully functioning blog to your HighLevel website by copying and pasting just a few lines of code.

HighLevel is an all-in-one sales & marketing platform with a built-in website building tool. HighLevel comes with a good selection of elements for adding static content, but DropInBlog can extend your website functionality with a fully working blog.

Prerequisites

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 HighLevel account and website.

Creating a blog page

Navigate to the HighLevel website builder by logging in, opening Funnels and Websites in the sidebar and selecting Websites. From there you’ll be able to select the website you wish to edit. 

Within your website editing view click Add New Page in the top right.

New page dialog, with "blog" as the page slug and "Blog" as the page title

Name your newly created page, I’m going with the creatively imaginative name of “Blog”. You’ll also need to set a page URL (Path), I’m going to set my page path to “blog”. Make a note of this path along with the rest of the website URL, we'll be using it later on.

Once you’ve created your new blog page feel free to add and customize the page how you see fit, taking into consideration that a list of blog posts will be inserted into the page when we add in the DropInBlog code. By default HighLevel leaves new pages completely blank, but will provide you with ways to flesh out your page in the form of Sections, Rows, and Elements.

Adding a custom code element

Within HighLevel, website page elements can be inserted into the page to add content. To add an element you’ll first need to add a Section, and within that section, add a Row. Then, within the row on the page click the Add Element button and then Custom JS/HTML from the newly opened sidebar.

HighLevel - insert custom HTML section

To edit the code within this new element click Open Code Editor in the left-hand sidebar.

Custom JS and HTML element on the page and selected, with the options showing for it in the left sidebar. A button labelled "Open Code Editor" has been highlighted

Open a new browser window and head on over to your DropInBlog account and 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:

<div id="dib-posts"></div>
<script>
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
</script>
<script src="https://io.dropinblog.com/js/embed.js"></script>

Switch back to your HighLevel website and paste the code into the code editing area. Once you’ve added the code hit the “Yes, Save” button just underneath the code editing area.

Code editor dialog open for the custom code element, DropInBlog code has been added

Tip: You can copy or paste the code by selecting the area with your cursor and right clicking it, you’ll then be shown the option to copy or paste.

Go back to DropInBlog and select Settings from the main navigation. Locate the Blog URL field and add your HighLevel blog URL which we noted earlier. This will be your website domain followed by the page path. For example, my blog URL is https://website.com/blog/

DropInBlog settings with the blog URL field set to "https://website.com/blog/"

Hit “Save all changes” in the DropInBlog settings and switch back to your HighLevel website.

Publishing your new blog

The published blog on a blog page within the final website

Finally hit Save in the top right corner of the HighLevel website builder. Then select Preview to navigate to your new blog page to test out your new and fully functioning blog. ✨

Tips for using HighLevel

While DropInBlog powered blogs do inherit styling from your website, you may find that you'd like to make some custom tweaks to your blog layout. The best way to do this is to use standard CSS in your HighLevel website. 

To add custom CSS to a page click “Settings” at the top of the HighLevel website builder and select “Custom CSS”. From there you’ll be able to add styles to adjust the look and feel of your blog as desired.

Dropdown in the HighLevel showing the "Custom CSS" option

If you still need some assistance with getting set up please do get in touch and we’ll be more than happy to help out. 🤓

Happy blogging!

Get started embedding a blog into your website right now

Try It For Free