Overview
Three reusable layout components appear across almost every section in the builder: Group, Text, and Divider. Understanding them lets you build any layout you need without writing CSS.
Group
A Group is a flexible layout container. Add child blocks inside it (text, buttons, images, newsletter inputs, and even nested groups) and control exactly how they are arranged.
Direction
- Vertical: children stack top to bottom (the default for most sections).
- Horizontal: children sit side by side in a row.
Enable Stack on Mobile to automatically switch a horizontal group to a vertical stack on small screens.
Alignment and position
These two settings control how children are distributed along the main and cross axes. Their meaning swaps depending on the group's direction:
- Vertical direction: Position controls vertical distribution (top, center, bottom, or between). Alignment controls horizontal placement (left, center, right, or between).
- Horizontal direction: Alignment controls horizontal distribution (left, center, right, or between). Position controls vertical placement (top, center, bottom, or between).
Between spreads children evenly with equal space between them, which is useful for stretching items across a full-width row.
Gap
The spacing in pixels between child elements (0–100 px, default 20 px).
Width
- Fill: expands to take up 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. Use this for groups that should only be as wide as what is inside them.
- Custom: set a specific percentage (0–100%). The group will hold that size without growing or shrinking.
Color scheme and inheritance
By default a group inherits the color scheme of its parent section. Turn off Inherit scheme to assign an explicit color scheme (1–9) from your global color settings. This lets you create distinct background or text color zones inside a section without adding a new section.
Border
Add a border around the group. Options: None or Solid. When solid is selected, set the border thickness (1–20 px); the color comes from the active scheme's border color.
Radius
Corner rounding in pixels (0–100). Use this to create card-like group containers.
Opacity
Overall opacity of the group (0–100%, default 100%).
Overlay
Adds a colored layer inside the group. When enabled, set the Overlay Color (including transparency using the color picker's opacity slider), the Style (solid flat fill or a gradient that fades to transparent), and for gradient the Direction (up or down). This is commonly used to create a semi-transparent tinted layer over a media background in a hero section.
Padding
Spacing on each side in pixels (top, left, right, and bottom), each from 0–100 px. Padding is applied inside the group border, creating breathing room between the border and the group's children.
Text
A text block renders rich text content (headings, paragraphs, and formatted copy) inside a section or group. The editor supports bold, italic, underline, strikethrough, and colored text.
Preset
The typography preset controls the font size, font weight, and the semantic role of the text. Available presets:
- Default: inherits the section's base text styling.
- Paragraph: body text style.
- Heading 1 through Heading 6: decreasing sizes from largest to smallest, using the heading font defined in your typography settings.
Size
A custom font size in pixels (10–30 px) that overrides the preset's size. Leave at the default to let the preset determine the size.
Width
- Fit: the text block is only as wide as its content.
- Fill: the text block expands to 100% of the available container width.
Alignment
Horizontal text alignment: Left, Center, or Right.
Line height
Controls vertical rhythm: Tight (compact lines), Normal (the default), or Loose (spacious lines).
Letter spacing
Controls character spacing: Tight (characters closer together), Normal (the default), or Loose (characters further apart).
Color scheme and inheritance
By default a text block inherits its color from the parent section. Turn off Inherit scheme to use a specific color scheme. Heading presets use the scheme's heading color; paragraph and default presets use the scheme's body text color.
Padding
Inner spacing on each side in pixels (top, left, right, and bottom), each from 0–100 px.
Divider
A visual separator line. In a vertical layout it appears as a horizontal line. Inside a horizontal group it appears as a vertical line. The divider adapts automatically to the direction of its parent container.
Thickness
The line thickness in pixels (1–10 px, default 1 px).
Length
The span of the line as a percentage of its container (5–100%, default 100%). Set this to less than 100% and combine it with alignment to create a centered or inset decorative line.
End cap style
- Sharp: rectangular ends.
- Rounded: pill-shaped ends.
Alignment
How the line is positioned when its length is less than 100%: Start, Center (default), or End.
Width
- Fit: the divider container is only as wide as the line itself.
- Fill: the divider container expands to fill the available space in its parent.
Color scheme
Optionally set a color scheme (1–9). The divider uses the border color from the selected scheme. If no scheme is set, it inherits the color from the parent section or group.
Padding
Spacing on each side in pixels. When the divider is used as a top-level section, padding values go up to 200 px for more generous vertical breathing room.
Common pitfalls
- Two fill groups inside a horizontal parent: each will take 50% of the available space, which is usually what you want. If you need one side wider than the other, use Custom width on one of them.
- Vertical divider not appearing: a divider only becomes vertical when it is a direct child of a group set to Horizontal direction. Make sure the parent group's direction is set to horizontal.
- Text showing an unexpected color: if a text block appears in the wrong color, it is likely inheriting from a parent group that has a different color scheme. Turn off Inherit scheme on the text block and assign the correct scheme explicitly.