Add Flexibility to Theme Pages with Sub Modules

Ready to create your own custom section layouts? Check out our selection of Sub Modules!

Each Sub Module contains the core functionality of the Section Modules, with a range of layout and style options, plus the added flexibility to create custom drag-and-drop sections using these powerful building blocks.

With Sub Modules, you can use HubSpot's drag-and-drop page editor to its full potential:

Combine modules to create Sections, Columns, and Rows
Swap between Light and Dark Scheme styles
Combine with Mini Modules for even more POWER

How to find Sub Modules in the Page Editor

Sub Modules are labeled in the Page Editor as "Sub" and are flexible modules that allow you to build your own section layouts to create dynamic page designs.

Example of Sub Modules:

Edit Section Alignment and Spacing

After you've created a section and added a Sub Module to the page, when you move your mouse over the upper right corner of the module, you can access the Section menu. Click the pencil icon to "Style section" and you can adjust the following settings.

SECTION → Alignment and spacing → Vertical Alignment

Choose how the modules should be aligned vertically within the Section.

SECTION → Alignment and spacing → Content Alignment

Choose between Center content and Full width.

SECTION → Alignment and spacing → Padding and margin

Option to adjust the Top, Left, Right, and Bottom Padding and Margin for the Section.

SECTION → Background

Option to set the Section Background to color, image, or gradient.

SECTION → Background → Color

Option to set the Section Background color.

SECTION → Background → Image

Option to add an image background to the Section if desired.

Section Image size options include: Resize to fill container, Resize to show entire image, Display full size.

Section Image alignment options include: Top-left, Top-center, Top-right, Middle-left, Centered, Middle-right, Bottom-left, Bottom-center, Bottom-right.

SECTION → Background → Gradient

Option to configure the gradient for the Section Background.

Section Gradient options include: Top to bottom, Left to right, Top left to bottom right, and Top right to bottom left.

It is important to note that the background options within the POWER Sec Modules contain more options than those in the default Section settings that you can choose from when creating sections using Sub Modules, Mini Modules, and HubSpot Modules.

Helpful Links: Settings for Theme Styles.

Settings Available for all Sub Modules

These settings apply to all Sub Modules, for detailed settings for individual modules, refer to the module library.

Layout > Centered

Option to center the content of the Sub Module.

Style > Color Scheme

Choice of Light or Dark.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your Section Background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

Animation

Checkbox to turn on/off Animate on Scroll. Turning off here will only apply to this module, to turn animation off globally refer to Theme Settings for Animations.

Anchor Link ID

Set an anchor link for the module. Can be used to create a link directly to that section on the page and/or to include in an on-page menu (like Sticky Sub-Menu) to allow users to jump to that section without scrolling.

Easily add an anchor link to this section, for full instructions refer to Setting up Anchor Links.

Custom Class

Ability to add a Custom Class to use in the child.css for individual customizations.

Please avoid the usage of this feature and try to use the native functionality as much as possible!

If you are trying to do something that should be in the product, please contact us.

A CSS class name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must be a letter or underscore, and the name must be at least 2 characters long.

SUB MODULES