Table of contents

Basics of building modules

In this section, we’ll walk through the basic process of creating a module in the Design Tools, custom modules can be built using our local development tools as well. To access the Design Tools go to Marketing > Files & Templates > Design Tools.

Note: Developer created custom modules do not have a Styles Tab, as their structure and design are unique. If you want these controls for your modules they need to be added as fields in the module itself.

Create a new file

To create a module, click the New button in the Finder panel on the left of the screen, choose New File.

HubSpot Help article screenshot

Choose your file type

In the resulting dialog box, choose Module.

HubSpot Help article screenshot

Choose your module type

In the next dialog, enter a name for your module and choose where you’d like to use it. It’s important to note that there are technical differences between these module types that make them incompatible. Refer to the editor section below for details. For this example, we’ll create a module for page and blog templates. Leave Local module selected and click Create.

HubSpot Help article screenshot

Add a field

With your new module selected in the Finder panel, click on Add field in the Inspector section on the right side of the screen.

There are many new field options which are covered in detail in the reference section of this doc. For this example, choose the Text Field in the Content column on the left of the Add field menu.

HubSpot Help article screenshot

Add default content

Give your new field a name and add some Default text.

HubSpot Help article screenshot

Add your field to the module markup

Click Copy snippet in the HubL variable name section of the field editor. Paste the snippet into the HTML + HUBL section of the Editor in the center or the screen.
This Editor is discussed in detail here.

HubSpot Help article screenshot

Exit field editing

To exit editing for this new field and return to editing the entire module, click the module icon in the breadcrumbs at the top of the Inspector.

HubSpot Help article screenshot

Preview your module

Click the Preview button in the top right corner of the screen. The preview of your module opens in a new tab. This preview is synced to the editor and will automatically refresh as you work. Feel free to move the preview to a new window or monitor.
Preview Button in the Design Tools