Skip to content
maka marketplace

Discover Products to help you POWER up with CMS Hub

Power Pro Theme

Check out the POWER demo and see all the latest features


POWER is optimized to perform, review the results

Customer Showcase

See how our customers used the POWER Theme

POWER Pro V35 released on December 21st 2023 – Read Changelog

Getting Started

Follow our guide to save time and avoid missing a step

Module Library

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

Video tutorials

Find all POWER videos in the same spot for quick answers


Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

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


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


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

Having issues with POWER?

Schedule a Q&A or Demo

Looking for Custom Development?

Other questions?


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.

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.

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.


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.