Everything You Need to Know About Themes in HubSpot

Resources:

Getting started with themes (for marketers):
https://knowledge.hubspot.com/website-pages/create-website-content-using-a-theme 

Getting started with themes (for developers):
https://developers.hubspot.com/docs/cms/guides/getting-started-with-themes 

Themes Documentation:
https://developers.hubspot.com/docs/cms/building-blocks/themes 

Full Transcript:

Themes vs. Templates

First, let’s discuss how Themes are different from traditional HubSpot Templates. Traditional Hubspot Templates are built using the drag and drop builder inside of the design manager. These templates, while easier to build, are very flexible as you are unable to add or rearrange modules inside of the page editor unless you are using flexible columns. And in any case, modules inside of a flexible column can only be stacked vertically. Themes on the other hand are a collection of templates that are built using custom code and Hubl. These templates are more difficult to build but are MUCH more flexible. Once built, inside of the page editor you are able to easily rearrange modules, stacked them vertically or horizontally, add custom spacing and background elements, and a whole lot more. Themes also include custom options for editing the styles of your Theme. Let’s take a look!

Editing with Themes

To get started, go to website pages or landing pages, select create page, and select a Theme. Here  you can either select a free HubSpot Theme, a custom Theme you have built, or any purchased Themes. We are going to go ahead and use one of our custom Themes called “Tahoe”. 

Upon entering the editor, you will notice two distinct sections. On the right is the main page editor with all of the sections of the Themes template prepopulated. As with the traditional editor, to edit a section simply click on a module and update it. Either by way of the side panel for custom modules, or on the page itself for HubSpot default modules. Default modules also have style options where you can adjust spacing and margin. A big change that comes with themes is that not only can you edit modules, but also sections. To edit a section simply select it and you will see options for alignment and spacing where you can vertically align content within the section, add a container width, or adjust spacing and margin...and also background options where you can set a background image, color, or color gradient for the section. 

Just like within a flexible column, you are also able to rearrange the placement of modules but unlike flexible columns in traditional templates, you are also able to place modules side by side and even adjust the column spacing! 

On the left hand side of the editor, you will find a tab for “add”, “contents”, and “design”. Add is where you will find all modules that could be added to the page, including modules that are specifically associated with the Theme you are using. To add a module to the page, simply drag and drop it into place. The contents tab simply shows you the structure of the page and finally we have the design tab.

Styling with Themes

The Design tab is truly what makes Themes powerful. Not only do themes give you a new, super flexible editing experience, but also the options to change the styles of your Theme at a macroscopic level. 

To view your styles options, click “edit theme settings”. From here, you will see a preview of the page you are working on and a litany of options for styling your Theme just the way you want. The options available are entirely up to the developer who built the Theme but in this case we have options to adjust the header, footer, Buttons/CTAs, forms, list and a whole lot more! Some settings  even have an affect on others as is the case with our Theme Defaults settings. For example, if I change one of the default colors, that color will change anywhere the color is used. Same goes for the fonts. However more specific changes will override the Themes defaults, should you choose to change them. For example, here, I have overridden the default Font for all H2 tags and as you can see, the change has taken effect anywhere H2 tags are used. Once you have made all the changes you like, simply click publish to make your changes live and return to the page editor.

Keep in mind that any changes you make to the Theme settings will apply to ALL pages using that Theme, including any pages you build using that Theme in the future. 

Building Your Own Theme

Finally, for those of you who want to try and build your own Theme, I will VERY briefly go over how to get started. However, this is only for developers very comfortable with HTML, CSS, Javascript, JSON, and HubL.

To start building your Theme, go to the design manager. Under the file dropdown, you will see the options to create a new Theme. You can start totally from scratch if you’d like, but HubSpot has kindly provided a Boilerplate to help you get started. Once it is finished initializing, you will find that you already have a functioning Theme, with all of the necessary components (although it is very bare bones. This includes the obvious like css, js, and images, as well as a Templates folder where you will find all the default templates provided. This includes basics like home and contact, as well as system templates for things like error 404 and 500 pages. You’ll also find template layouts and partials which are combined together with the main templates to build a cohesive Theme. For example in the home template, you will see here that the base.html partial has been brought into the template using the “extends” function.

Here you will also find the main editor for your template. All theme templates contain a dnd_area tag which is what allows you to drag, drop, and rearrange the modules and sections within the editor. Some other common tags include section, column, and row which you can use to set up the structure of your page and even set some default attributes. You also have the ability to inside Hubspot default modes as well as any custom modules.

Lastly today I want to touch upon the fields.json file. This is the file where you will set all of the all of the available Theme settings you would like to include in your Theme including their default values. You then need to carry over these settings into the Theme overrides CSS file and apply those settings to the appropriate tags and selectors.

There is a LOT more to explore so if you would like to see a full tutorial on how to to build a Theme from scratch, be sure to let us know in the comments down below. I will also provide resources down in the description to help you get started.