Skip to content

SECTION MODULES

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

SEC-module-icon

SEC MODULES

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

section-module-example

FAQ

How do I remove the white space at the top and bottom of the SEC module?

The SEC modules are preconfigured with 80 px padding on the top and bottom.

To remove or adjust the padding, hover over the Section to edit the Alignment and Spacing.

This is also where you will set the module to Center Content or Full Width.

Section-aligntment-and-spacing

 

Features

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:

add-sec-module-to-page


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.

style-section-edit-icon-hubspot

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.

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.

Section-aligntment-and-spacing

SECTION → Background

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

section-background

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-color

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-image

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.

section-background-gradient

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.

module-background-color-picker

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 the Video, you can load an mp4 from your HubSpot Files or YouTube Videos can be included through the YouTube Link or ID. If both are added, the YouTube link will take priority.

module-background-image-video-settings

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

module-background-image-position-parallax

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.

module-background-image-overlay

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

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.

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.

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:

NEVER MISS A POWER UPDATE

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