Create website content using a theme

With website themes, you can build a beautiful, cohesive, and responsive set of pages for your business without hiring a professional web developer. A theme is a set of styles and templates you can apply to pages and blogs in your CMS Hub account.

What is a theme?

A website theme is a set of templates and style settings that anyone can use to create an entire website. CMS Hub accounts include a variety of HubSpot-provided default website themes that can be customized for any business.

Each default website theme includes:

• Templates: a set of templates for your website, including a homepage, about page, landing page, and blog templates.
• Modules: a set of unique theme modules you can add and customize on any page template in that theme. 
• Theme settings: default settings for your theme's templates, including fonts, spacing, and colors. 
• Global content: theme templates include global content, like your website footer, which is repeated on multiple pages.

If you have a professional developer on your team, they can design a custom theme for you with the CMS reference documentation. Or you can connect with a Solutions Partner to find a developer who can create a custom theme for your website. 

How themes work

• To make sure that your website looks consistent, style settings for all pages using the same theme are managed in one place in your theme settings. This way every new page you create has the same fonts, colors, and styles.
• You can customize content and styles within the page editor as you work. Keep in mind that different themes may have different options, based on how the theme were designed by your website developer.
• If you want to feature a unique color or font on a specific page, some style settings can be controlled within the page editor. Keep in mind that it's a best practice to have consistent fonts, colors, and styles throughout your entire website.

Preview a theme by creating a new page

You can easily preview a theme from your pages dashboard:

• In your HubSpot account, navigate to Marketing > Website then select Landing Page or Website Page.
• In the upper right, click Create and select a Landing page or Website page.
• Click a theme to see the templates included in that theme.
• To preview the theme, hover over a template and click Preview in the upper right. You'll see an interactive preview of the theme before progressing to the content editor.

To create a page with this theme template, click Use template in the upper right. Then give your new page an internal name.

Edit content for pages using a theme

Each theme includes its own set of theme modules. These modules are grouped in horizontal rows and vertical columns. These rows or columns may be grouped in sections that create the structure of your page layout.

Customize theme module contents with your own images and text to quickly build a beautiful, consistent, and professional site. You can drag and drop additional modules types into a page that's using a HubSpot theme template.

Learn more about how to edit content in a page using a theme template.

Please note: if your web developer has built a custom theme for you, and you want the ability to add more modules to your layout in the page editor, make sure the page templates in the theme include a drag and drop area.

Apply a theme template to your blog

If you're also hosting your blog content on your CMS Hub account, 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.

Please note: the only editable modules in your blog post template are the default modules included in your blog's global header and global footer. Learn more about how to edit global content.

Edit theme styles

To make sure your website follows best practices for visual design, themes have standardized colors, fonts, and styles applied to buttons and forms on your website content.

Please note: if you're using a custom theme, the styling options available within your theme's setting depend on the theme field options included by the developer who originally designed the theme.

You can access global theme styles within the page editor by clicking the Design tab on the left. 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.