Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

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.

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

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.

background-gradient

Style → Background → Transparent

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

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.