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


We created a few layout examples for you. View how multi-column layouts can be created.

Two-column layout

Settings for this box:

Width = 49%

Outer spacing = 0 2% 0 0

Alignment = left

Settings for this box:

Width = 49%

Outer spacing = 0

Alignment = left

Explanation:

The boxes have to be 49% wide, because the space between them takes away 2% of the available space.

100% - 2% = 98%

98% / 2 = 49% per box



Three-column layout

Settings for this box:

Width = 32%

Outer spacing = 0 2% 0 0

Alignment = left

Settings for this box:

Width = 32%

Outer spacing = 0 2% 0 0

Alignment = left

Settings for this box:

Width = 32%

Outer spacing = 0

Alignment = left

Explanation:

The boxes have to be 32% wide, because the spaces between them take away 2% of available space each.

100% - 2% - 2% = 96%

96% / 3 = 32% per box


Those examples apply for all units (%, px, em, rem).

If you wish to apply a width limit to your layout, add it to the wrapper box.



To center your columns horizontally, use outer spacing = 0px auto on your wrapper box.

You can change the 0px to any other number. This number defines the vertical distance to other elements.



Dashboard layout

Let's create an exemplary dashboard using Layout boxes.


The end result will look like this:



How it works:

How it works

Think in boxes! Every "section" of your dashboard is a Layout box, going from the very left to the very right of your page. Alternatively, the box has a width you defined. 



Inside those 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).




Step-by-step instructions


Step-by-step instructions

Please note that these instructions use macros specific to this example. You can of course use whichever macros you need and want.

Also, we create a full-width dashboard here. If you want to restrict your elements in width, edit the width of your wrapper boxes.


Insert a Layout box.

Insert the Layout box macro into your page.



This Layout box does not need any configuration. We want to use it for only one macro. It will have the full width of the page.

Add the Cover Stories macro and a title.

Inside your Layout box, use a title to describe the functionality. We are using "Company news" here.

Place the Cover Stories macro inside your Layout box. Place it beneath the title.



Create a wrapper box.

Insert another Layout box macro into your page. Select "Use box as a wrapper" in this macro's configuration.



Add an outer spacing of 50px auto to this wrapper box. It will push this box and its content down by 50px and center it horizontally.

Create three more Layout boxes inside your wrapper box.

Above all those boxes, add the title "Employees".

Now setup the Layout boxes as columns:

    • Set the width to 32% on all three boxes.
    • Set the inner spacing to 5px on all three boxes.
    • Set the alignment of the box to left on all three boxes.
    • Set the outer spacing to 0 2% 0 0 on the first two boxes.



Fill your Layout boxes with content.

Add pictures and text. Center both.

Note that we used another Layout box for the text. This allowed us to easily add a background color to the text.


Create a new wrapper box.

Insert a new Layout box into your page.

Configure it like in step 3:

    • Outer spacing of 50px auto
    • Select "Use box as a wrapper"



Insert two Layout boxes into your wrapper box.

Configure those Layout boxes as follows:

First box:

    • Width of 64%
    • Outer spacing of 0 2% 0 0
    • Inner spacing of 5px
    • Alignment of the box - left

Second box:

    • Width of 34%
    • Inner spacing of 5px
    • Alignment of the box - left



Fill your Layout boxes with content.

Add titles and macros to your Layout boxes.


Create a new wrapper box.

Insert another Layout box into your page.

Configure it once more as a wrapper:

  • Set the outer spacing to 50px auto.
  • Activate "Use box as a wrapper".



Insert four Layout boxes into your wrapper box.

Configure your four boxes as follows:

First and second box:

    • Width of 14%
    • Outer spacing of 0 2% 0 0
    • Inner spacing of 5px
    • Alignment of the box - left

Third box:

    • Width of 24%
    • Outer spacing of 0 2% 0 0
    • Inner spacing of 5px
    • Alignment of the box - left

Fourth box:

    • Width of 42%
    • Inner spacing of 5px
    • Alignment of the box - left


Fill your Layout boxes with content.

Add titles and macros to your Layout boxes.


Step-by-step cheat sheet


Step-by-step cheat sheet

Here you can view the whole layout. If you're stuck, you could compare your work with this cheat sheet.