37 settingsPagesBlog postsBlog listings
Where it is used
Not placed in a template by default. Add it to any page from the Add panel in the page editor.
Content settings
What the module says and shows. Repeaters (groups you can add items to) are marked as such.
| Setting | Type | What it does |
|---|
| Anchor name | Text | Lets links jump to this section, for example pricing (link to #pricing). Letters, numbers and dashes only. |
| Show the label in the editor | On/off | A small "Section Styler" label in the page editor, so you can find and click the module. Never shown to visitors.Default: On |
Style settings
In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.
| Setting | Type | What it does |
|---|
| Color mode | Choice | Switches everything in this section to the theme's light or dark colors. Automatic uses the dark colors on the brand gradient, a custom gradient or an image, so text stays readable.Options: Automatic (dark on gradients and images)Same as the pageLightDarkDefault: Automatic (dark on gradients and images) |
BackgroundGroup · 9 settings| Background | Choice | The section's background. Leave HubSpot's own section Background set to None when you use this.Options: NoneColorSoft brand tintAlternate background (from the theme)Brand gradientCustom gradientImageDefault: None | | Color | Color | Background color, or the gradient's start color.Default: #F2F4FB | | Gradient end color | Color | The gradient's end color.Default: #7C3AED | | Gradient angle | Number | Direction of the gradient.Default: 135 | | Image | Image | A wide image, at least 1920px. It covers the section. | | Image position | Choice | Which part of the image stays in view.Options: CenterTopBottomLeftRightDefault: Center | | Fixed image (parallax) | On/off | The image stays still while the page scrolls (desktop).Default: Off | | Overlay | Color | A color over the image so text stays readable. Set the opacity to 0 for none.Default: #0E1228 | | Show the background behind the modules | On/off | Makes the modules in this section see-through so the section background shows. Modules with their own background color set keep it.Default: On |
|
Background effectGroup · 3 settings| Effect | Choice | The theme's animated background effects, across the whole section.Options: NoneGlowBubblesAuroraGridRipplesDefault: None | | Strength | Number | How visible the effect is.Default: 45 | | Number of bubbles | Number | How many bubbles.Default: 6 |
|
ShapeGroup · 5 settings| Layout | Choice | Boxed turns the section into a rounded panel with space around it.Options: Full widthBoxed (rounded panel inside the page width)Default: Full width | | Corner radius | Number | Roundness of the panel's corners.Default: 24 | | Border | On/off | A thin border around the panel.Default: Off | | Shadow | Choice | Shadow under the panel.Options: NoneSoftStrongDefault: None | | Space around the panel | Number | Space above and below the panel.Default: 24 |
|
DividersGroup · 5 settings| Top edge | Choice | A shape along the top edge of the section.Options: NoneWaveCurveSlantArrowZigzagDefault: None | | Bottom edge | Choice | A shape along the bottom edge of the section.Options: NoneWaveCurveSlantArrowZigzagDefault: None | | Divider height | Number | How tall the shapes are.Default: 60 | | Flip horizontally | On/off | Mirrors the shapes left to right.Default: Off | | Divider color | Color | Leave empty to use the page background, so the shape blends into the next section. |
|
Spacing and heightGroup · 6 settings| Extra space at the top (desktop) | Number | Added above the modules. Leave empty for none. | | Extra space at the bottom (desktop) | Number | Added below the modules. Leave empty for none. | | Extra space at the top (phones) | Number | Leave empty to use half the desktop value. | | Extra space at the bottom (phones) | Number | Leave empty to use half the desktop value. | | Minimum height | Number | Makes the section at least this tall. 0 for no minimum.Default: 0 | | Content position | Choice | Where the modules sit when the section is taller than them.Options: TopMiddleBottomDefault: Middle |
|
Tip
Headings support [brackets] to highlight words and | for a new line. See Editing tips.