Global content

Last updated:

Global content is content that is shared across portions of a website. Common examples are website headers, footers, and sidebars. As a developer, you'll specify which components should be global by using global partials or by making modules global. HubSpot provides a different editing experience for content editors that makes it easy to edit the global content and preview the changes across pages before publishing. To learn more about how to edit your global content, check out how to use global content across multiple templates on HubSpot Knowledge Base.

Global content editor

Overview

Global content is best used to display the same information across multiple pages. For example, your website's header and footer, such as the header at the top of this page.

hubspot-developers-header

Below are some additional examples of areas where you can use global content:

  • Secondary navigation for different sections of your website
  • Copyright footers (or sub footers)
  • Blog post sidebars (for showing recent posts, author listings, and more)

Because global content is used in multiple places throughout a website, it is even more crucial to design and build your global partials and modules for accessibility.

Global partials vs global modules

As a developer, you can create global partials and global modules, with a few key differences between them:

  • Global partials are a type of template built using HTML & HubL that can be reused across your entire website. The most common types of partials are website headers, sidebars, and footers.
  • Global modules are modules that are made up of single or multiple pieces of content that can be used across multiple pages on your site. Some common types of global modules can be items such as blog subscribe forms, secondary navigation elements, and calls-to-action.
You should avoid including global modules within global partials, as it can create a negative content editing experience.

All modules and fields inside of your global partials and global modules are easily editable inside of the global content editor.

Global partials

Create a global partial

A global partial is a type of template, which you can create locally through the HubSpot CLI by using the create command, as shown below.

hs create template <partial-file-name>

When prompted to pick a type of template, select global partial.

This will create your template in the desired directory with the following template annotations included in the HTML file.

<!-- templateType: global_partial label: Page Header -->

To see a sample of a global content partial, please reference our boilerplate on GitHub.

Add drag and drop areas to global partials

You can enable drag and drop content capabilities inside of your global partials by adding in dnd_area tags similar to enabling them in page templates. View our Drag and Drop Area documentation for more information. 

Include a global partial in your existing template

To add a global partial into one of your existing templates, use the global_partial HubL tag while referencing the path to your partial. Below is an example from the CMS boilerplate using this tag.

{% global_partial path="../partials/header.html" %}

When global partials are output, they contain a wrapping <div> around the global partial. This is used by the page editor to identify that the piece of content is a global partial.

<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"> <!-- Your header.html code is output here --> </div>

Please note: do not use global_partial within the <head> of a template. Doing so would result in invalid HTML.

In most situations where you'd want to use a global partial in the header, it may make more sense to use a global module instead with a {%require_head%} to insert custom code into the head, and still provide module fields.

Global modules

You can create global modules like any other module using the CLI by running the hs create command, as shown below.

hs create module <module_name>

A global module is differentiated by the global flag in the module's meta.json file.

// meta.json file { "css_assets": [], "external_js": [], "global": true, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

You can also create global modules in HubSpot by using the design Manager.

Learn more about working with modules in the following related resources:

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.