The columns component, whose option icon is shown in figure 1, splits a section of the page into columns.
When you first add a columns component, it will create a two-column split. The column bars, as shown in figure 2, use a grey divider to indicate the gutter between columns. The plus signs at the bottom of the columns let you add options.
To add, delete, resize, or rearrange columns, click anywhere on the bar labelled Columns. The rest of the page will be dimmed, and the columns editor, as shown in figure 3, will be displayed.
The bars above and below the columns contain four types of button:
Add (plus sign)
Clicking this button will add a new column between the neighbouring columns.
Delete (minus sign)
Clicking this button will delete the column below it.
Resize (two-headed arrow)
Clicking and dragging this button will resize the neighbouring columns.
Move (four-headed arrow)
Clicking and dragging this button will move the column above it.
The toolbar at the top of the page contains the following buttons:
Clicking this button will let you change the horizontal gutter between columns.
Clicking this button will let you change the vertical space between options in a column.
Clicking this button will undo the last action.
Clicking this button will redo the last action.
Clicking this button will apply the changes to the columns.
Clicking this button will close the column editor without changing the columns.