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

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 is a multi-column layout?

The Layout box macro allows you to create a multi-column layout. This way, you can be more flexible in your design.

The rules

Inside of Layout boxes might be several more boxes, acting as columns. For the columns to be displayed correctly, three conditions must be met:

  1. The columns must be inside a wrapper Layout box.
  2. All Layout boxes acting as columns must be aligned to the left.
  3. Column widths and spacings between and around them must add up to 100% (or the total width you set up for your wrapper box).

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

You're done!

More examples

This page was last edited on 12/16/2020.