Overview
Three reusable layout components appear across almost every section in the builder: Group, Text, and Divider. Together they let you build any layout without writing CSS. Select a block to open its settings.
Group
A Group is a flexible layout container. Add child blocks inside it (text, buttons, images, newsletter inputs, even nested groups) and control how they are arranged.
Direction
- Vertical: children stack top to bottom.
- Horizontal: children sit side by side in a row.
The Stack vertically on mobile toggle appears only when Direction is Horizontal. Turn it on to switch a horizontal row to a vertical stack on small screens.
Position and Alignment
These distribute children along the main and cross axes. Their meaning swaps with the direction, and the Between option (equal space between children) only exists on the main axis:
- Vertical direction: Position is the main (vertical) axis: top, center, bottom, or between. Alignment is the cross (horizontal) axis: left, center, or right.
- Horizontal direction: Alignment is the main (horizontal) axis: left, center, right, or between. Position is the cross (vertical) axis: top, center, or bottom.
Width
- Fill: expands to take all available space in the parent. Use this for groups that should share space equally inside a horizontal parent.
- Fit: shrinks to the natural size of its content.
- Custom: reveals a Custom width slider set as a percentage (0 to 100%). The group holds that size without growing or shrinking.
Gap
The spacing in pixels between child elements (0 to 100 px, default 20 px).
Color scheme
Use parent color scheme is on by default, so the group inherits its parent's scheme. Turn it off to reveal the Color scheme picker and choose one of your global color schemes. This lets you create distinct color zones inside a section.
Border
Border is None or Solid. Solid reveals two sliders: Border thickness (1 to 20 px, default 1) and Border opacity (0 to 100%, default 100). The color comes from the active scheme's border color.
Corner radius
Corner rounding in pixels (0 to 100), independent of the border. Use it for card-like containers.
Background overlay
The Background overlay toggle adds a colored layer on top of the group's background. When on, set the Overlay color (including transparency via the picker's opacity slider), the Overlay style (Solid flat fill or Gradient that fades to transparent), and for gradient the Gradient direction (Up or Down). Commonly used to tint a media background.
Padding
Inner spacing on each side in pixels, each 0 to 100 px. Padding sits inside the border, between it and the children.
Text
A text block renders headings, paragraphs, and formatted copy. The rich text editor supports bold, italic, underline, strikethrough, and colored text.
Preset
The typography preset sets the font family, the default weight, and the semantic HTML tag (its role on the page):
- Default: inherits the section's base text styling.
- Paragraph: body text style.
- Heading 1 through Heading 6: heading styles, using your heading and subheading fonts.
Size
A custom font size in pixels (10 to 30 px, default 16). This is the size the block actually renders at.
Width and Alignment
- Fit: the block is only as wide as its content.
- Fill: the block expands to 100% of the container width.
Alignment (Left, Center, Right) only appears when Width is set to Fill, since alignment is meaningful only when the block fills its container.
Line height and Letter spacing
Line height sets vertical rhythm: Normal (default), Tight, or Loose. Letter spacing sets character spacing with the same three options.
Color scheme
Inside a group, Use parent color scheme is on by default. Turn it off to reveal the Color scheme picker. Heading presets use the scheme's heading color; paragraph and default use its body text color. As a standalone section, the picker stands alone with no inherit toggle.
Padding
Inner spacing on each side in pixels, each 0 to 100 px.
Divider
A separator line that adapts to its parent. In a vertical (column) layout it is a horizontal line; inside a horizontal group it becomes a vertical line.
Width
- Fit: the container is only as wide as the line.
- Fill: the container expands to fill the available space.
Thickness
Line thickness in pixels (1 to 10 px, default 1). For a horizontal divider this is the height; for a vertical one it is the width.
Length
The span of the line as a percentage of its container (5 to 100%, default 100). Set it below 100% to create a partial, inset line.
Alignment
Positions the line when its length is below 100%: Start, Center (default), or End. This control is hidden while Length is 100%.
Corner radius
- Sharp: rectangular ends.
- Rounded: pill-shaped ends.
Color scheme
Optionally pick a Color scheme. The divider uses the border color from that scheme. If none is set, it inherits the color from the parent section or group.
Padding
Spacing on each side in pixels. As a block the range is 0 to 100 px. When the divider is added as a top-level section, padding goes up to 200 px (default 20) for more generous vertical breathing room.
Common pitfalls
- Two fill groups inside a horizontal parent: each takes 50% of the space, which is usually what you want. To make one side wider, set that group's Width to Custom.
- Vertical divider not appearing: a divider only turns vertical when it is a direct child of a group set to Horizontal direction. Check the parent group's direction.
- Missing Between option: Between appears only on the axis the children flow along, so it is on Position for vertical groups and on Alignment for horizontal groups.
- Text in the wrong color: it is likely inheriting from a parent group with a different scheme. Turn off Use parent color scheme on the text block and pick the scheme explicitly.
For where these components can be placed, see Sections and blocks.