CMS-General

Use default modules in your template

Last updated: October 18, 2018

Applies to:

Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

This is an overview all the default modules available for drag and drop layout templates. Each type of module can be customized with styling and content options in the inspector. This guide will review how to add modules to your template, and 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 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.

Types of default modules

Advanced menu

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:

  1. Menu - select one of your existing advanced menus from your content settings.
  2. 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 menu that are related to section being viewed - displays menu items relative to the top level menu item being viewed.
    • Dynamic by page - Show pages in menu that are related to page being 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.
  3. Max levels - the maximum number of child menu items that can display.
  4. Orientation - updates the HTML markup for whether you want the items in your menu tree to display vertically or horizontally on your site.
  5. Enable flyouts - this indicates whether you want to display when a visitor hovers over a menu that contains child menu items.
Advanced Menu Options


Backup unsubscribe

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.

Learn more about creating system templates.

Backup Unsubscribe

Blog comments

The blog comments module adds a comment section to your individual blog post templates. You can customize the blog comments form from within your forms tool (Contacts > Forms). The form will be named based on the title of your blog. This module is only available in blog template layouts.

Default blog comments form

Blog content

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-content-1.png

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 dropdown menu to specify 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 responseand click the expand icon expand to customized the text that appears after a visitor submits the form.

Please note: this module is not supported in email templates. 

Blog email subscription

Call-to-action

You can insert a CTA button into a rich text module or use a call-to-action module. A call-to-action module is useful when you want the CTA placed somewhere on its own in your layout.

In the inspector, use the CTA dropdown menu to select a specific CTA for your module. You can also click + Create new CTA to open the CTA dashboard where you can build a new CTA. 

HubSpot Help article screenshot


Flexible column

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 blog, system page, or email templates.

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.

Follow me

You can use the follow me module to help your visitors get in touch with your company on social media. Unlike a social sharing module, follow me modules direct users away from your site to your respective social media pages.

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 and alignment in your module. You can also add a custom social account and upload your own icon in the editor if your brand is active on a social platform other than the networks listed.

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 icon edit or trash icon delete to make changes.

follow-me-email-options

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.

custom-icon

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.

Form

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't be added to email templates. 

The form module allows you to:

  1. Give your form a title on the page.
  2. Choose which HubSpot form will appear on the page, or add a new form.
  3. Choose whether to redirect a person that submits the form to another page or display an inline thank you message on the same page.
  4. Customize the inline thank you message your visitors, if needed.
  5. Send form notification emails to a specific address.
  6. Add visitors that submit the form to a workflow. (Requires a Marketing Professional or Enterprisesubscription.)
  7. Send a follow-up email to visitors that submit the form.

form-module-2

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.

Horizontal spacer

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.

HubSpot Help article screenshot

Image

Image modules allow you to add any image to a page or email in a specific location. You can select images already uploaded to your file manager or upload a new image right when adding default content or working in the content editor. This is useful if you are formatting or styling an image a specific way for your template, and want to be able to swap the image without changing that formatting.

You can also customize:

  • The URL people will be taken to when they click the image
  • The ALT text of the image
  • The height and width of the image

image-module

The image gallery module can quickly add a dynamic visual element to a HubSpot page. In the inspector you can customize the following options:

  1. 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.
  2. Use the Display mode dropdown to select a standard slideshow, thumbnail navigation, or lightbox gallery of images.
  3. Switch the Loop slides toggle on to repeat your slides from the beginning after they've all been viewed.
  4. Switch the Auto advance toggle on if you want the slides to change on their own.
  5. If you select this option, use the arrow buttons to specify the number of seconds between in slide.
  6. Switch the Show navigation buttons toggle on to indicate whether you want visitors to click through images on their own.
  7. Use the Variable height dropdown 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.
  8. Customize the transition in between slides using the dropdown to select Slide or Fade.
  9. If your images have captions, you can select to Always keep captions below the image or Superimpose captions on top of images.
HubSpot Help article screenshot


Language switcher

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 on your page template, it will only appear on the live page if more than one translation has been published for that page. Learn more about working with multi-language content in HubSpot.


Logo module

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.

Logo module


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.

Email Body


Modules

Modules created in the code editor allow you to use HTML, CSS, Javascript, & HubL to add advanced functionality to your templates, while still allowing your marketers to edit module content in the editors without touching code. These components will be labeled with a module icon customModules in the finder and the inspector. You can learn more about working with custom coded modules on the Designer's Forum.

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

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.

HubSpot Help article screenshot


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

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.

 

Post filter

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


Post listing

The post listing module to used to display a list of the most recent or most popular articles from a HubSpot blog. 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
Post listing


Rich text

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.

HubSpot Help article screenshot


RSS listing

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.
HubSpot Help article screenshot


Section header

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.

Section header


Simple menu

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 style the menu with horizontal or vertical navigation.

Simple menu


Social sharing

You can use the social sharing module to let visitors easily share your content across social media channels and via email. Click the corresponding social network toggle on to include it on your template. The sharing link will automatically populate with the required HubL tags to share your content.

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

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 preferences


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.

Subscription updates


View as webpage

The view as webpage module gives email recipients the option to open the webpage 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.

HubSpot Help article screenshot

Was this article helpful?

If you still need help you can get answers from the , or to contact support.