Use global content across multiple templates

Global content allows a section of content, such as a header or footer, to be reused across multiple pages. When global content is updated, the changes apply everywhere that global module or group is used. 

Global content can be created and edited in the design manager and edited from the content editor. 

Before you get started

Before using global content across multiple templates, review the following requirements and limitations.

Understand limitations & considerations

• Flexible columns, drag and drop areas, and coded modules can't be used in global groups.
• Changes to global content apply to all templates and assets that reference the same global module or group. 
• Drag-and-drop templates and coded templates use different methods for global content.

Create global content in the design manager

Global content can be created as a new module or converted from existing modules or groups.

Create a global module

1. In your HubSpot account, navigate to Content > Design Manager..
2. In the finder, click the File dropdown menu and select New file.
3. In the dialog box, click the What would you like to build today? dropdown menu and select Module, then click Next.
4. In the Where would you like to use this module? section, select the checkbox next to each type of content that'll use this global module. Global modules used for emails can't include CSS or Javascript.
5. In the Module content scope section, select Global module.
6. Enter a file name, then click Create.
7. In the module editor, continue to edit the module.

Convert an existing local module or group

1. In your HubSpot account, navigate to Content > Design Manager..
2. In the finder, click a template to edit its contents.
3. If you're creating a global group, you can edit the options of multiple modules. Press the Control / Command key, click the modules you want to group, then click the groupModule group icon in the inspector.
4. Click the module or module group to select it in the layout editor.
5. In the inspector, click the More dropdown menu and select Convert to global module/group.

Add a global module or group to a drag and drop template

1. In your HubSpot account, navigate to Content > Design Manager..
2. In the finder, click a drag and drop template to edit its contents.
3. In the inspector, click + Add.
4. Enter text in the Search field or click the Filter by category or tags dropdown menu to find your global module/group.
5. Click your global module/group and drag it into the template layout.
6. When finished, click Publish in the top right.

Use global content in coded templates

Coded templates don't include a Convert to global module/group option. Instead, global modules must be created and referenced manually.

1. In your HubSpot account, navigate to Content > Design Manager..
2. In the finder, click the File dropdown menu and select New file.
3. In the dialog box, click the What would you like to build today? dropdown menu and select Module, then click Next.
4. In the Module content scope section, select Global module.
5. Enter a file name, then click Create.
6. Create the required fields to match the original module. 
7. Copy the module's HubL snippet. 
8. Paste the HubL snippet in your coded template to reference the global module.
9. When finished, click Publish in the top right.

Please note: developers can alternatively duplicate the module and set "global": true in the duplicated module’s meta.json file via the CLI before updating templates to use it. Learn more in the developer documentation.

Edit global content in the content editor

Global content can be edited directly from pages or posts in the content editor. Updates apply to all assets using the same global module or group.

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.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your content.
3. In the content editor, click the siteTreeIcon content icon and then click the globalGroup global content icon for the global module.
4. In the dialog box, click Open in global content editor.
5. In the global content editor, click the siteTreeIcon content icon and use the drag and drop tools to edit the modules in the global group.
6. If you haven't previously added a logo, you can add a logo to your global header in the logo module. Learn more about configuring your branding. To add a logo, click the Logo module and then click brand settings.
   • In the dialog box, click Add.
   • Click Upload to upload an image from your computer or click Browse images to select an image from the files tool.
   • Enter text to provide a name for the logo in the Logo name field.
   • Enter text for the Logo alt text and Logo URL fields.
   • When finished, click Save. Then click Publish to [#] assets.
7. To edit a navigation menu, click the module. In the sidebar editor click Edit for the menu. In the dialog box, continue to customize the navigation menu.
8. To preview the global content on existing pages or posts, click the View on dropdown menu in the top left and select a page or post where the global content is displayed. To view the global content by itself, select Group only instead.
9. To create a multi-language version of the global content, click the Language dropdown menu in the top left and select Add/edit multi-language variations. Learn more about creating multi-language global content.

10. When finished, click Publish to [#] assets in the top right. These changes will be applied to all pages and posts using a template that includes the global content.

Edit global content in the design manager

Developers can edit global modules or groups in the design manager. Changes made to global content will be applied to all content using a template that contains the same global content.

1. In your HubSpot account, navigate to Content > Design Manager..
2. In the finder, click a template to edit its contents.
3. To edit the content of a global module or group for only a specific page, blog post, or email, you can make a local copy of the global content to edit in the design manager.
4. To edit a global group in the layout editor, click the global group in your template. Then in the inspector, click the More dropdown menu and select Edit global group. 

5. When finished, click Publish changes.