Edit content in pages using a website theme

A theme is a set of styles and templates you can apply to pages and blogs in your CMS Hub account. The default styles for your theme are based on the fonts, colors, spacing, and styles you set within your global theme settings. You can add, remove, or rearrange theme modules in any template from that theme. Theme modules support smart content and personalization.

When creating new pages, it's important to have a clear content strategy so search engines can understand what your website is about. Learn how to set up topics in the SEO tool and optimize your page for SEO within the editor. Visit the Academy for a video overview about how to create and edit page content in HubSpot's CMS.

Create a new page

To create a new page with a theme template:

• In your HubSpot account, navigate to Marketing > Website > Website Pages.
• In the upper right, click Create and select a Website page.
• Click a theme to see the templates included in that theme.
• To preview a theme template, hover over the template and click Preview in the upper right. You'll see an interactive preview of the theme, so you can select it for your page or go back and preview more templates.
• In the upper right, click Use template.
• In the dialog box that appears, enter an internal page name. This name won't be visible to your website visitors.

Please note: in addition to this internal page name, you'll also be required to give your page a Title in page settings before publishing your page.

Edit page content

Theme templates are composed of modules, which can be grouped into horizontal rows or vertical columns. Modules, rows, or columns may be grouped into sections of elements, which are outlined in the page editor.

Most modules on your page can be edited inline directly within the content editor. Some module types require additional content customization in the left panel.

To customize content within a module, hover over the module and click the icon for the desired action:

• edit Edit: edit the contents of your module inline directly on the page, or in the left panel. Most text can be edited within the content editor, and all types of modules can be edited in the Options tab on the left panel. Learn more about editing module content.
• styles Style: manage the styles available on this module within the Style panel on the left. Most module styles can be managed in the Style tab, but some style options specific to your theme may be available within the Options tab.
• clonduplicate Clone: make a copy of this module on your page.
• delete Delete: remove this module from your page.

Themes may contain global content, which you can edit directly in the page editor. An example of global content is typically a page header or footer, with repeated elements that you want to appear across your entire site. While the contents of your page header and footer are managed within the page editor, the styles for your header and footer are managed in your theme's settings.

As you work in the page editor, your changes are saved automatically. You can view and restore previously saved versions of your page as you work. Learn more about how to customize a module in the editor.

Add modules to your page

In addition to the modules included on your theme template, there are additional Theme modules and Common modules available on the left panel. You can drag and drop a new module into place to add another element to your page. This makes it easy to adjust the design of a page to fit your content.

Edit page layout

To rearrange existing modules on your page, hover over a module, column, row, or section and click the blue handlebar that appears on the left. Drag and drop your content into a new position on the page. You'll see a blue line to indicate where the content will be placed in your layout.

In some cases, a module may be removed from a row, column, or section, leaving an empty placeholder. You can replace this module with a new one to keep the structure of your page consistent. Or, if you'd prefer to eliminate this module from your layout entirely, hover over the row or column, click the arrow and select eletedelete delete.

As you add and edit modules on your page layout, you can adjust the width of the elements on your page by clicking and dragging the vertical divider between columns.

Manage styles

Theme templates contain consistent styles, colors, and spacing. Depending on which theme you're using and how it was created, some theme styles can be customized within the page editor. Keep in mind that it's a best practice for your entire website to have consistent fonts, colors, and styles. Certain styles, such as your page header, page footer, and form title, can only be managed within your theme's global settings.

Style a row, column, or section of a page

You can apply styles to an entire row, column, or section of your page. To access styles for these elements:

• Hover over a row, column, or section to highlight it and activate its toolbar.
• Click the dropdown arrow and select Style [element].
• In the left panel, adjust the spacing, width, or color of the element. In some rows or sections, you can add a background image.

Style a module

In most cases, styles for your module, row, or column are managed in the Style tab on the left panel. In some themes, there may be additional style options within the Options tab on the left panel.

• Click directly on a module to access its editing options.
• Click the Style tab in the left panel.
• Expand the styles available for this module. 

• If you don't see the styles you want to edit here, click the Options tab to explore which style options are available within your theme.
  • If additional style options are available, they'll be at the bottom of the Options tab on the left.
  • Click Style options to access more options for this module's content. Any changes made here will only be applied to this page.

Please note: the style options available for a module or section of elements on your page depend on which theme you are using, and how it was designed.

Access theme style settings

You can access your global theme settings from within the page editor as you work by clicking the Design tab on the left panel. Click Edit theme settings to access your theme's settings.

Please note: any changes you make to your theme's settings from here will be applied to all pages and blogs using this theme.

Edit page settings

Click the Settings tab to customize your page title, URL, language, and meta description before publishing. Your Page title is required to publish your page.

Keep in mind that your page title and meta description will be visible in search engine results.

Publish your page

Before your page goes live, click Preview in the upper right to test how your page will appear on a mobile device. You can test how personalization or smart content will appear to your visitors in the page preview.

Once you're satisfied with your page's preview, click Publish in the upper right.