Become a HubSpot power user — join us for HubSpot Training Day 2017.

HubSpot's standard modules explained

Last updated: January 25, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
This article explains the various modules that you can add to a template layout. Each module type serves a different purpose that can be useful in certain circumstances. Please note that some modules are not available on certain types of templates.

To see a full list of modules available for the type of template that you are working on, click the gear icon in any template, and choose Swap module. Bear in mind that certain types of templates have additional module type options available.

HubSpot Help article screenshot

Advanced menu

You can use the Advanced Menu content module to add navigation to your content and templates. Your navigation is created in Advanced Menus (Content > Content Settings > Advanced Menus). To learn more about constructing menus, check out this article.

Advanced Menu Options
HubSpot Academy

Best practices

Your primary navigation menu should be added to all non-landing page templates and removed from landing page templates. Keep your primary navigation simple. Overly complicated navigation menus can make it difficult for visitors to navigate your site.

Simple dropdowns, sidebar navigation, and/or footer navigation menus can also help visitors navigate dense websites. You can manage multiple menu trees in Content > Content Settings > Advanced Menus. Also keep in mind that if you are using a multi-level navigation you should set up your dropdowns to work on mobile devices, as well.

Read more

By editing the module options you can customize the following:

  • The type of menu:
    • Static - renders entire menu tree
    • Dynamic by section - renders menu items within parent section (multiple levels up)
    • Dynamic by pagerenders menu items within parent page (one level up)
    • Breadcrumb - shows the navigation path to current page
  • Max number of dropdowns/flyouts that will render
  • Orientation, which updates the HTML markup so that the menus can be styled accordingly (horizontal or vertical)
  • Enable flyouts, which turns dropdowns/flyout child menus on or off
  • Which advanced menu tree should be used as the basis for the navigation menu

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 modules allows you to customize the help text on Backup Unsubscribe templates.

You can learn more about creating system templates here.

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 (e.g. News Comments Form). This module is only available on 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.

To learn more about blog content module markup, check out this resource. 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 form.  This module is not available in email templates. This module is populated by your blog subscriber form, which can be located and customized in your Forms tool (Contacts > Forms).

Blog email subscription

Call-to-action

You can either insert a CTA button into a rich text module or use a Call-to-Action module. You should use the Call-to-Action module if you want to be able to select/edit the call-to-action without interfering with the formatting of a rich text content module. To learn more about CTAs, check out the Call to Action User Guide.

HubSpot Help article screenshot

Custom HTML

You can use a Custom HTML content module if you want to have total control over the HMTL code behind the content in your module when editing a page. These modules support HTML, CSS, JavaScript, and HubL. Custom HTML modules are ideal for adding embed code for videos, music players, social feeds, maps, etc. Unlike HubL template modules, Custom HTML modules are editable at the page level.

HubSpot Help article screenshot

Custom modules

Custom modules are advanced coded modules that allow you to use HTML, CSS, Javascript, & HubL to add advanced functionality to your templates, while still allowing your marketers to be able to modify their content without touching code. Custom modules can be added repeatedly to a template. You will learn more about using custom modules in a later section of this guide.

Flexible column

You can use a Flexible Column in your site or landing page template to give content creators the ability to add or remove modules within that column from the page editor. This module is not available on blog, system page, or email templates.

This option is ideal if your marketers would like the ability to add modules to an individual page without affecting other pages built with the same template. If you have a group of modules in a flexible column, and you would like to change it back to a static group, click the Gear icon > Revert to Static Group.

Flexible column
Once a flexible column has been customized for a particular page, using the content editor, changes to that column at the template level will no longer take effect for that customized page.

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. 

You can choose which Social Media pages appear in your Follow Me module in your Social Settings (Social > Social Settings > Follow me module).

Follow me module

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, Site Pages, and Blog Pages. Forms cannot 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.
  • Choose whether to redirect a person that submits the form to another page or to display a thank you message on the same page.
  • Override your default form submission notification options from HubSpot settings and send notification emails to specific email addresses when a visitors submits the form.
  • Send follow-up emails to visitors that submit the form.
  • Add visitors that submit the form to a Salesforce Campaign. (Requires HubSpot Professional or Enterprise and an existing integration with Salesforce.)
Form module options

Gallery

The image gallery module allows you to create a quick slideshow, thumbnail navigation, or lightbox gallery of images on a HubSpot page. Click + Add Slide to add images to your gallery. The Settings tab within this module will also help you make changes to your slideshow's transition type, captions, and more.

HubSpot Help article screenshot

Google search

You can use the Google Search content module to add a Google site search to your content. This search redirects to a Google search results page. If you want the search results to load within your site, you would need to set up a Google Custom Search Engine  or Swiftype search engine, and use its embed code within a Custom HTML module.

Google search

Header

You can use a Header module to display a line of text in a heading HTML tag. You can choose which heading tag  (h1-h4) will be rendered by editing the default options for that module.

HubSpot Help article screenshot

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 help space elements on a page.

HubSpot Help article screenshot

HubL template

HubL Template modules are coded modules that support HubSpot markup language in addition to HTML, CSS, and JavaScript. The most common use case for these modules is if you need to create other editable modules using HubL in a template layout.

Unlike custom HTML modules, these modules are not editable in the content editor. HubL Template modules can not be made global, but you can instead use custom HTML or custom modules.

To learn more about HubL, check out our HubL reference documentation.

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

Image slider

Image slider modules allow you to create revolving image galleries that can easily be updated by your internal users.

You can customize:

  • If the slider auto advances and how quickly it auto advances
  • If the slider loops
  • If the slider shows pagination
  • If the slider retains the size of the tallest image or adjusts to the size of each image
  • If you want to include a caption for each image
  • If the caption is displayed below the image or superimposed on top of the images

While image sliders can help make a great looking page, sliders generally have a lower click through rate than static CTAs, because the image rotates.

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. 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. Read more here.

Logo module

The Logo module loads your company logo set in Content Settings > Page Publishing > Logo

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.

Email Body

Office location information

This module includes various 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 a Office location information module or the included HubL tags.  

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.

One line text

Page footer

The Page footer module displays copyright information with the current year and your company name. The company name is pulled from your email CAN-SPAM settings (Content > Content Settings > Email > Email Footer Information). If you want to additionally customize or format the way that the copyright information appears in the footer of your site, you may want to use a rich-text module instead.

Page footer

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.

You can learn more about creating system templates here.

Post filter

You can use the Post Filter content module 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 by editing the module defaults (Gear icon > Edit Options):

  • 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 filter

Post listing

You can use the Post Listing content module to display a list of the most recent or most popular blog articles from your HubSpot blog. This module is not available in email templates. 

Post listing
b

Advanced info

While post listing modules are great for creating a simple listing of popular or most recent posts, you can create more advanced listings using HubL functions.

HubL functions can be used to retreive a set number of recent posts, posts about a certain topic, popular posts, or posts by a certain author. Learn more here.

Read more

You can customize the following settings by editing the module defaults (Gear icon > Edit Options):

  • The blog for which you'd like to display post titles
  • List blog posts by most recent or most popular
  • List title to display
  • Maximum number of blog posts to list

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. Professional and Enterprise HubSpot accounts can use rich text modules for adding smart content to a page. Use this module for creating editable content areas for your marketers.

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 give you many options in terms of customizing how your RSS listing displays, including whether or not you would like to include the featured images from the post (internal RSS feeds only). You can enable this option by clicking the gear icon on a RSS Listing module and checking Include featured image.

HubSpot Help article screenshot

Section header

You can use the Section Header module to display a 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. Unlike advanced menus, where the menu tree is managed from the Advanced Menus tool, simple menus are managed on each page that they are added to.

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. Adding Social Sharing to a page is a great way to encourage your visitors to share your content and can help generate inbound traffic from social media sites.

HubSpot Help article screenshot

Subscription preferences

Subscription preferences modules are special modules only available on subscription preferences system templates. These modules let you customize the the page an email recipient sees, when he or she goes to manage their subscription preferences or unsubscribe from your email communications.

You can learn more about creating system templates here.

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 a email recipient updates his or her subscription settings.

You can learn more about creating system templates here.

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?

Previous article:

Next article: