By Shanon Roberts, on 11 June 2024
A theme in HubSpot is a set of templates with its own style and elements that can be used as a foundation for building a website. Thanks to themes, there's no need to start designing a website from scratch, which is especially useful for those who don't have advanced computer skills. A theme includes templates for the main website page, blog section, information section, landing page, among others.
While themes come with templates featuring predetermined designs and layouts, users can modify different aspects to adapt the design as much as possible to their own style, branding and marketing needs.
All users, regardless of the package they've purchased (HubSpot CMS, Marketing, Sales, etc.), have access to at least one HubSpot theme.
Difference Between Theme and Template
A theme is a collection of templates with the same style, and as such, it affects the entire aesthetic and layout of the website. A template, on the other hand, is each of the pages that make up the theme, so you can find templates for the main page, blog section, contact page, etc.
In this image, you can see the proposed Home, Landing Page, and Thank You Page of Cybex, a theme designed by Cyberclick.
In summary, when designing your website in HubSpot, you should first choose a theme that sets the overall appearance and design, and then customize the different templates it contains to your liking. You can also choose and customize templates independently.
What Elements Does a HubSpot Website Theme Contain?
Within a HubSpot theme, you can find different elements. Understanding what each one is and how they work will help you customize your theme and adapt it to your brand.
Templates
You can customize them in the "Content Editor" section.
Within a template, you can find what are known as theme modules. Both are elements you can edit to adapt the default design to your liking.
Theme Modules
Templates consist of various modules, which serve as the fundamental building blocks. Theme modules can be defined as the distinct sections encompassing elements such as text, images, videos, and forms within a template.
Web designers can customize templates by adding or removing modules (within the constraints set by the theme and template).
Theme Fields
A theme's fields are the aspects you can modify within a module, such as color, size, font type, etc.
How to Use a HubSpot Theme on Your Website
Creating your own website using HubSpot is a feature available with any plan you've purchased. The initial step is to either download a theme or choose one already included in your plan.
While it's also possible to create templates independently outside of a theme, our focus in this section will be on the steps to install a theme and begin customization.
In your HubSpot account, go to "Marketing," then click on "Website" and then "Website Pages."
You'll see the "Create" option at the top of the page; click on it and select "Website Page."
Now enter the name of the website page. Once you have it, click on "Create Page."
You'll be directed to the "Theme Section," where you can see all the available themes, as well as preview them or directly choose the one you like by hovering over it.
Depending on the package you've purchased, you'll see specific themes in the theme section. However, you can also get extra themes in the HubSpot Template Marketplace. To access these, do the following:
- Click on the "Markets" icon in your HubSpot account located on the main page's navigation bar.
- Then, click on "Material Market" and then "Template Market."
- Next, you can use the search bar to locate a specific theme or select the "Discover" option from the dropdown menu to filter by theme.
- Finally, when you find a theme you like, you can click on it to view its details and preview.
If you want to include it in your HubSpot, you can either purchase it or download it for free, depending on your package.
Once you've acquired it, it will automatically appear in the "Design Manager" and in the "Theme Section" so you can activate and use it. Remember that purchasing or downloading it for free does not activate it instantly.
Cybex, Cyberclick's theme, is now available on the HubSpot Marketplace. Cybex is a HubSpot CMS theme for professionals who want to build and manage their websites, landing pages, and blogs in HubSpot without code. All theme templates are responsive, allow for "drag and drop" editing, and changing colors, typography, and spacing without the need for a developer.
Cyberclick's theme includes 13 page templates, 17 system templates, 8 sections, and 26 modules so that all users who acquire it can adapt it to their needs.
