Use default modules in your template
Last updated: October 13, 2020
This is an overview all the default modules available for layout templates in the design manager tool. Each type of module can be customized with styling and content options in the inspector. After you add modules to your template, and learn how each of these standard modules can be used in your content.
Add a module to your template
To add modules to your drag and drop templates, click + Add in the inspector on the right-hand side of the editor. All default modules and any saved modules or groups will appear here. Use the search bar to look up a specific module. You can also use the dropdown menu to filter components by type, category, or tags.
Module styles, settings, and content can be modified in the inspector when the module is selected in the editor. Click Expand to add more custom styling in the code editor.
At the bottom of the inspector, you have the option to lock the module so that the content cannot be modified in a blog, email, or page editor. Switch the Prevent editing in content editors toggle on to to enable this setting.
Customize a default module
All Marketing Hub Professional and Enterprise and CMS Hub Professional and Enterprise accounts have a @hubspot folder in the design manager by default. This folder contains all of your themes and default modules, including drag and drop email modules. These themes and modules are read-only, but can be cloned if you want to edit them.
- In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- In the finder, click the @hubspot folder.
- Right click the default module that you want to clone, then select Clone module.
- The editing pane on the right will display the module source code, where you can then edit it as needed.
- To save your changes, in the upper right, click Publish changes. The module will then be available for use when building templates.
Types of default modules
You can use an advanced menu module to add navigation to your content and templates. Menu trees are created and managed directly in your content settings.
Within the design manager, you can customize the following features of your advanced menu modules:
- Menu: select one of your existing advanced menus from your content settings.
- Advanced menu type: select how menu items should appear on your site:
- Static - Always show top-level pages in
menu:keeps your menu consistent across all of the pages in your site's navigation.
- Dynamic by section - Show pages in
menuthat are related to sectionbeing viewed: displays menu items relative to the top level menu item being viewed.
- Dynamic by page - Show pages in
menuthat are related to pagebeing viewed: displays menu items related to the specific page being viewed.
- Breadcrumb style path menu (uses horizontal flow): displays menu items horizontally in a relative path across the top of your site.
- Static - Always show top-level pages in
- Max levels: the maximum number of child menu items that can display.
- Orientation: adds a class of hs-menu-flow-horizontal or hs-menu-flow-vertical to the menu wrapper container. These classes can be used in CSS to style horizontal and vertical menus. Learn more about classes added by module settings in our developer documentation.
- Enable flyouts: adds a class of flyouts or no-flyouts to the menu wrapper container. These classes can then be used in your CSS to target menus with or without dropdowns. Learn more about classes added by module settings in our developer documentation.
The backup unsubscribe template renders for email recipients if HubSpot is unable to determine their email address when that recipient tries to unsubscribe. This module allows you to customize the help text that appears on this page in the Default Content section.
The blog comments module adds a comment section to your individual blog post template. You can customize the blog comments form in your forms tool. The form will be named based on the title of your blog. This module is only available in blog template layouts.
The blog content module contains the HTML/HubL markup for both your blog posts and blog listing pages. You can edit the markup of the post by clicking Edit Post Template and edit the markup of the listing by clicking Edit Listing Template.
Learn more about blog content module markup. You can always revert the module to its original code by swapping the module to a new blog content module.
Blog email subscription
You can use the blog email subscription module to let visitors subscribe to your blog digest emails by filling out a simple form. This module is populated by your blog subscriber form, which can be located and customized in your forms tool.
Use the Select blog to display dropdown menu to choose the blog your visitors are subscribing to. You can customize the text that appears in the title above the form using the text box in the inspector. Hover over the existing inline response and click the expand icon expand to customized the text that appears after a visitor submits the form.
Please note: the blog email subscription module isn't supported in email templates.
A call-to-action (CTA) module is useful when you want the CTA somewhere on its own in your layout. You can also insert a CTA in a rich text module.
In the inspector, use the CTA
When a flexible column is added to a HubSpot page template, you can add, remove, and re-order modules, at the page-level in the content editor. This feature allows designers to create fewer templates, while still allowing marketers the flexibility to customize each page to fit their needs.
Please note: this module is not available on
When you add a flexible column module into your template, you can drag and drop other modules in to create a flexible column group. You can also right-click on an existing static group and choose Make flexible column.
Please note: once a flexible column has been customized for a particular page in the content editor, changes made to the flexible column in the template will not be reflected on that page. This ensures that customized content is not overwritten.
You can use the follow me
When you add a follow me module, you can customize the module header that appears above the social icons.
You can specify which social media networks appear in this module in the Follow Me section of your social settings (In your HubSpot account, navigate to Marketing > Social.).
Please note: the Follow Me module uses default icons for each social network. If you'd like to use your own custom social icons, you can create a customized version of the module.
Follow me - email
The follow me - email module offers additional formatting and settings options for email templates. Instead of mirroring your social settings, this module can be customized with whatever social pages you wish. You can also adjust the social icon shape, color scheme
To edit the social networks that appear in this module, click the + Add icon in the Social Network section of the inspector. Then hover and click on the pencil
Clicking the pencil icon edit gives you options to select which social network appears, and where you want it to link to. If you choose Custom Icon, you'll see additional options to specify a custom image for this network. Click Replace to choose an image from your file manager or upload a new image from your computer.
After you've made your selections, use the breadcrumb navigation at the top of the inspector to go back to the rest of the module options.
The form module allows users to select a form to add to a page. It is used to capture contact information from visitors to your website. It is available as a module that can be added to content and templates created with landing pages, website pages, and blog pages.
Please note: forms can not be added to email templates.
The form module allows you to:
- Give your form a title on the page.
- Choose which HubSpot form will appear on the page, or add a new form.
- Choose whether to redirect a person that submits the form to another page or display an inline thank you message on the same page.
- Customize the inline thank you message your
- Send form notification emails to a specific address.
- Add visitors that submit the form to a workflow (Marketing Hub Professional or Enterprise only).
- Send a follow-up email to visitors that submit the form.
You can use a header module to display a line of text in a heading HTML tag. You can customize the text in the Header content and use the dropdown to choose which heading tag (H1-H4) will be rendered.
You can add a horizontal spacer module to your templates to add in blank space that customizes the layout of your content modules. This module creates an empty div tag that can be used to add spacing between elements on a page.
Image modules allow you to add
You can also customize:
- The URL people will be taken to when they click the image
- The alt text of the image
- The size of the image.
- To scale the image based on the browser and device size, select Automatically adjust. If you select this option, you can set the maximum size of the image in the Maximum size section. To use the image's original size as the maximum size, select Image's original size. To manually set a maximum size, select Custom, then set the Maximum width and Maximum height.
- To make the image the same on all devices, select Exact width and height.
The image gallery module can quickly add a dynamic visual element to a HubSpot page. In the inspector you can customize the following options:
- Click + Add in the Slide section to insert more slides. Slides can be rearranged by dragging and dropping them into place. Hover over a specific slide and click the edit icon edit to add a caption and image.
- Use the Display mode dropdown menu to select a standard slideshow, thumbnail navigation, or lightbox gallery of images.
- Switch the Loop slides toggle on to repeat your slides from the beginning after they've all been viewed.
- Switch the Auto advance toggle on if you want the slides to change on their own.
- If you select this option, use the arrow buttons to specify the number of seconds between in slide.
- Switch the Show navigation buttons toggle on to indicate whether you want visitors to click through images on their own.
- Use the Variable height dropdown menu to choose Fixed height if the gallery should remain the same size while scrolling through every image. Choose Variable height if you'd like the gallery to resize based on the size of the image.
- Customize the transition in between slides using the dropdown to select Slide or Fade.
- If your images have captions, you can select to Always keep captions below the image or Superimpose captions on top of images.
The language switcher module will allow visitors to your landing and website pages to switch between translated versions of the page. You can customize how the names of your translated languages will appear on this module.
Pagelang- means that the names of the languages will appear in the language of the current page. For example, if you're viewing the English version of a page with a French translation, when you click the language switcher, you'll see English and French as the language names.
- Localized - means that the name of each language will appear in that language. For example, if you're viewing the English version of a page with a French translation, when you click the language switcher, you'll see English and Français as the language names.
- Hybrid - is a combination of the two. For example, if you're viewing the English version of a page with a French translation, when you click the language switcher, you'll see English and French (Français) as the language names.
If this module is included
The Logo module pulls in your company logo automatically from your content settings. If you'd like to change this logo, you can click the Override default logo for this page toggle on to upload a new image for this page only. You can also click Edit in content settings to update your company logo for all content.
Your logo module will automatically link to your company domain, but you can enter a unique Link URL to override this default.
Main email body
The main email body module is a standard rich text module that is included by default in every email template. It specifies the primary rich-text area for your marketers to use when drafting emails. You can customize the default content for the email body on a particular template.
In addition to the standard STYLING OPTIONS, this module can be customized with default colors, borders, and spacing. Use the color bubble to choose a color from the color picker, or enter the hexadecimal value into the text field. You can also use the text fields to specify a width in pixels for the module border, inner spacing, and outer spacing.
Office location information
This module includes required tokens that must be included in every email template in order to legally send commercial email. While you can edit the format of this section, you will not be able to save an email template without an office location information module or the required
In addition to the standard styling options, this module can be customized with default colors, borders, and spacing. Click the color bubble to choose a color from the color picker, or enter the hexadecimal value into the text field. You can also use the text fields to specify a width in pixels for the module border, inner spacing, and outer spacing.
One line of text
The one line of text module allows content creators to edit a single line of text on their page or email. This module is useful for creating simple text fields, where the end user does not need to make any formatting decisions.
The page footer module displays copyright information with the current year and your company name. There are no editable content fields for this module in the design manager because the company name is pulled in automatically from the Footer section of your email settings.
Password prompt modules are available on password prompt system templates. If a page is password protected, the password prompt page will display before a user can access the page. You can customize the submit button text and the text to display if the password is entered incorrectly.
The post filter module is used to display a list of blog articles from a specific topic, month, or author. This module is not available in email templates.
You can customize the following settings in the module defaults:
- The blog for which you'd like to display filter values
- List of values for filter links (topics, month, or author)
- How to order the values (post count or name)
- List title to display
- Maximum number of blog posts to list
- Text link to display if more posts values are present than are allowed to display
The post listing module to used to display a list of the most popular articles from a HubSpot blog. The order of blog posts you will see displayed in this module are the blog posts with the most views from greatest to least. This module is not available in email templates.
You can customize the following content defaults in the inspector:
- The blog for which you'd like to display post titles
- List blog posts by most recent or most popular during a given timeframe
- List title to display
- Maximum number of blog posts to list
The rich text module is the most common content module used across the various HubSpot content tools. It offers the most editing options for your content, such as text formatting, images, links, CTAs, and more. Marketing Hub Professional and Enterprise accounts can use rich text modules to add smart content to a page.
You can use this module to create editable content areas for your marketers. If you'd like to add default content for this module, click Expand or click anywhere on the preview content to open a rich text editor.
You can use an RSS listing module to display post summaries for a HubSpot blog or external RSS feed. This module is not available on email templates (use an RSS email instead).
RSS listing modules can be customized to filter a specific blog and even a specific tag. Click the corresponding toggle on to indicate whether a featured image, author name, summary, or publish date should be shown with each post.
After enabling these settings, you can customize for following details:
- Show author name - enter the Author attribution text you'd like to use above each author name. By default, this module will include by as the attribution text.
- Show summary - enter the summary length (characters) of each blog summary. You can also customize the Summary clickthrough text, which is the link blog visitors click to read your full post. By default, this summary clickthrough text will be labeled Read more.
- Show publish date - choose the Publish date format to customize how the date and time are formatted for each post. You can also customize the publish date indicator text. By default, this text will read posted at.
You can use the section header module to display an h1 heading tag with a paragraph subtitle. This module is ideal for titling the primary section of a page.
Simple menu modules allow users to create page specific menus in the content editor. This module gives you the flexibility to build a simple menu for a specific template. In the inspector, click Edit menu to add menu items, links, and select the menu orientation. Editing the menu orientation setting adds a class of hs-menu-flow-horizontal or hs-menu-flow-vertical to the menu wrapper container, which can then be used for styling in your CSS. Learn more about classes added by module settings in our developer documentation.
The social sharing module lets visitors easily share your content across social media channels and email. Click the corresponding social network toggle to include the selected networks on your page or email. The sharing link will automatically populate with the required HubL tags to share your content. In emails, the module will use the web version URL of that email in the share link.
Please note: the social sharing module uses default icons for each social network. If you'd like to use your own custom social icons, you can create a customized version of the module.
Subscription preferences modules are special modules only available on subscription preferences system templates.
These modules let you customize the page an email recipient sees when he or she goes to manage their subscription preferences or unsubscribe from your email communications.
Subscription update confirmation
This is a rich text module that is available on subscription update confirmation system templates that allows you to customize what displays when an email recipient updates his or her subscription settings.
View as web page
The view as web page module gives email recipients the option to open the web page version of an email. Different email clients can render HTML emails very differently, so including this option in an email template ensures that your users can always view the email as it was intended to render by opening the browser version.
Personalize your content
With personalization tokens, you can show personalized content to contacts based on their property values in...Knowledge Base
Add smart content to your emails, website pages, landing pages, and templates
With smart content, a module can display different versions of your content based on certain viewer criteria.Knowledge Base
Build a custom coded template
In your design manager tool, designers can build templates with HTML from scratch. For Marketing Hub ...Knowledge Base