The Layout box macro has two main functions. It can create a custom "box" for your content which you can customize in style. Furthermore, you can use Layout box to create a page layout with multiple columns.
'Layout box' use cases
The Linchpin Layout box macro offers several customization options.
Color of the box background. Input options: Normal words ("black") or hex value ("#000000").
Color of the text inside the box. Input options: Normal words ("black") or hex value ("#000000").
Set the width of the box.
Choose the margin of the box. Outer spacing defines the distance between your box and other elements.
You can input the outer spacing in two ways:
- Single number: 10px
→ 10 pixels outer spacing in every direction (top, right, bottom, left).
- Four numbers: 10px 0px 10px 0px
→ Every number stands for a direction. The directions are top, right, bottom, left. This example would result in an outer spacing of 10px on top and bottom and no outer spacing on the sides.
Choose the inner spacing of the box. Inner spacing defines the distance between your content (for example text) and the border of the box.
You can input the inner spacing in two ways:
Single number: 10px
→ 10 pixels inner spacing in every direction (top, right, bottom, left).
Four numbers: 10px 0px 10px 0px
→ Every number stands for a direction. The directions are: top, right, bottom, left. This example would result in an inner spacing of 10px on top and bottom and no inner spacing on the sides.
For numerical inputs (width, outer spacing, inner spacing), you can use percentage, pixels, em or rem.
Alignment of the box
You can set floats for every Layout box. If you set several boxes to float left, and use a wrapper, those boxes will appear as columns.
Use box as a wrapper
Set up a box as wrapper if your layout should contain multiple columns. It functions as a container for other boxes. The wrapper box contains only other Layout boxes. Those will appear as columns, as long as you set them to float left.
You can input your own CSS classes here to add additional styles like shadows, borders, etc.
CSS classes need to be set up by your administration. Otherwise this setting won't do anything.
On this page
In this section
Link to this page: