Section

Section groups a page region and provides an inner content container. Use its layout, background, size, spacing, and divider controls to define the region and its relationship to adjacent content.

Add and configure Section

1. Click Add, choose Section, and place it in the container.
2. Place the region's content inside the Section.
3. Use Design > Layout to arrange the children and Background for the region's background.
4. Set Design > Size for height and content width, then use Spacing for padding and outer margins.
5. Add decorative edges through Design > Dividers when needed.
6. Save your changes.

Content and front-end behavior

The Section background and the width of its inner content are separate concerns. A full-width background can surround content constrained to the site's content width. Use Section Shape Dividers for decorative top and bottom edges.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Design > Layout

Setting	Purpose and options	Behavior
Layout	layout controls. When: Layout is set.	See linked controls

Design > Layout

Setting	Purpose and options	Behavior
Layout	layout controls. When: Layout is unset.	See linked controls

Design > Background

Setting	Purpose and options	Behavior
Background	background controls.	See linked controls

Design > Text Colors

Shown when Text Colors is set.

Setting	Purpose and options	Behavior
Headings	Color or supported fill.	Shared
Text	Visible text.	Shared
Link	Destination and link options.	Hover
Brand	Color or supported fill.	Shared

Design > Buttons

Setting	Purpose and options	Behavior
Primary > Size > Size	Custom, Small, Default, Large.	Responsive
Primary > Size > Padding	Padding. When: Size = Custom.	Responsive
Primary > Size > Override Width	Override width and unit.	Shared
Primary > Size > Full Width At	Breakpoint.	Shared
Primary > Background	Color or supported fill.	Hover
Primary > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Primary > Color	Color or supported fill.	Hover
Primary > Width	Width.	Shared
Primary > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Primary > Typography	typography controls.	See linked controls
Primary > Corners	Square, Round, Custom.	Shared
Primary > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Primary > Effects > Transition Duration	Transition duration.	Responsive
Primary > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Primary > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Primary > Icon > Icon	Icon.	Shared
Primary > Icon > Position	Before, After.	Shared
Primary > Icon > Size	Size and unit.	Responsive
Primary > Icon > Color	Color or supported fill.	Hover
Primary > Icon > Space Before	Space before and unit.	Responsive
Primary > Icon > Space After	Space after and unit.	Responsive
Primary > Icon > Hover Transform	Hover transform and unit.	Shared
Secondary > Size > Size	Custom, Small, Default, Large.	Responsive
Secondary > Size > Padding	Padding. When: Size = Custom.	Responsive
Secondary > Size > Override Width	Override width and unit.	Shared
Secondary > Size > Full Width At	Breakpoint.	Shared
Secondary > Background	Color or supported fill.	Hover
Secondary > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Secondary > Color	Color or supported fill.	Hover
Secondary > Width	Width.	Shared
Secondary > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Secondary > Typography	typography controls.	See linked controls
Secondary > Corners	Square, Round, Custom.	Shared
Secondary > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Secondary > Effects > Transition Duration	Transition duration.	Responsive
Secondary > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Secondary > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Secondary > Icon > Icon	Icon.	Shared
Secondary > Icon > Position	Before, After.	Shared
Secondary > Icon > Size	Size and unit.	Responsive
Secondary > Icon > Color	Color or supported fill.	Hover
Secondary > Icon > Space Before	Space before and unit.	Responsive
Secondary > Icon > Space After	Space after and unit.	Responsive
Secondary > Icon > Hover Transform	Hover transform and unit.	Shared

Design > Size

Setting	Purpose and options	Behavior
Height	Fit Content, Viewport, Custom.	Responsive
Custom Height	Custom height and unit. When: Height = Custom.	Responsive
Min Height	Min height and unit. When: Height = Custom.	Responsive
Width	Contained, Full, Custom.	Responsive
Container Width	Container width and unit. When: Width = Custom.	Responsive

Design > Spacing

Setting	Purpose and options	Behavior
Padding	Padding.	Responsive
Margin Top	Space outside the element above it.	Responsive
Margin Bottom	Space outside the element below it.	Responsive

Design > Dividers

Setting	Purpose and options	Behavior
Shape Dividers > Shape Dividers	Add, edit, remove, and reorder shape dividers.	Shared
Shape Dividers > Shape Dividers > Shape	Choose an available shape from the list.	Shared
Shape Dividers > Shape Dividers > Custom Shape	Enter the custom shape. When: Shape = custom.	Shared
Shape Dividers > Shape Dividers > Color	Color or supported fill.	Shared
Shape Dividers > Shape Dividers > Flip Horizontally	Yes.	Shared
Shape Dividers > Shape Dividers > Position	Top, Bottom.	Shared
Shape Dividers > Shape Dividers > Width	Width.	Responsive
Shape Dividers > Shape Dividers > Height	Height.	Responsive
Shape Dividers > Shape Dividers > Display in front of content	On/off.	Shared

Design > Borders

Setting	Purpose and options	Behavior
Borders	borders controls.	See linked controls

Troubleshooting