Modern websites are built using structured sections and layouts rather than static page designs. HubSpot Content Hub uses a section-based layout system that allows users to arrange modules into rows, columns, and flexible content areas.
This structure makes it easy for marketers and editors to design pages using the drag-and-drop editor without needing technical knowledge.
Understanding how HubSpot Content Hub page sections and layouts work helps teams build pages faster while maintaining a consistent design structure.
A page section is a horizontal block that groups related content modules together.
For example, a typical page may include sections such as:
Each section can contain one or more modules.
In HubSpot Content Hub, pages are built by stacking sections vertically.
Each section can include:
Editors can easily rearrange these sections within the page editor.
To add a new section in the HubSpot page editor:
This process allows users to quickly build page layouts without coding.
Many HubSpot themes include pre-designed sections that can be inserted into pages.
Examples include:
Pre-built sections help maintain consistent design across the website.
Each section can be customized to match the website’s design.
Customization options may include:
These settings allow editors to adjust page appearance without editing templates.
One of the advantages of the drag-and-drop editor is the ability to rearrange sections easily.
Editors can:
This flexibility allows pages to be updated quickly.
Although sections allow flexibility, many websites follow consistent layout patterns.
For example:
Consistent page structure helps improve usability and readability.
HubSpot Content Hub page sections and layout tools allow editors to build flexible page structures using the drag-and-drop editor. By organizing modules into structured sections, teams can design pages efficiently while maintaining consistent layouts across the website.