Section extra settings

Use case:

Extend on the built-in section background capabilities. Add background images or videos, transparent background overlays, section borders, angled background overlays, etc.

Page speed impact:

Low, unless you add very large unoptimized images or videos, in which case it may have a Medium or High impact depending on the file size of these resources.

Available in pages:

Yes

Reserved block class:

section-bg

Resources:

css/components/section-extra-settings.css

You can drag and drop this module inside any section for more background options, such as your theme's accent color/gradient, an image with a transparent overlay, a background video, and more options.

Only one Section extra settings module should reside in a section. Please do not add more than one inside a section.

You can drag it anywhere in the section. In the default Act3 templates, we placed it at the top of the sections, and we recommend it that way.

If you only want to apply a custom background color, gradient, or image, we recommend using the default options built in the page editor. These have priority over the Section extra settings module. That means, if you use both the editor's background options and our Section extra settings module, the background elements of this module will be placed behind the default section background and may not be visible. So, we recommend applying either a background using HubSpot's built-in tools or this module, never both.

We included a UI button with this module, so you can easily click it and make changes. This button only appears in the page editor and not on live pages.