Put two sections side by side

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, or 60/40 and 40/60 when one side needs more room, 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.

How to#

1 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.

2 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.

3 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).

4 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.

5 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.

6 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.

7 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.

8 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.

9 To give one column more room, select any section of the row and pick “Column widths” under “Row”: 50/50 (the default), 60/40 or 40/60, left column first. The row keeps its outer edges; only the share between the two columns changes.

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.