Global Content

Last updated:

Global content is content that is shared across portions of a website. Common examples are  website headers, footers, sidebars, logos, or other components. Developers establish which components should be global by using global partials or through making modules global. When editing a global component, a different editing experience is provided 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, please refer to our knowledge base article on how to use global content across multiple templates.

Global content editor

When should I use global content and where

Global content is best used in areas of a website where you will have consistent information displayed across multiple pages. A great example of this is your website's header and footer. Another example of global content can be found at the top of this page. The header of the developers site utilizes global content to create the top header that you see illustrated below.

HubSpot Developers Site Global 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

Global Partials are pieces of HTML & HubL content 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.

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

Creating a Global Content Partial template using local development tools

You can create a new Global Partial Template by using the create command and using global-partial as your template type as illustrated below.

Shell script
hs create global-partial <name> <dest>

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

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

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

Including your Global Content Partial in your existing template

To add your 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 our boilerplate using this tag.

HubL
{% 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 in a global partial.

HTML
<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html">

    <!-- Your header.html code is output here -->

</div>

Creating a global module

Global modules can be created just like any other module using your CLI tools. The main difference between signifying a module as a global module vs standard is the global flag in the modules meta.json file (see line 5 in code samples below).

Global Module

JSON
// 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
}

Non-Global Module

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

Creating a module using the hs create module <name> <dest> command and setting this flag to true in the meta.json file will let the system know the module is a Global Module. To get started using modules, head over to our Modules Overview page. You can also create global modules through the Design Manager. To learn more about creating modules (both global and custom) please refer to our knowledge base article on creating and editing modules.