Use themes

A theme is a set of templates, modules, global content, and style settings that can be used to create a website. You can edit pages and posts using a theme in the content editor and set blog templates to use a theme in your blog settings.

All accounts have access to at least one default HubSpot theme. Themes can also be downloaded from the Template Marketplace.

Understand themes

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 customized in the content editor.
• Modules: a set of unique theme modules you can add to content using 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: style settings for templates using a theme, including fonts, spacing, and colors.

Use an active theme

You can set an active theme to display that theme's pages as the default options for newly created pages. Setting or changing an active theme won't change the theme used for existing content, which requires swapping the content's current template. Additional themes can be purchased in the HubSpot Template Marketplace.

1. Navigate to your content:
   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click Create or Get started.
3. On the theme selection page, click Set as active theme on the desired theme card. To preview the theme, click Preview theme.
4. On the template selection page, click Select template on the desired template card. Then continue building a page using HubSpot's drag and drop editor

Change active theme

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. In the top right, click Create or Get started. 
3. To change the theme from website pages, click the Theme dropdown menu and select Change theme. Then click Set as active theme on the desired theme card.

4. To change the theme from landing pages, click the name of the theme on the left side menu. Then click Set as active theme on the desired theme card.

5. On the theme selection screen, hover over a theme, then click Preview theme to open a preview of the theme or Set as active theme.
6. You can then select a template from the theme to continue building a page with HubSpot's drag and drop editor.

Create a page using a theme

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. In the top right, click Create or Get started.
3. If you haven't selected a theme previously, you'll be directed to the theme selection screen. On the desired theme card, click Set as active theme. To preview the theme, click Preview theme.
4. On the template selection screen, templates from your active theme will appear in the Theme templates section. To view templates that aren't part of your active theme, click Other templates.
5. To select a template from the theme, click Select template or Use.
6. In the content editor, edit page content using the drag and drop editor.

7. To take your changes live, click Publish or Update in the top right.

Apply a theme template to your blog

You can set a blog to use the same theme as your pages in your blog settings. The blog post and blog listing page templates are selected separately.

1. In your HubSpot account, click the settings settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Content > Blog.
3. If you have multiple blogs, click the Select a blog to modify dropdown menu and select a blog.
4. Click the Templates tab.
5. In the Blog Post Template and Blog Listing Page sections, click the Actions dropdown menu and select Change template.

6. On the theme selection screen, click the desired theme card, then click the template card. In the bottom right, click Done.

Please note: for blog listing pages that can be edited in the content editor, these steps will lead to the content editor instead of the theme selection screen.

Edit theme settings

You can customize the styling of your theme including font, colors, and spacing in your theme settings. Styles edited here apply to all pages and theme modules included in this theme. Learn more about managing theme settings.

Manage themes

In the design manager, you can edit, clone, or copy a theme to another HubSpot account. You can also delete cloned themes, custom themes, as well as create child themes.

You can edit the theme settings of a child theme without affecting the parent theme, but it won't create additional copies of theme assets. To copy a parent theme's assets, it's recommended to clone the theme.

Clone a theme

To edit the coded files of default themes in the design manager, they must first be cloned.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the @hubspot folder. This folder has all themes and default modules, including drag and drop email modules.
3. Click a theme folder.
4. Click the File dropdown menu and select Clone theme.
5. In the dialog box, enter a name for the theme.
6. To change the file location of the cloned theme, click Change in the File location field. Then select a location. By default, the root folder will be selected.
7. When finished, click Create.

Create a child theme

In the design manager, you can create a child theme based on a purchased Template Marketplace theme or a default HubSpot theme. You can edit the theme settings of a child theme without affecting the parent theme.

Developers can also create child themes based on custom themes and create child themes using the CLI using the developer documentation. Learn more about working with child themes.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the @marketplace folder for Template Marketplace themes or the @hubspot folder for default themes.
3. Right click a theme folder, then select Create child theme.
4. In the dialog box, enter a name for the child theme.
5. To change where the child theme will be saved, click Change in the File location section. Click a folder, then click Select.
6. To customize the names of the theme's CSS and JS files, click Advanced options, then enter new file names in the CSS and JS fields.
7. To finish the process, click Create child theme. You can edit the styling for the child theme in the content editor.

Copy a theme to another account

You can copy a theme folder from one account to another. You must be a user with 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:

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, hover over the theme folder that you want to copy, then right-click the folder and select Copy to different account.
3. In the dialog box, click the Destination account dropdown menu and select an account. Then click Copy asset. The folder will appear in the destination account as soon as the copying process completes.
   
   

Upload a theme

Users in Content Hub accounts can purchase HubSpot themes from Envato's ThemeForest Marketplace, then upload them into HubSpot from the theme selection screen:

1. Navigate to the HubSpot CMS Hub section of Envato's ThemeForest Marketplace.
2. Purchase a theme from the marketplace.
3. You'll receive an email with a purchase code for your purchased theme. Copy the purchase code.
4. In your HubSpot account, navigate to Content > Website Pages.
5. In the top right, click Create.
6. On the Choose a template page, click the Theme dropdown menu, and then click Change theme.

7. On the Choose a theme page, click Install a theme from ThemeForest at the bottom of the page.
8. In the dialog box, paste the purchase code from the email, then click Install theme.
9. In the new tab, sign in to Envato's ThemeForest Marketplace to finish the installation process.
10. When you have signed-in, a banner will display in HubSpot. It may take a few minutes for your theme to be available.

Delete a theme

Cloned themes, and uploaded themes can be deleted from the design manager:

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the folder with the theme's assets.
3. Click the File dropdown menu and select Delete [folder name].
4. In the dialog box, select the checkbox to confirm you have reviewed the dependents, then click Delete this folder.

Purchased themes must be uninstalled from the Template Marketplace:

1. In your HubSpot account, click the Marketplace icon marketplace in the top navigation bar, then select Marketplace Downloads.
2. On the Themes tab, click the Actions dropdown menu and select Uninstall for the applicable theme. 
3. Before uninstalling, you may need to change the template of a blog post or page. Learn more about changing a page or post template. 
4. In the dialog box, click Uninstall.