A theme is a set of templates, modules, global content, and style settings that anyone can use to create an entire website. Themes are coded files created by developers using the CMS developer documentation. CMS Hub accounts include default HubSpot themes that you can customize for any business. There are also themes available on the Asset Marketplace.
What is a theme?
A theme is a set of files for your website, including:
- Coded templates: a set of templates for your website, including a homepage, about page, landing page, and blog templates. These templates are custom coded by a developer, but the content and layout can be easily customized in the drag and drop page editor.
- Modules: a set of unique theme modules you can add and customize on any page template in that theme.
- Global content: content repeated on multiple pages, such as a website header or footer. You can edit global content directly from the drag and drop page editor.
- Theme settings: default settings for templates in your theme, including fonts, spacing, and colors. Any new page using a theme template will have consistent styling.
Preview a theme
The easiest way to preview a theme's design is to create a new page. In the content creator, you can choose from two types of themes:
- HubSpot themes: default HubSpot themes included in CMS Hub Professional and Enterprise accounts.
- Your themes: custom themes created by a web developer using the CMS reference documentation, including: a web developer on your team, a Solutions Partner, the HubSpot Migration Team, or a provider on the Asset Marketplace. For CMS Hub accounts, any HubSpot themes you've already used to create pages will also appear in Your themes.
Edit content for pages using a theme
Each theme includes its own set of modules that follow your theme settings for their fonts, colors, and styles. These modules are grouped into horizontal rows and vertical columns. These rows or columns may be grouped into sections. You can move and rearrange these elements to customize the structure of your page layout.
Learn more about how to edit content in a page using a theme template.
Apply a theme template to your blog
If you're also hosting your blog content on HubSpot, consider updating your blog template to the same theme as your website for visual consistency. Learn how to apply a theme to your blog in your blog settings.
Edit theme settings
To make sure your website follows best practices for visual design, themes have consistent colors, fonts, and styles applied to buttons, forms, and modules on your templates.
You can access your theme settings within the page editor by clicking the Design tab on the left panel. Styles edited here get applied to all pages and theme modules included in this theme. Learn more about managing theme settings.
Features for website developers
Your developer and IT team can leverage security and performance features for websites created in CMS Hub. Developers can monitor website performance quickly and easily with code alerts. There's also a log of all changes made to your website content that can be accessed with the content audit API endpoint. Learn more about website development in the CMS and CMS APIs for developers.
In addition to building themes through the HubSpot CLI, you can also clone and edit existing themes in the HubSpot design manager. To clone a theme:
- In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- In the finder, click the @hubspot folder. This folder contains all themes and default modules, including drag and drop email modules.
- Right click a theme folder, then select Clone theme.
- In the dialog box, name your theme copy, then click Create.
- The theme will be copied into the root folder and will be listed in the finder with your other folders.
With the theme cloned, you can edit it as you would any other coded file, and users will be able to build landing pages and website pages from the theme.