Sections

Sections are the outermost building blocks of a page. Think of a page as a vertical stack of slices, where each slice is a section that holds rows, columns, and modules inside it.

Sections span the full width of the page by default, though the Section extra settings module can turn any section into a boxed layout, apply gradient, image, or video backgrounds, round corners, and more.

Sections are available on any template that uses a drag and drop area. In the page editor, sections can be added, rearranged, styled, and saved for reuse on other pages built with the same theme.

Adding a section

In the page editor, hover over the content area and click + Add section. Pick a blank layout, one of the premade Act3 sections, or a previously saved section. Then drag modules into the section and adjust styles from the sidebar editor.

For the full editor workflow, see Use sections in the HubSpot knowledge base.

Saving a section

Any section on a page can be saved and reused on other pages that share the same theme. This makes it easy to reuse a layout without starting over.

Hover over the section, click the down arrow on the section toolbar, and select Save section. Saved sections then appear under + Add section › Saved sections.

For more details, see Use sections in the HubSpot knowledge base.

Limits

HubSpot allows up to 50 saved sections per account, and a theme from the marketplace can include up to 50 reusable sections of its own. Once the account limit is reached, an existing saved section must be deleted before a new one can be saved.

Saved sections are not global

Saved sections are templates, not global content. Editing a saved section does not propagate changes to pages where that section has already been added, as each instance becomes independent once placed on a page. This is a frequently requested feature on the HubSpot Ideas forum, where the request can be upvoted here.

Available sections

Act3 ships with a set of premade sections ready to drop into any page. These cover common layout patterns so pages can be built quickly without starting from a blank layout. The current set of premade sections includes:

Action choice

Directs visitors to detail pages. Typically placed at the bottom of the page.

All features

Highlights the most important features at the top with larger cards, followed by secondary features below.

Presents content in clean cards. Gives visitors a preview of what's available and links through to more.

Call to action

A call to action section for use between other sections or at the bottom of a page.

Encourage exploration

Makes it easy for visitors to reach important pages, using a brief intro and simple navigation cards.

Feature cards

Highlights features, benefits, or services in a card grid layout.

Features showcase with left navigation

Highlights features, benefits, or services in a navigable slider with the navigation on the left.

Features showcase with right navigation

Highlights features, benefits, or services in a navigable slider with the navigation on the right.

From the blog

Lists the latest blog posts on a website page.

Please note:

You can use a page Modal for the subscription button. Learn how to set up blog subscriptions here.

Full screen hero slider

A large slider that covers the entire viewport. Works well with the overlapping header when placed at the top of a page. The editor may need to be saved and reloaded to render correctly.

Image left, text right

Highlights a feature, benefit, product, or service with a large image that can extend beyond the page center column.

Image right, text left

Highlights a feature, benefit, product, or service with a large image that can extend beyond the page center column.

Jumbotron

An alternative intro section for the top of a page.

Logo carousel

Displays client or partner logos in a smooth carousel. The editor may need to be saved and reloaded to render correctly.

Numbers

Showcases key achievements and metrics with large figures.

A compact full-width section for use between sections or at the bottom of a page, linking to a relevant offer or next step.

Proof of success

Combines a video background with a logo carousel. The editor may need to be saved and reloaded to render correctly.

Quick facts

Presents brief facts about a product or service in a compact row, separated by light borders. Typically placed between sections.

Review slider

Displays customer or partner reviews with photos and ratings in a smooth slider. The editor may need to be saved and reloaded to render correctly.

A banner with a title and button, typically used at the bottom of a page or between sections.

Theme corners

Rows and columns placed inside this section automatically inherit the corner radius set in Theme settings › Corners › Global radius. Moving content into this section enables the effect; moving it out disables it.