Applicable Packages
Lite Plus Max Shop



The columns component, whose option icon is shown in figure 1, splits a section of the page into columns.


Figure 1. the column option icon


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.


Figure 2. the column bars for a two-column split


Editing columns

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.


Figure 3. the columns editor


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:


Edit gutter

Clicking this button will let you change the horizontal gutter between columns.


Edit space

Clicking this button will let you change the vertical space between options in a column.


Undo

Clicking this button will undo the last action.


Redo

Clicking this button will redo the last action.


OK

Clicking this button will apply the changes to the columns.


Cancel

Clicking this button will close the column editor without changing the columns.