Put two sections side by side
Updated October 1, 2026
Pair two sections into a single two-column row, by dragging them into a block in the sections list, and put as many sections as you need in one column.
What it’s for
A page is a stack of sections, one per row. A two-column row puts two of them side by side (a video next to a quote, a teaser next to the registration form) so a long page reads shorter without losing anything.
The row splits 50/50, and the two columns stack back on top of each other on a narrow screen. There is nothing to design twice.
A column is not limited to one section: stack several in the same half of the row, for instance two text blocks, or a title above a video.
On step 3 · Design, look at the sections list on the right. Click “Two columns”, beside “Add section”, to open an empty block with two column slots.
Here, Media and the registration form already share a row. Drag a section from the list into a slot. The block travels to the first section you drop in it, so your page order does not change, only the layout does.
Fill the second slot the same way: drag another section in, use “New” to pick a brand-new one, or “Move here” to take one the page already has (that menu is there for when you can't drag).
Shortcut: drop a section straight onto the middle of another line in the list, and the two share that row without opening a block first.
To put more than one section in the same column, use the “Add below” line at the bottom of that column: “New” creates a section there, “Move here” brings one the page already has. Dragging a section onto the middle of a line of a full block does the same thing.
To move the whole row, drag the block by the grip in its header: both columns travel together. Dragging the section at the top of the left column does the same, since it carries the row along.
The header also carries two actions: swap the two columns, or split the row back into full-width sections. To take a single section out, drag it out of the block, into a gap between rows: it becomes full width again.
When one column is shorter than the other, select the section at the top of it and set “Vertical alignment” under “Row” in its settings panel: Top, Middle (the default) or Bottom. Each column is set on its own, and the whole column moves however many sections it holds, so a short teaser can start at the top of a long agenda instead of floating in its middle.
Good to know
- Any section can be a column, the cover and the form included. Whether it reads well in half a row is your call. The preview shows it live.
- A row holds two columns at most, but each of them holds as many sections as you want. Inside a column, the move arrows on the canvas reorder the sections between themselves.
- The row is painted as one band: the background comes from the section at the top of the first column, so nothing else in the row shows one of its own.
- A form or CTA whose own layout is split left/right renders centered while it is in a column, two split layouts nested in each other is noise.
- On a narrow screen the columns stack, the left one first. That is also the order visitors on a phone and search engines read them in.
- Vertical alignment only applies while the section is in a row, and it is dropped from view once the columns stack: on a phone each one is full width, so there is nothing to align against.
Related articles
Still need help?
Ask AI for a docs-grounded answer, or talk to our team.
Was this article helpful?