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.


.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.

Field Translations Area

Template usage

In the spirit of exposing things that were previously hidden behind menus and modals, Template usage is simply a quick way to access the id of this module and the proper syntax for using the module in a coded template.

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 change a module icon, 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