Layout

A layout puts content side by side, in two or three columns. Use it when things are meant to be compared, such as before and after or one plan against another, or to set a short summary beside the text it sums up. On a phone the columns stack one above another, so nothing gets squeezed.

Insert it

Type the command and press Enter, or choose + on the toolbar, then Layout. You get two equal columns, each with an empty line to type in, and a bar above them that changes their shape. Click where the layout should go first, without selecting anything: selected text is replaced.

A layout always sits at the top level of a page. Inserted while the cursor is in a panel, a list or an expand, it goes below that instead, and a layout cannot go inside another layout.

The five shapes, and when to use each

Here is each shape, with the kind of content it suits. On a phone you see each one as a stack.

Two columns

Two things of equal weight side by side: before and after, for and against, option A and option B.

Three columns

Three things of the same kind: plans, offices, teams. Keep each column short; three columns of long text are narrow and tiring to read.

Left sidebar

A narrow column of facts or links beside the main text: the key facts about a project, the people to contact, related pages. On a phone the sidebar comes first, so put in it what a reader should see first.

Right sidebar

The main text first, with something extra beside it, such as a tip or a note. On a phone the main text comes first and the sidebar follows it, which is right when the side column is extra rather than essential. As here, a column can hold other elements: panels, lists, tables, pictures.

Three with sidebars

A wide middle with a narrow column each side: for a page that sits in a sequence, with what comes before and after on either side, or to set one important thing in the center.

How wide it is

A layout can also be wider than the text around it. The bar above it offers Centered, the width of the text, which is how every layout above is set; Wide, a little wider; and Full width, as wide as the page area allows. Here are the two wider ones:

Changing and removing a layout

Click in any column and a bar appears above the layout:

• The five shape buttons (Two columns, Three columns, Left sidebar, Right sidebar and Three with sidebars) change the shape. Content stays where it is; going from three columns to two moves what was in the third into the second.

• Centered, Wide and Full width set how wide it is.

• Remove layout takes the columns away and keeps their contents, one after another, in column order.

While you edit, each column has a dashed outline so you can see where it starts and ends; readers do not see it. If the cursor is in a panel, a table or another element inside a column, that element’s own menu shows instead: click in plain text in the column to get the layout bar back.

Good practice

• Use columns for things read side by side, not to fit more on the screen.

• Keep the columns about the same length, or the page has a long empty gap beside the longest one.

• Think about the phone. The columns stack in order, first column first, so put first what should be read first.

• Two columns are usually enough. The narrower the columns, the harder they are to read.

Related elements

• Table for comparing many things across the same few facts.

• Image beside text: put the picture in one column and the words in the other.

• Panels sit well in a sidebar.