Use themes

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.

Copy a theme to another account

You can copy a theme folder from one account to another. To copy a theme folder to account, you must be a user in that account and have Design tools permissions in both accounts.

Please note: theme folders in the @hubspot or @marketplace directories cannot be copied between accounts.

To copy a theme to an account:

• In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
• In the left sidebar, hover over the theme folder that you want to copy. Then right-click the folder and select Copy to different account. 
  
  
• In the dialog box, select the account that you want to copy the theme to, then click Copy asset. 

After the copy finishes processing, the theme folder will appear in the specified account.