Multi-column content
Multi-column content allows you to display content elements side by side - for example, two text blocks or images in two columns. The columns are configured via the "Frame" setting on the "Appearance" tab.
Basic principle
Multi-column content works by assigning positions (Left / Center / Right) to consecutive content elements. The order of the elements in the backend determines how they are displayed in the frontend.
Two-column layout
Goal: Display two content elements side by side (left and right).
Step by step:
- First element: Open the Appearance tab → Frame: “2 Columns, Content Left”
- Second element (directly below): Frame: “2 Columns, Content Right”
Important
The order in the backend must alternate: Left → Right → Left → Right.
This ensures that the content elements are displayed side by side correctly in the frontend.
Three-coumn layout
Goal: Display three content elements side by side.
Step by step:
- First element: Frame: “3 Columns, Content Left”
- Second element: Frame: “3 Columns, Content Centre”
- Third element: Frame: “3 Columns, Content Right”
Important
The order in the backend must follow this sequence: Left → Center → Right.
This ensures that the content elements are displayed side by side correctly in the frontend.
Placeholder for incomplete rows
If a row is not fully populated (e.g., only 1 of 2 columns is used), add a hidden placeholder element:
- Create a new content element, type: “Header”
- Enter a heading (it will not be displayed, but helps identify the element in the backend)
- Hide the element (eye icon)
- Set the Frame to the missing position (e.g., “2 Columns, Content Right”)
- Save
Without a placeholder, the layout may break or become misaligned in the frontend.
Overview of frame options
| Frame | Usage |
|---|---|
| 2 Columns, Content Left | Left column of a two-column row |
| 2 Columns, Content Right | Right column of a two-column row |
| 3 Columns, Content Left | Left column of a three-column row |
| 3 Columns, Content Center | Center column of a three-column row |
| 3 Columns, Content Right | Right column of a three-column row |
Accordion
Multi-column elements can also be displayed as an accordion. To do this, select the “Accordion” frame option in addition to the column settings.
For details, see the accordion page.