Create and edit modules in the design manager

With the design manager, you can create custom modules to add advanced features to your blog, pages, or emails. Custom modules offer a wide range of functionalities so that content can be fully customized within the page, email, or blog editor.

Please note: creating modules requires knowledge of HTML, CSS, HubL, and the HubSpot design manager. HubSpot recommends working with a developer to create coded modules.

Create a new module

1. In your HubSpot account, navigate to Content > Design Manager.
2. At the top of 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.
4. Click Next.
5. In the Where would you like to use this module field, select the checkbox next to each type of content where your module will be used (e.g., Blog posts, Emails, or Landing pages). 
6. In the Module content scope field, select an option (e.g., Local module or Global module). If you create a global module, editing this module's content will update every location where the module is used. 
7. Enter a file name for the module.
8. To change the module's file location, click Change in the File location section. In the pop-up box, select a new location and then click Select.
9. When finished, click Create.
10. Continue editing the module.

Please note: modules used in emails can only be created in accounts with a Marketing Hub Professional or Enterprise subscription. They can't include CSS or JavaScript. 

Edit a module

After creating a module in the design manager, you can customize its functionality and appearance. Label the module for clarity, add and configure fields, and adjust field editor options such as default content. Set display conditions and repeater options, and group the related fields for better organization. You can also copy and paste field snippets, write custom module syntax, add helpful instructional text, and edit which template types your module can be used with.

Add a label to a module

In the design manager, you can add or update a label for a module to help users identify it in the content editor. If the label is blank, the module’s name will be shown by default.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module you'd like to edit the label for.
3. In the inspector, enter a label.

Add fields to a module

Add fields to a module to set the module's content or styling and make it editable in the content editor. Learn more about available field types. 

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, in the Fields section, click the Add field dropdown menu. Then select a field to add to the module.

4. To edit the name of the field click the edit edit icon and enter a new name. To edit the HubL variable name, enter a new name in the HubL variable name field. 

Customize field default content

In the Content Options section, you can add default content that appears when the module is used in templates and content editors. The options for default content will differ depending on the field type.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, in the Fields section, hover over a field and click Edit.
4. In the Content options section, add or edit default content options. The available default content options will depend on the field type selected.

For example, by adding a Date and time field type to a module, you can select a default date and time. You can also enter a default time interval.

Set field editor options

In the Editor Options section, you can make a field required and prevent editing in the content editor. You can also customize help text. 

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, in the Fields section, hover over a field and click Edit.
4. In the Editor options section, to make the field required, toggle the Make this field required switch on. This will prevent users from leaving the field blank within the content editor.
5. To prevent a field's content from being edited, toggle the Prevent editing in content editors switch on. The field's content can still be customized in the design manager at the template level. This option isn't available for global modules.
6. To add context or instructions on how to use the field, enter text in the Tooltip help text field or in the Inline help text field.
   • Tooltip help text: this text will appear in a tooltip when a user hovers over the infoCircleIcon info icon in the content editor.
   • Inline help text: this text will appear below the field when a user is editing the module in the content editor.

Set field display conditions

In the Display conditions section, you can use field display conditions to set a module field to only appear if another field meets certain criteria.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, in the Fields section, hover over a field and click Edit.
4. In the Display conditions section, click the HubL variable dropdown menu and select a variable. 
5. Click the second dropdown menu and select an option (e.g., Is equal to or Is not empty). More condition fields may be required, depending on the option selected. For example, if you select Is equal to, an additional value field is required.
6. By default, display conditions are automatically switched on once a condition is configured. To turn off display conditions, toggle the Display Conditions switch off.

Set field repeater options

In the Repeater options section, you can configure repeater options for fields and groups. When repeater options are turned on multiple objects will be created and displayed using a for loop.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, in the Fields section, hover over a field and click Edit.
4. In the Repeater options section, enter a number in the Minimum and Maximum (optional) fields. This will set the minimum number of times the field will appear in the module up to the maximum value. 
5. To set the number of times a field should display by default, enter a number in the Default object count field.
6. By default, repeater options are automatically switched on once configured. To turn off repeater options, toggle the Repeater options switch off.

For example, an image field's repeater options are changed to show at least three and up to five image fields. A value of four image fields is configured as the default. In the content editor, a user will see four image fields by default and can add one more image field or remove an existing image field.

Group module fields

After creating fields, you can group them together to keep your fields organized by relevance. Field groups can be used to build out custom field logic. You can group up to four fields together. Learn more about module field groups. 

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, in the Fields section, click the Actions dropdown menu and select Group.
4. Select one or more fields to group together and then click Create group.

Add help text to your module

In the Editor options section, you can add help text to give users context when editing the module. This text will display above the fields in your module. 

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, in the Editor options section, enter text in the Inline help text field.

Manage content types and availability for a module

Add or remove the types of content that users can use a module for, like Blog posts or Landing pages. You can also toggle the availability of a module in templates and pages on or off.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. To edit content types for a module, click the Content types below the module's name in the inspector on the top right.

1. • In the dialog box, select or clear the checkbox next to each type of content where your module will or won't be used (e.g., Blog posts, Emails, or Landing pages). 
   • When finished, click Update.

4. To manage the availability of a module in templates or pages, toggle the Make available for templates and pages switch on in the top right. To test the module's functionality or turn off availability in templates and pages, toggle the Make available for templates and pages switch off. 

Please note: toggling the Make available for templates or pages switch off, will not remove the module from any existing templates or pages.

Copy and paste field snippets

When incorporating a field into a module, you can copy and paste the field snippet into the module.html (HTML + HubL) section within the module editor.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. In the inspector, hover over a module field and click the Actions dropdown menu in the Fields section. Then select Copy snippet. 
4. In the module editor, paste the field snippet in the desired location within the module.html (HTML. + HubL) section. You can use the keyboard shortcut Cmd+V or Ctrl+V. 

Write module syntax

As you edit your module, you can write module syntax in the module.html (HTML + HubL), module.css, and module.js module editor sections. Learn more about the module editor and module overview.

Preview and publish a module

Once you've finished editing a module, including adding fields and writing module syntax, you can preview and publish the module. 

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a module.
3. To preview a module, click Preview in the top right. You'll be directed to a new browser tab to preview the module. This preview syncs with the module editor and will automatically refresh as edits occur.
4. To publish a module, click Publish changes. 

Add a module to a template

After publishing a module, you can use it across templates by adding it to a drag and drop template or a custom coded template in the design manager. To add modules in the content editor, learn more about adding and editing modules in the content editor.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click to open a template.
3. To add a module to a drag and drop template in the layout editor, click the + Add tab at the top of the inspector.
   • In the Search field, enter the name of the module. To narrow your search to custom modules, click the Filter by category or tags dropdown menu and select Custom modules.
   • Click the dragHandleIcon drag and drop icon and move the module into position in the layout editor.
4. To add a module to a custom coded template:
   •  Right-click or Ctrl+click on the module in the finder, and select Copy snippet. Alternatively, click to open the module, and then in the Template usage section of the inspector, click Copy snippet.
   • In the custom coded template, paste the module snippet in the code editor.
5. When finished, click Publish changes in the top right.

Example

Create a countdown module

1. Create a module in the design manager and name it 'Countdown Timer'.
2. In the inspector, in the Field section, click the Add field dropdown menu.

• • Select the Date and time field. Enter the name 'Event date and time'. This will update the HubL variable name field to event_date_and_time.

• • Select the Color field. Enter the name 'Timer Font Color'. This will update the HubL variable name field to timer_font_color.

Please note: the HubL variable names must match the variable names included in the module.html (HTML + HubL) code section below.

3. In the module editor, copy and paste the following code into the module.html (HTML + HubL) section:

<!-- Hidden span to store the target date -->
<span id="target-date" style="display: none;"></span>

<!-- Display countdown timer -->
<div style="float: left; width: 100%; color: ;">
 <div class="time_container" style="margin-left: 30%;">
 <span id="days"></span><br>
 Days
 </div>
 <div class="time_container">
 <span id="hours"></span><br>
 Hours
 </div>
 <div class="time_container">
 <span id="minutes"></span><br>
 Minutes
 </div>
 <div class="time_container">
 <span id="seconds"></span><br>
 Seconds
 </div>
</div>

4. Copy and paste the following code into the module.css section:

.time_container {
float: left;
width: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. Copy and paste the following code into the module.js section:

// Function to calculate and display countdown
function updateCountdown() {
// Get the target date from the hidden span
const targetDate = new Date(document.getElementById('target-date').textContent);
// Get the current date
const currentDate = new Date();
// Calculate the time remaining (in milliseconds)
const timeRemaining = targetDate - currentDate;
// Check if the target date has passed
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// Calculate remaining days, hours, minutes, and seconds
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Display the countdown
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Update countdown every second
setInterval(updateCountdown, 1000);
// Initial call to update countdown immediately
updateCountdown();

6. When finished, preview and publish the module.
7. Continue adding the module to a template.