Workshop / Layouts
The same blocks. Different rhythms.
These examples show the four native column layouts. Resize the window: reading order is preserved when columns stack.
01 / Equal columns
A clear idea
A text block accepts emphasis, italics and internal links. Edit the words directly in the page.
A visible structure
- One main heading per page
- Short sections
- Descriptive link labels
“Give each block a reason to be here.”— Project statement
02 / Three complementary steps
Compose
Add blocks, move them and save a reusable section.
Preview
Check the private preview and the mobile layout.
Publish
Review links, headings and image descriptions before making the page public.
03 / One third, two thirds
A reading note
A narrow column helps introduce the main text.
Two thirds for the explanation. Each column contains real blocks. Text, images and buttons can move between columns using the inspector, without dragging.
A column cannot contain another Columns block. This keeps both editing and the mobile layout manageable.
04 / Two thirds, one third
A visual setting is still a setting.
Backgrounds, borders, spacing, rounded corners and widths belong to each block. No custom CSS was added to this site.
Try it in your own copy: change the column proportions or reverse their order in the inspector.
05 / Breathing room
The line above is a Separator. The space below is a 24 px Spacer. Both are native blocks.
06 / Code that stays code
{
"title": "A readable page",
"status": "published",
"builder": []
}A simplified example of the content format. The Code block displays text; it never executes it.
Questions about the layout
Can every block go inside a column?
Native content blocks can be inserted into columns. Columns themselves cannot be nested again.
Can I undo a move?
The editor provides undo and redo. A local editing action and restoration from content history are separate operations.
Does this require writing CSS?
These examples use only appearance settings and native block controls.