Every page is built from the same few pieces: sections stacked from top to bottom, rows inside them, and columns that hold your content.
Section
A horizontal band of the page. It has its own background, spacing and visibility.
Row
A grid inside a section. Each row is 12 units wide.
Column
One cell of a row. Its width is a number of units, from 1 to 12.
Stack
Places the elements inside it one under another.
Group
Places the elements inside it side by side.
A typical section has one row. A text-and-image section has two columns of 6 units each, with a stack of title, text and buttons in the first column and an image in the second.
You work directly on the page in the Page Builder. This is the usual order of work.
1
Add a section
Click Add new section under any section, or on an empty page. Pick a ready-made template or Blank section, which gives you one full-width row.
2
Add elements
Use the plus buttons inside rows, columns, stacks and groups to open the element picker.
3
Select and edit
Click an element to select it and double-click to edit it. The Layers panel lists the whole page as a tree: click to select, double-click to edit, drag to move.
4
Preview
Turn off the Edit Mode switch in the bottom-right corner to see the page without the builder outlines.
5
Save
Click Update Page. Nothing is saved until you do.
Click Edit Configuration under a section to open its Section Settings.
General
The section's name, its HTML tag and the Content container size: Full width, Container or Encapsulated.
Background
Transparent, a color, an image, a video, or an animated effect. Add an overlay color on images and videos so text stays readable.
Dimensions & Spacing
Padding, margin and size, set separately for computer, tablet and mobile.
Visibility Conditions
Show this section to limits it to logged-in users, logged-out visitors or users with certain tags. Variable rules hide it when a page value matches. See Dynamic content.
Delete Section removes a section and everything inside it after you confirm. It is gone from the page once you click Update Page.
Open a column to reach its Column Settings. Base Columns is the width on the smallest screens. SM, MD, LG and XL Columns set the width from small tablets up to wide screens, and each one inherits the previous value when left empty.
For two columns that sit side by side on a computer and stack on a phone, set Base Columns to 12 and MD Columns to 6 on both. Order (Responsive) changes which column comes first on each screen size.
Use the padding of sections for vertical rhythm and the gap of stacks and groups to space elements. Margins on individual elements are harder to keep consistent.
The Page Configuration button at the top of the builder holds settings for the whole page: Background Settings (transparent, color, image or a grid pattern), Page Variables and Page Events.
Variables and events are covered in Dynamic content.
