Put two sections side by side
Updated August 3, 2026
Pair two sections into a single two-column row, by dragging them into a block in the sections list.
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.
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.
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.
The block header carries two actions: swap the two columns, or split the row back into two full-width sections. Dragging a column out of the block, into a gap between rows, does the same thing.
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 sections at most, and it is painted as one band: the background comes from the first section, so the second column shows none 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.
Related articles
Still need help?
Ask AI for a docs-grounded answer, or talk to our team.
Was this article helpful?