Skip to content


How to use Section Modules to build website pages quicker with preconfigured layout options



Section modules represent a full section on a website with all the necessary options directly within the module to style and layout the content.



How do I remove the white space from the section around a Sec Module?

A new section includes a default of 80px padding at the top and bottom that can be modified in the style settings for the section.


Looking to add some interactivity and excitement to your website? Check out our selection of Section Modules!

Each Section Module contains various layout options and configurations to customize the features of the module to fit your content and design layouts.

With Section Modules, you can provide a dynamic and engaging experience for your site visitors:

  • Configure background images or videos
  • Add overlays and gradients
  • Enable the parallax effect for image backgrounds
  • Add tabs, filters, table of contents, and other interactive features

Setup Instructions

How to find Section Modules in the Page Editor

Section Modules are labeled in the Page Editor as "Sec" and are preconfigured sections to help build your website pages quicker and also enhance the features of the module.

Example of Section Modules:


Edit Section Alignment and Spacing

After you've added a Sec 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 → Content Alignment

Choose between Center content and Full width.

For Section Modules, choose the Full Width setting. You will have the option to further configure the padding and content within the module, you may encounter issues if you don't properly set the alignment to Full Width.

You can customise a fullwidth module further through your boxed section settings in your module layout. 

SECTION → Alignment and spacing → Padding and margin

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

All of these settings are pre-configured in Sec Modules, depending on your background styling you can further adjust the settings here if needed.

For the most flexibility with the background options within the module, we recommend resetting the default for Top and Bottom from 80px to 0px.

Check Apply to all sides first, then type 0px in Top and this will not only reset the Top and Bottom to 80px, but will ensure the module has the proper padding on tablet and mobile, without any further adjustment necessary for mobile.


SECTION → Background

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


SECTION → Background → Color

If you are using a color background in the Sec Module, you have the option to set the Section Background color to match if you have added additional padding to the Section.


SECTION → Background → Image

The Sec Module has more options for configuring an Image as the background, but if you've modified the padding for the Section, you have an option to add the image to the Section here 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

If you have added padding and would like to use a gradient background for the Sec Module, you will have to configure the gradient for the Section Background. The available gradient options are limited compared to those in the Sec Modules.

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.

Module Options


Background Settings for Section Modules

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

Style → Background

Choice of Background Color, Background Image/Video, Background Gradient, or Transparent.

Style → Background → Color

Define the background color by the color hex code or use HubSpot’s color picker. Additionally, the opacity of the background color can be configured.


Style → Background → Image/Video

Select an Image for the module background or as a fallback image for the Video. The image should be at least 2000 px wide.


For more control over the responsiveness of an image and how the image is cropped, you can load separate images for Mobile and Tablet.


For the Video, you can load an mp4 from your HubSpot Files or through a link from YouTube or Vimeo.

If both an mp4 and a link are added, the YouTube/Vimeo link will take priority.


Please make sure that the file size for the video is not too big. A general rule of thumb is to keep reducing the file size until it starts to noticeably be degraded. Try to export videos in 720p and with a bitrate under 700kb/s (preferably 500kb/s).

Style → Background → Play Mode

Choice of Loop or Play Once.


Style → Background → Background Position / Parallax Effect

For the Image, you can choose where the focal point is within the content area. This will determine how the image is resized for smaller screens to ensure it is responsive and your content has the desired layout.

You can also choose to enable the Parallax Effect which will scroll the image within the content area as the site visitor scrolls on the page.


Style → Background → Background Image Overlay

Option to add an overlay to the background image, as a single color or gradient.

Setting the opacity for the color or gradient is required to see the image through the overlay.

For the gradient option, you can either set an opacity per gradient color or an overall opacity for the entire gradient.


Style → Background → Gradient

Choice of Horizontal - Left to Right, Vertical - Top to Bottom, Diagonal - Top Left to Bottom Right, or Diagonal - Bottom Left to Top Right.

Define each of the background gradient colors by the color hex code or use HubSpot’s color picker. Additionally, the opacity of each color can be set.


Style → Background → Transparent

There will not be a background applied to the module and any background set for the section will be visible.

Style → Background → Overwrite Box Colors

If your section has been set as a boxed section you can overwrite your default box colors here. 

Style → Background → Section Shadow

Add a box-shadow to your section to create a 3d effect for visual depth. 

Layout → Padding Top and Padding Bottom

Choice of Standard, None, Small, Medium, Large, or First Section with Header.

The theme includes predefined padding options that can be modified in your Theme Settings.
The default definitions are:

  • Standard = ~135px
  • None = 0px
  • Small = 40px
  • Medium = 80px
  • Large = 140px
  • First Section With Header = adds additional spacing to account for the header height automatically
    • Used when you choose a module other than the Hero module for the first module on the page

Layout → Margin Top and Margin Bottom

Choice of None, Small, Medium or Large. These are defined by these sizes:

  • None = 0px
  • Small = 40px
  • Medium = 80px
  • Large = 140px

Layout → Boxed Section

Toggle this checkbox to enable the Boxed Section Settings to contain your section within a boxed section instead of a full width section. 

Layout → Boxed Section Settings

Choice of Full Width, Content Width - Padding Inside and Content Width - Padding Outside. 

  • Full width: This covers the entire width of the window and includes a little extra space on both sides.
  • Content Width - Padding Inside: This sets the section to align with the content width and also adds extra space inside the section for padding.
  • Content Width - Padding Outside: Similar to Content Width - Padding Inside, but this makes the section wider on the edges without making the inside content cramped.

Style → Shape Divider

Optional Shape Divider(s) can be added to the top or bottom for most Section Modules. Refer to Settings for configuring Shape Dividers for more details about these choices.


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.

Next Steps

Now that you have the POWER to build pages quickly using Section Modules, learn how to use Sub Modules to create flexible layouts.

Next up:


We are continuously improving our modules and updating our documentation. Stay in the loop.