Are your Hubspot Templates easy to update and taking full advantage of Hubspot’s great editing tools? Here are some key hallmarks that make for an easy editing experience and ultimately separate the good Hubspot Templates from the inexperienced ones.

Using the Right Modules, For the Right Job

Hubspot provides a lot of helpful modules that can be used in your templates to make both the content and the editing options clear to the Hubspot Customer who has to update and manage the pages. There are two ways to call up modules in the Template Builder, but we’ll start with the easiest way: using the drag-and-drop interface in Design Manager.

A correctly developed Hubspot template will look something like this:

Notice the content has been grouped together with multiple layers surrounding it. This is the proper use of surrounding the content with the right classes and containers. Another important thing to note is that the content is broken up into relevant modules. The order or type of module isn’t relevant here, but what is relevant is that the designer/developer is using the right pre-built modules to build their page content. This makes updating easy for the Hubspot Customer down the road.

Using Hubl Effectively, Instead of Raw HTML

So what does a poorly constructed template look like? That’s easy; you’ll see a lot of this:

In this case the design/developer is resorting to raw HTML/CSS coding to construct the template. To be clear, just because a Custom HTML Module is used, doesn’t mean it is bad. But if the majority of your template looks like this, then your end-user will most likely suffer (more on that in a bit).

But what if you have to use raw code? Then use Hubl everywhere you can.

Sometimes you’re forced as a designer/developer to use RAW code to get certain functions or layouts to work. That’s ok! But when you do this, you should familiarize yourself with Hubl coding language so that you can use the same user-friendly modules in your raw code. Take this basic example:

Say you need to need to create your own block of container code with content inside it like this:

<div class="container-fluid row-fluid">
    <div class="span9">
        <h1>This is a Title</h1>
        <img src="/images/my-image.jpg" alt="Dummy image" />
        <a href="http://www.yourwebsite.com/cta-link">Call To Action Button</a>
    </span>
</div>

The content inside of the container could easily be swapped out for Hubl Module code so that your end user can get the benefit of updating it more easily. This is what that would look like:

<div class="container-fluid row-fluid">
    <div class="span9">
        
A clear and bold header
        
        
    </span>
</div>

This little bit of extra code work now gives our Hubspot Customer a much better experience. For a complete list of modules and example code, visit Hubspot’s Hubl Reference Library.

But who cares about the code if it ultimately looks right on the live site?

Well, your Marketing Manager does! To better illustrate this point, look at the end result in the Hubspot Editor when comparing the results of using a standard Header Module (left) vs. a Custom HTML Module (right):

Which one is easier to understand? Which one is easier to update?

By using the right module through a standard module or Hubl code, instead of hard coding everything in HTML, the user see’s a clear option to update their header, instead of a block of HTML code that they may or may not understand.

Finally, don’t forget about Flexible Columns

Hubspot also has an option in the Template Builder to make a column “flexible.” This means that the user can easily add and delete modules themselves in the Editor, making customization more accessible to the Marketing Manager and Non-Coder. When a group in the template is made flexible, you’ll see this added to the end of the label:

The end result creates a more useful experience for the Hubspot Customer to customize their templates on-the-fly. To give you an idea, click on this GIF from Hubspot’s documentation page on Flexible Columns:

These are just a few of the most fundamental ways to create better Hubspot Templates for your Hubspot Customer. For more information on standard Hubspot Modules, click here.

Looking for some great FREE Templates to get you started? Check out our TWO FREE Hubspot Templates from our FlexHUB Series of Premium Templates: