Become a HubSpot power user — join us for HubSpot Training Day 2017.

How to use custom modules to add custom site features

Last updated: January 24, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

Design Manager gives you the capability of coding custom modules that can be used to add advanced features to a page, while still making it simple for your marketers to customize the contents of these modules. Custom modules support HTML, CSS, Javascript, and HubL. Some ideas for custom modules include the following:

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

Please note: the creation of custom modules requires knowledge of CSS and the HubSpot Design Manager; it is up to the user to include the proper stylesheets and relevant JavaScript files in any pages using custom modules. It is recommended that you work with a designer to create custom modules.

Instructions

Follow these instructions to create a custom module.

Navigate to Design Manager

Navigate in HubSpot Marketing to Content > Design Manager.

Create a new custom module

Select the Custom Modules folder from the left-hand side > Select New custom module.

New custom module
Custom module select

Name custom module

Name and save the custom module. Please note that renaming custom modules will cause content inputed in the editor to be lost. Pages currently using this module will not be updated to reference the new name, and existing content will be lost.
Name custom module

Write markup

Write that markup to surround the editable fields. As previously mentioned, custom modules support HTML, CSS, and JavaScript.

Add fields

When you want to add an editable field for content creators, click add new field.

You can add new fields by clicking +Add new field, or reorder/delete fields by clicking Arrange fields. At this time, custom modules support the following field types:

  • TextA text field can be used to allow your users to insert a string of text in the content editor
  • Rich textRich text areas give your users all the options available in HubSpot's rich text editor
  • ChoiceThe choice field creates a dropdown where users can select the value.
  • BooleanA boolean field creates a checkbox for users to toggle specific sections of code in your custom module
  • ImageThe image field adds an image that allows marketers to choose uploaded images from the content editor
Set-up-custom-field.png

Copy and paste snippet

Once you are ready to incorporate one of your custom fields into your code, click copy and paste that snippet into your code (Ctrl V or Cmd V). You can learn more about custom module syntax in this article.

Publish custom module

Press Update or Publish to publish your custom module.

HubSpot Help article screenshot

Add to template

Finally, you are ready to add your module to any of your landing or site page templates. To add a Custom Module to a template, simply click the gear icon on any module and choose Swap module.

Swap module

You can then filter by Custom modules. Choose the custom mode that you would like to add, and click Select.

Add to template
Please note: at this time, you cannot add custom modules to blog templates.

Was this article helpful?

Previous article:

Next article: