Creating global groups can save a lot of time and effort. As the name suggests, global groups can be used on all your websites. The content which appears in global groups forms the global content. When you change the content of a global group, the changes get reflected globally on all the websites where this global group appears. Some common use cases where global groups thrive are header and footer modules. Since headers and footers are almost common throughout all sub-pages on a website, declaring them as global groups is an effective way to handle content. One important factor where global groups become very effective is how the global content is managed using different languages. If your website offers content in multiple languages, those respective variations in content can be created in a global group. These variations get reflected on the page when the page language is set while creating a page.
Hi! I am Sumeet Hande, a front-end engineer at Addend Analytics and in this blog, we will go through how we can effectively set up global groups and global content.
Step 1: Creating a Global Module
For this demonstration, let us create a piece of content which provides information in the form of a simple heading and a paragraph. We first open the design manager by navigating to the Marketing tab, hovering over ‘Files and Templates’ and selecting Design Tools from the menu. We will create a new module by clicking the ‘Create a new file’ button. From the drop down menu, select Module and click Next. Fill in the information in a similar manner we did while creating previous modules. However, now since we want our module to have a global scope, we will click the ‘Global Module’ radio button and hit ‘Create’. This creates an empty module for us and opens up the module editor. However, since this is a global module there is a slight change in the Inspector section of the module editor. You will see an additional tab labelled “Global and Smart Content”.
How let’s fill in the fields, html and css to create a simple information box which looks like shown below,
As you can observe in the above illustration, on the left side, the preview data does not provide any editing facility. Since this is a global group, it can only be edited in the global content editor. The html and css for this are as follows,
This module contains only two hubl fields, a text field and a rich text field with variable names ‘heading’ and ‘premium_info’ respectively.
Now, we publish the changes, and ensure that the “Make available in Templates and Pages” option is enabled.
Step 2: Creating a template and importing the Global module
After the module creation, we will create a new drag and drop template which will contain this global module. Click on create file again and this time choose “Drag and Drop” from the drop down. We will search for the created module in the Inspector and drag it onto our new template.
Publish the changes to save the newly created template.
Step 3: Creating language variations for the Global Module
Now, after the changes have been published, click on the module in the template. This enables options and settings for the module which we can see on the right, in the Inspector section. Scroll down in the Inspector section till you see Global Content. Clicking the “ Edit Global Module” opens up the Global Content Editor for that Global Module.
(Global Content Editor)
The global content Editor looks pretty much similar to the preview mode of any custom module with a few exceptions. In the top center of the global content editor, there is an option to select a language. Click the “Not selected” link and select “Add/Edit multi-language variations”. This opens up a new dialog section which prompts to set a primary language. Since this module uses English, we will set English as the Primary language.
Click on save to add the primary language to the module. This will display the language as “English (Primary)” on the top center as shown,
In this way you can add multiple languages for the same module. Now, let us add German as another language to this module using the same procedure. After adding German as an additional language variation, we select German from the top center language option. After that, we can edit the contents of the module. Let us translate the default content and put it in German. Now as we make changes to this content, the English variation does not get affected. In this way, here in the global content editor, we can make various language variations for one single global module. The important point to note here is that, in order to create language variations for a single module in such a manner requires a module or a template to have a global scope. In such a way, we are using only one module but displaying content in different languages. This saves us the time and effort of duplication of modules for different languages. When a content editor creates a website page using this template, the module content will change according to the language which is set by the content editor for that website page. If the content editor chooses a language for which a variation is not created, hubspot will display the global module in its primary language variant.
In this manner, we can create complex global modules like website headers and footers and manage the language variations for the same using the global content editor.
Sumeet Hande
Front-end Engineer
Addend Analytics