CMS-General

Create and edit modules

Last updated: August 3, 2018

Applies to:

Marketing Hub: Basic, Pro, Enterprise

You can use the module editor in the design manager to create modules to add custom or advanced features to your blog, page, or email, while still allowing your marketers to customize the module content in the content editor.

The module editor has three editing panes for HTML and HubL, CSS, and JavaScript. Including all three elements allows you to use modules consistently across various portals you manage, or across multiple templates. Examples of what you can use the module editor to create include:

  • Custom image galleries or image sliders
  • A list of events
  • An employee list with headshots and bios
  • A section that allows the user to toggle CSS classes to control its presentation

Please note: creating modules requires knowledge of HTML, CSS, HubL and the HubSpot design manager; it is up to the user to include the necessary stylesheets and relevant JavaScript files in any pages using custom-created modules. It is recommended to work with a designer to create modules.

Create a new module

  • In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Design Tools.
  • In the upper-left corner of the finder, click File New file.
  • In the dialog box that appears, select Module.

create-new-file-module

  • Select whether you want to use this module in page templates, blog templates, and/or email templates.

Please note: there are technical differences between these module types that make them incompatible. For example, CSS and JavaScript will be disabled if you select Email templates for email compatibility.

  • Select if you'd like the content scope of the module to be a 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.
  • Give the module a file name, then click Create.

set-up-your-new-module

Add fields to your module

  • In the module inspector on the right, click the Add field dropdown in the Fields section, then select a field to add to your module.

module-add-field

  • You can edit the name of your field by clicking the pencil icon next to the field name, as well as edit the HubL variable name.

Add field default content

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

In the example below, the field type is an image field, so the default content options are to select a default image and hide size controls.

field-content-options

Set field editor options

In the Editor Options section, you can enable the following options:

  • Make this field required: the user will not be able to leave this field blank.
  • Prevent editing in content editors: the field content cannot be edited by end users when the module is selected in the content editor. The field content is still editable at the template level. This option is not available for global modules, which cannot be edited on the page level.
  • Help text: add help text to the field to give users context or instruction.

field-editor-options

Set field display conditions

You may wish to display a field to a user only if another field meets certain criteria.

  • In the Display Conditions section, click the HubL variable dropdown menu to select a module field, then click the is not empty dropdown to choose the condition for that field.
  • If you select the condition is equal to, enter a value or regex.

In the example below, display conditions are being set for an image field. The condition is that the value in image_title (a text field) must be equal to Headshot in order for the image field to appear in the module.

field-display-conditions

The display conditions will be automatically enabled once you've set a condition. To disable the display conditions, click the toggle switch on the right of Display Conditions.

Learn more about field display conditions in the designer documentation.

Set field repeater options

Lastly, you can set repeater options for your field. Repeaters are fields and groups that can create multiple objects and display them using a for loop.

  • In the Repeater options section, select a minimum and/or maximum number of required instances of this field.
  • You can also choose to set a default object count, which will be the number of instances of the field that will appear by default in the module.

In the example below, the image field is being set up as an image slider. The object count limits are set so a minimum of image fields will appear in the module, up to a maximum of 5 image fields. A user will see image fields appear in the module by default, and can choose to add one more image field or remove one existing image field.

field-repeater-options

The repeater options will be automatically enabled once you've modified one of the options. To disable the repeater options, click the toggle switch on the right of Repeater Options.

Learn more about field repeating and loops in the designer documentation.

Copy and paste your field snippets

  • When you're ready to incorporate one of your custom fields into your module, copy and paste the field snippet into the module's HTML + HubL editor pane.
    • If you're in the field inspector, click Copy snippet on the right of the field's HubL variable name.
    • If you're in the module inspector, hover over the field and click the Actions dropdown, then select Copy snippet.
  • Click into the location you'd like to add the field in the HTML + HubL editor pane, then paste the snippet by pressing Ctrl+or Cmd+V.

copy-paste-field-snippet

Write your module syntax

As you edit your module, you can write additional module syntax in the HTML + HubLCSS, and JS editor panes. Learn more about the module code editor and module syntax reference in the designer documentation.

Preview your module

You can preview how your module will appear and work in a content editor at any time by clicking the Preview button at the upper right of the module editor. The preview of your module will open in a new tab. This preview is synced to the editor and will automatically refresh as you work.

preview-module

Publish your module

Once you're done adding fields, writing your module syntax, and are satisfied with how the module appears and works in the preview, you can proceed to publish your module. Click Publish changes at the upper right of the module editor.

publish-module

Make your module available for templates

  • Switch the Make available for templates toggle ON at the top of the editor to make this module available to add to your templates.

content-toggle

  • Switch the toggle OFF if you want to make changes or test the module functionality. If this toggle is disabled, your team will see an alert that this module is not available for templates.

make-module-available

Add your module to a template

  • In the template layout editor, click the Add tab at top of the layout inspector, then search for your module. Custom modules that you've created can be identified by the custom module icon customModules.
  • Drag and drop the module to the location you wish to place it in the template.

add-custom-module

Add or purchase a module from the Marketplace

In addition to creating your own modules, you can add or purchase custom modules that other users or providers have created in the HubSpot Marketplace.

In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Marketplace.

In the Filter products section on the left, click the All products dropdown under Category and select Modules.

You can filter the available modules according to:

  • Price: select if the module is free or paid
  • Functionselect the type of function(s) the module includes (e.g. calculator, gallery, map)
  • Works with: select the template type(s) the module can be used in
  • Provider: select the provider(s) the module is offered by

Once you've decided on a module, hover over it and click View details. On the module details page, click Test this module at the upper right to test the module functionality before you add it to your design manager. For example, you can add your own custom content to see if this module will work for your site design.

Click Get module for free or Buy module for $x at the upper right. If the module is free, it will automatically be added to your design manager. If the module is paid, proceed to enter your payment details. Once payment has been processed, the module will be added to your design manager.

add-module-marketplace

Was this article helpful?

If you still need help you can get answers from the , or to contact support.