HubSpot offers users the ability to create a variety of web tools directly on its platform, this includes websites, emails, landing pages and blogs. It’s a winning content optimization system that connects your digital presence to a suite of marketing tools.

To build out these various web tools, HubSpot’s Designer Managers allows you to create templates. Using HubSpot’s template builder tool businesses and marketing agencies can create beautiful web pages, landing pages and emails without coding.

HubSpot’s pre-built templates may not always meet your needs. If your design requires advanced customization this blog will offer you advice on how to optimize your HubSpot templates.


Customize your HubSpot templates structure

The first step to optimizing your HubSpot templates is to decide on the design. While HubSpot provides a library of free pre-built templates, the more intricate and specific your design is the harder it will be to find a template that can facilitate your build. Luckily, HubSpot's template builder is easy to use because it works on a drag and drop builder. In the design manager you can easily build and structure your template without the need for coding.

Once you have completed the structure build of your template, there are a number of ways to customize your templates further. This includes simple tasks like swapping modules and splitting modules and more code specific options like adding CSS.


Customizing your modules

Edit options

The edit options features allows you to set configurations for your module and apply stylistic decisions. This includes the structure of the module, the font, colouring and sizing.

Edit CCS

The Edit CSS declarations is a more advanced option and is what you will use to customize the HTML markup of your template. With this tool you can add a custom CCS class or you can add custom inline styling to your module.

Inline Styling, CSS declarations

To style the look of your site, you can add CSS files to your templates/site. To call upon your CSS files you are able to make call a custom css class in CSS declarations. Click here for more information on how this feature works.

Custom inline styling allows you to apply specific HTML tags to your module, it is a good option for quick fixes. This advanced feature is best to affect your margins, colours and backgrounds.

These features will look different when you build out email templates. This is because email support limited rendering capabilities. The inline styling feature in HubSpot will allow you to determine text colour, background colour, border colour and spacing.


Use Global Groups

Global groups and modules are a great feature of the HubSpot COS. They allow you to use the group or module (great if it’s customized) on every one of your templates. When you have designed a group that can be used on multiple pages on your website you will not need to build the same structure/design over and over again.


Custom modules

For those who need advanced customizations or specific design features that the standard modules are unable to provide, there is the HubSpot Markup Language and code editor where HubSpot design partners are able to build out custom modules to meet your design and functionality needs.


The more time spent on customizing and optimising your templates in the beginning will allow you the marketer to achieve your web, email and landing page needs faster in the long term. Click below to access an instructional video, this video will walk you through how to turn your design into a HubSpot template. If you are interested in getting a quote for a HubSpot template build from one of our certified HubSpot designers, we offer a free quote service here.

how to build HubSpot templates from a photoshop design file