Documentation's navigation


On this page


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 to all units (%, px, em, rem).

If you wish to apply a width limit to your layout, add the width attribute 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.


Configure the content on your dashboard

To configure the dashboard's content, you need to be an administrator and edit the Default Welcome Message template.

You will find this template in Confluence administration > Configuration > Global Templates and Blueprints > System templates > Default Welcome Message.

Click on Edit. You can now create a dashboard template.



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

Please Note!

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 under 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: 14%
    • Outer spacing: 0 2% 0 0
    • Inner spacing: 5px
    • Alignment: left

Third box:

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

Fourth box:

    • Width: 42%
    • Inner spacing: 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

Here you can view the whole layout in one image. If you're stuck, compare your work with this cheat sheet. Perhaps you can identify your problem.


Step-by-step cheat sheet




To go back to the layout box macro overview page click here.



Link to this page: https://seibert.biz/linchpinessentials-multi-column-layout-examples


This page was last edited on 09/29/2023.