Modules

Table of contents
Close

Module options

The new module framework includes a few simple but powerful options for organizing and accessing modules in the Design Manager.

Fields

This is the area where you can add different field types to your module and group them as needed.

Fields area in a custom module

Linked files

This is the appropriate place to attach assets like CSS and JS libraries and frameworks. If you have previous experience with modules, you’ll want to check the reference page to make sure you aren’t relying on a method that is no longer supported.

Linked Files Section in Custom Module

Stylesheets and JavaScript files will be automatically loaded into the head and foot of the document respectively. Other files will be flagged for inclusion when a module is moved/copied. You will still need to link these assets wherever appropriate in the code editor. In most cases, you'll want to use the module_asset_url function for these links. 

The module_asset_url function is the only HubL accepted in the CSS and JS sections of the module editor. It returns the full URL of a linked file. This function accepts one parameter, the filename of the asset. Below is an example of using it to link to a png named arrow.

You can also add linked CSS and JS through the local development tools by editing the module's meta.json file.


.arrow{
    background: url({{ module_asset_url('arrow.png') }});
}

Filter tags

Tags help users find the module they’re looking for. A module designer can attach tags for content type and purpose. This can be immensely helpful for your clients or your future self to keep modules from getting lost in crowded portals.

 

Filter Tags Section in Custom Module

Field Translations

Translate your module field labels, default content, and help text to multiple languages. Users will see the field labels for that module in their account default language. You can set translations using the local development tools or through the Design Manager.

Field Translations Area

Template usage

Clicking on a module in the design manager will expose it's usage snippet, which can be pasted into a template to display that module in pages with that template. Modules are identified by their path, so using the local development tools you can write out the module tag, and simply provide the path to the module.

Note there are a couple of different syntaxes for modules in templates depending on their use cases. You can also add default content to modules within the template files.

template-usage-area

Module icons

Module builders can now add an icon to their module. Icons help users differentiate between modules and give builders an opportunity to inject a little brand identity into the module.

To set the module's icon locally edit the module's meta.json file.

To change a module icon using the Design Manager, simply click on the current module icon. Icons must be in the SVG format and no larger than 10kb.

Note: Icons are rendered monochromatically. Additional colors will be lost, so it's recommended that you design and upload monochromatic icons for best results.

HubSpot Help article screenshot