How to Create a Blog on HighLevel

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. It 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 easily do with a free trial. You’ll also need an existing HighLevel account and website.

Creating a Blog Page

Navigate to the HighLevel website builder by logging in, then open Funnels and Websites in the sidebar, and select 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.

Name your newly created page. I’m going with the imaginative name of “Blog.” 

You’ll also need to set a page URL (Path). I’m going to set mine to “blog.” Make a note of this path along with the rest of the website URL, as we'll be using it later on.

Once you’ve created your new blog page, feel free to add and customize it to your liking while taking into consideration that a list of blog posts will be inserted onto the page when we add in the DropInBlog code. 

By default, HighLevel leaves new pages completely blank, but it 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, you can insert website page elements 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.

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

Open a new browser window, head 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:

Step 1 code:

<script src="https://io.dropinblog.com/embedjs/XXXXXXXXXXXXXXXXX.js"></script>

Step 2 code:

<div id="dib-posts"></div>

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.

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/.”

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

Publishing Your New Blog

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.

FAQs