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. If you have a professional developer on your team, they can design a custom website theme for your site using HubSpot's reference documentation for designers.

How website 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. After 

• 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, 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 global 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: the styling options available within your theme's setting depend on the theme 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. Your theme's colors, fonts, and spacing are managed from here and are applied to all aspects of your theme's default content and theme modules.

To apply more detailed styles to a specific heading or element within your theme, you can edit More settings. Learn more about managing theme settings.