HubSpot CMS: Themes, Templates and Modules – what is the difference?

HubSpot CMS is content management software and one of many HubSpot Hubs.

For marketers, HubSpot CMS offers an easy way to create highly converting website pages that are optimized for every device.

One of the key selling points of the HubSpot CMS is that marketers can utilize the drag-and-drop website builder and do their thing without the need to rely on developer resources.

The website comes with a fully integrated CRM, allowing marketers to track visitors in one place and leverage the CRM and data to turn their website into a powerful growth engine for your business.  

Let’s dive a little deeper.

When we speak about HubSpot websites and try to figure out the optimal way to either migrate the current website from some other platform to HubSpot or re-design a new HubSpot website, we need to understand the differences between these three concepts: a theme, a template, and a module.

That’s what we are talking about next. Before we do, here are some additional resources you might be interested in:

• Your ultimate guide to HubSpot CMS
• Re-design or migration, how to choose the right website project model

Themes and templates

A theme is a collection of assets

Themes are sets of templates, modules, global content, and style settings that are used to create a website. They have coded templates created by a developer. However, the content and layout can be customized at the page level using the drag-and-drop content editor.

A theme also has theme settings: A place to control fonts, theme colors, spacing, and so on. Should there be a need to change color, font, etc., for the whole site at once, theme settings allow you to make those updates in one central place.

Themes provide templates that are used to generate pages as well.

A template controls the layout and functionality of a page

A template is, in essence, a file that controls the layout and functionality of your page. All pages are created using a template, and one template can be used for multiple pages with different content. You can also choose between different templates for web pages, blogs, and system pages.

In some traditional CMS systems, you might have a custom template for each page. If you’d like to change the structure of a page, you’d need a new template for it.

This was also the case with HubSpot back in the day before themes and modules, as well as the drag-and-drop page editor, became available. Now, most of the pages can use the same template, and you get to choose the modules on the page level.

This brings us to the following topic: Modules.

Modules are the building blocks

Modules are the building blocks of templates. You can use a module in multiple places, and each module can feature various types of content, functions, and designs.

A template is made of several different modules. The contents of a module are also edited on the page level.  

HubSpot CMS allows you to choose from several module types, including the following: 

• Default modules: These modules are included by default and are the standard stuff, such as rich text, images, forms, etc.

• Theme modules: Theme modules are built for each theme

• Custom modules: Custom modules are made for different purposes and can be added to a theme — for example, if there is a need to expand the theme’s functionality

Global content

Global content can be used on multiple pages. Examples of global content include the website’s header and footer and specific content sections that you can manage from one place and apply to all pages.

Put simply, the changes you make to global content are reflected on all the pages that feature the same global content section on them.

All clear so far? Let’s add a little plot twist!

How to get a HubSpot CMS Website: 3 examples

You can get a HubSpot website — and all the necessary things you need to enjoy the drag-and-drop page editing experience — in a few different ways. Here are three examples.

1. Get a theme from the HubSpot asset marketplace

You can choose from plenty of free and paid website themes that are available on the HubSpot asset marketplace. They’re available with various ready-made modules and assets and can be customized, too.

2. Create a custom theme for your company

Working with a developer allows you to have all the assets, modules, etc., custom-made for your company. If you decide to build a complete custom-made theme for your company, you get the option to control the layout from theme settings, without the need to touch the CSS code.

3. Create a custom-made website for your company

A custom-made website includes all the elements a theme would have — but without the option to edit styles, fonts, and spaces without touching the CSS, as a theme would allow you to do. 

All these different alternatives are perfectly fine. There’s no one best solution for every situation. Which option you should go for, really varies from case to case.

We create HubSpot CMS websites with all three of these methods. Here are some of the things we have learned over the years. 

The observations

Not all HubSpot marketplace templates are equally good for all purposes. Some HubSpot CMS themes are simply more suitable for certain types of businesses than others. Some themes are more complex, some more simple, even from the code side of things.

As there are several different ways to accomplish the same end result, the solutions vary. In the case of some themes, it seems the creators have opted for a more complicated solution rather than a simple one.

What is the definition of “good” in this case? Well, that depends, too.

Some value clean code. Others think page load speed is the most important thing.

Some want to be able to control all the aspects of a module in depth in the page editor. Others value simplicity and ease of use.

Some need a mobile-first approach. Others want to launch a website as fast as possible and are more relaxed about the design. Still, others want to be able to determine pixel by pixel how the website is designed.

See where this is going?

Some best practices

If you go with a ready-made theme, choose it wisely

Let’s say you decide to go with a ready-made theme — for example, one that is built for the needs of a SaaS company — but the modules and functionalities don’t match your business. In this case, you might end up having a hard time achieving the results you want.

It’s always best to choose a theme that you can imagine functioning well for your type of business.

Additionally, pay close attention to the modules and what is available. Could you compose the pages you need with the options available?

Stick to the structure when you do the evaluation. Two websites could be done with the exact same theme and still look completely different. Fonts, graphic elements, images, and colors also have a significant effect.

You can still develop custom modules if the theme doesn’t have everything you need. However, it makes sense to try and utilize the ones that are included in the theme since you have, possibly, already paid for them. 

A custom-made website is not necessarily any more expensive than customizing a theme

Even if you decide to purchase a ready-made theme, you will still need developer and design resources to make it work for you.

In some cases, starting from scratch can be more cost-effective than customizing a theme. This is especially true if the way the theme is built is very complex or doesn’t match your needs as well as you might have initially thought. 

The ability to control and modify everything is not always necessary

Adding many options and controls to each element at the module level can make it less intuitive for the user and can bloat up the code. You also might not realize your page-level choices' impact on factors like mobile experience.

Let’s look at this another way.

Have you ever woken up on a Monday morning and decided that it’s time for a brand re-design that needs to be done, like, today? Then, the next thing you know, you’ve changed your company’s primary brand colors, fonts, and logo and bragged to your team about how easy it was to do in the HubSpot theme settings.

Maybe, just maybe, it’s good that everything is not so easy to DIY and requires a bit of teamwork and effort. After all, UX (user experience) design is a real thing.

When we design websites, we want to have certain elements that are consistent, repeatable, and logical. This enables a good and intuitive user experience for the website visitor.

If you can design whatever kind of pages you want — and there are, for example, several content producers on your team, all hands-on designing pages — there is a risk that the user experience will get messy.

For example, controlling element paddings at the page level might mess up things like the mobile experience designed at the theme level by overriding it. 

Modules-first thinking

When a page is a collection of modules, it pays to view the modules as a library of multi-purpose elements.

For example, an image with text and CTA could be used for displaying a service or product, a case study, or a campaign. Instead of designing a page and a page and a page, you can develop a multi-purpose library of structures and elements that serve as the building blocks of your whole website.

Conclusion

Themes, templates, and modules are the building blocks of HubSpot CMS websites.

Our recommended best practice is moving away from template = page-type thinking. Instead, think about the modules as assortments of multi-purpose assets that can be combined differently.

Furthermore, for the question of whether to choose a ready-made theme from the HubSpot marketplace or to do a custom website for your company, the answer is “It depends.” It depends on your needs, the business you are in, and what the goal of the website is.

We are happy to consult you if you’d like to chat about your options and find the best solution for your company’s unique situation.

Book a meeting with our HubSpot CMS specialist today, or send us a message.