Landing Pages
Website Pages

Guide to common modules

Last updated: May 29, 2020

Applies to:

Marketing Hub  Starter, Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Common modules are simple elements you can add to a page using a template with a drag and drop page areaYou can add common modules to a page created with a default HubSpot website theme template, a starter template, or a coded template that includes a drag and drop area

Please note: if you're looking to edit content for a menu module, learn how to set up your navigation menus. The best way to edit your navigation menu for a theme template is to create a new page with your theme using the home template, and then editing the global page header.

Add a common module to your page

Common modules are frequently-used modules in the HubSpot page editor. Theme styles will be applied to a new common module when it's added to your template, but these styles can be customized within the content editor without changing your global theme styles.

To add a common module to your page:

  • In the left panel, click the Common modules heading to expand common modules.
  • Click the module you want to add to your page, and drag it into position on your page layout. You'll see a blue line with circles on both ends defining the area where your new module will be placed.


Overview of common modules

You can customize the colors, fonts, and styles of common modules on your page without changing your global themes settings.


1. Rich text

Rich text modules are flexible containers that support text, links, images, video, embed code, tables, and more. You can add bullets, lists, and headings using the rich text editor at the top of your page. Learn more about how to edit rich text modules.

2. Image

An image module is a simple container for an image. Upload an image into your file manager, or add an image directly within the page editor.

3. Header

A header module is a simple block of text designed to label a main section of your website. Search engines read header tags to understand the structure of your page content.

4. Call-to-Action

A call-to-action is a button on your page designed to attract your website visitors. Clicking a CTA typically leads to a new page in your website with a content offer. You can create a simple CTA or select an existing CTA that you've already created in your account.

5. Form

A form module supports any existing form in your HubSpot account. You can also build a simple form within the page editor. Form modules have a lot of styles and options that are customizable on the page. Learn more about how to edit and style forms on your page.

6. Gallery

An image gallery module creates a dynamic carousel of images on your website page. You can upload and add images with descriptions and links directly within the page editor. Learn more about how to edit a gallery module.

7. Button

A button is a simple element on your page that encourages website visitors to click. You can customize the button text, colors, and styles. If you're using a website theme on your page, learn more about how to manage default theme styles.

8. Divider

A divider is a simple horizontal line to separate different sections of your page. You can customize the color, style, and padding of the divider on your page.

9. Follow Me

The follow-me module creates icons linked to your social media pages and other external website pages you want to promote on your page. The module populates with default icons for most social media platforms. You can also upload a custom icon to link to a different social platform or website page. Learn more about editing a follow me module.

10. Video Embed

A video embed module is a simple module that supports a video URL from a supported provider. If you want to collect more analytics on your video views, Professional and Enterprise accounts can add a video to a rich text module with HubSpot video, Powered by Vidyard or an external media file.