A Beginner's Guide: How to Use the Hubspot Template Builder

One of the ways that HubSpot can make your life easier is by allowing you to design and use customized templates for emails, landing pages, blogs, and web pages. However, you may be wondering how to implement these templates effectively.

We’re going to go over the basics of using the HubSpot template builder so you get a better idea of how to use this amazing tool.

 

A Quick Overview of the Hubspot Template Builder

The HubSpot Template Builder allows you to drag and drop modules into a layout to create a template for a website page, landing page, or email. Each module provides a different function, such as a heading or an image, that comes together for your design.

Within the template builder, there are plenty of options to add your own code, depending on how experienced you are with the language.

 

HubSpot Design Manager

Here are some of the important elements in the Design Manager that you are going to want to become very familiar with when you start to build your templates.

  • Rich Text Modules: These modules allow you to add text, images, HTML, and headings into your template, so you are going to be using them quite a bit.
  • CSS: This coding language is used for more stylized design projects, and is often used for more complex template designs.
  • File Manager: This is where your site’s assets will live and where you can keep them organized as you build.  

 

Using HubSpot Global Groups

HubSpot Global Groups are extremely important for a number of reasons, but primarily because they make it easier to build templates and they increase brand consistency across your website.

Your header and footer are Global Groups because they are locked modules that stay together on every template and page. If you don’t have them set up, every time you make a change to your footer, you’ll have to edit it on every single template to make it appear globally. Global Groups allow you to make one edit to the module and have that edit automatically update on everything, saving you time and effort.

In addition to your header and footer, anything you want to have on multiple pages should be saved into a global module. This way, you can easily drop it in wherever you need it.

 

How to Slice PSDs Into HubSpot

You can easily slice PSDs into HubSpot to create your own custom templates from a design. In fact, this is a common way for designers to visualize what their templates and pages are going to look like before they get to the development stage.

Essentially, you can take your Photoshop file and import it into HubSpot in order to see that template come to life. For complete instructions, read our detailed walk-through here or check out our video tutorial.   

 

Working With HubSpot Developers to Build Custom Templates

Of course, you are never alone when you work with HubSpot. You are always just within reach of a team of certified HubSpot developers who are more than willing to help you out and build you a template that does exactly what you need it to.

HubSpot Support from a HubSpot developer