Section
Sections are the structural containers in Layout Builder. They define the overall structure of a page by organizing content into rows with configurable column layouts. Every block on a page must be placed inside a section.
What Is a Section?
A section is a horizontal row in the Layout Builder interface that spans the full width of the content area. Each section can be configured with a specific number of columns, controlling how blocks are arranged horizontally within the section.
Column Layouts
When adding a section, you choose from the following column layout options:
One Column
A single full-width column.
Best for content that should span the entire content area, such as banners, full-width text, or hero sections.
Two Columns
Two side-by-side columns.
Width ratios typically include: 50%/50%, 33%/67%, or 67%/33%.
Useful for pairing text with media, creating sidebars, or balancing two content areas.
Three Columns
Three side-by-side columns.
Width ratios typically include: 33%/33%/33%, 25%/50%/25%, or other variations.
Ideal for card layouts, feature highlights, or listing grids.
Four Columns
Four side-by-side columns, each typically 25% width.
Suitable for icon grids, team member profiles, or compact content blocks.
Adding a Section
In the Layout Builder interface, click Add section at the location where you want to insert the section (between existing sections or at the end).
Select the desired column layout from the options presented.
Optionally configure section settings, including styles (see Section Styles).
Click Add section to confirm.
The new section appears in the layout, ready for blocks to be placed in its columns.
Configuring a Section
After adding a section, you can configure it by clicking on the section's settings:
Column widths: Adjust the width distribution between columns.
Styles: Apply visual styles such as background colors, spacing, and container width.
Administrative label: Add a label to help identify the section in the Layout Builder interface (not displayed on the front end).
Removing a Section
Click the Remove section option on the section you want to delete.
Confirm the removal.
All blocks within the section will be removed along with it.
Warning: Removing a section removes all blocks it contains. Make sure you do not need any of the blocks before removing a section.
Tips
Start with a simple section structure and add complexity as needed.
Use consistent section layouts across similar pages for a cohesive site design.
Consider the responsive behavior of columns. Multi-column layouts typically stack vertically on smaller screens.
Use one-column sections for important content that needs full visual emphasis.
Last updated