Page tree
Skip to end of metadata
Go to start of metadata

Create a multi-column layout

The Layout box can be used to create a multi-column layout. You will need a Layout box as wrapper and a Layout box for every column you want to display.

What's a multi-column layout

Be more flexible with your design. The Layout box macro allows you to create a multi-column layout. 

Follow the instructions below to create your first two-column layout. 

How to create a multi-column layout

Create a wrapper

Create a Layout box and click on Use box as a wrapper. This box doesn't need any other changes.

Create your columns

Create new Layout boxes inside your wrapper box. From now on, every new Layout box represents a column. Make sure to put your Layout box inside the wrapper box.

Set alignments and outer spacings

You need to set all your Layout boxes to float in the same direction.

Change "Alignment of the box" to left. Do this for all your columns.

Change Outer spacing. For a space between the columns, add a right margin (e.g. 0 2% 0 0) to all columns except the last one.

Calculate the column width

The formula for a multi-column layout is as follows:

(100% - outer spacings) / number of columns = column width

100% being 100% of the available space inside the document.

Outer spacings being spaces to the left and right of the columns. Either between columns or between a column and the document's border.

Set the width of your columns inside the macro.

Style your columns

You can add background color, text color and inner spacing now. You can also add custom CSS classes, if your system administrator set any up.

You're done!