How to read this page
Every section below is a live module. The small label names its group, the heading names the module and the line under it says when to use it. Field labels in the editor are German, the names in brackets are what editors see.
Structure modules
Ten column layouts carry most of the text and images on a page. They differ in the number of columns, the split and whether each column has an image.
Structure
One column (Einspaltig)
Running text: an introduction, an explanation, a legal page. The text column stays at a readable width.
This is the most used module. Editors write in the Classic Editor toolbar: headings, lists, links, bold text and icons via the shortcode .
- Headings from h2 to h4
- Lists with bullets or numbers
- Links and buttons in the text
Structure
Two columns (Zwei Spalten)
Two equal halves, for comparisons or two related topics side by side.
Left column
Both columns are 50 percent wide on desktop. On phones they stack, left above right.
Right column
Each column is a full text editor, so it can hold lists, links and images.
Structure
Three columns (Drei Spalten)
Three short points of equal weight.
Plan
Short text per column works best, two or three sentences.
Build
On tablets the columns wrap, on phones they stack.
Launch
For icons and links per item, the cards module is the better choice.
Structure
Four columns (Vier Spalten)
Four very short items, such as facts or opening hours.
One
A line or two.
Two
A line or two.
Three
A line or two.
Four
A line or two.
Structure
One third, two thirds (1/3 + 2/3)
A short label or summary next to the main text.
Summary
The narrow column holds the key point.
Main text
The wide column carries the details. This split draws the eye to the larger column and works well for an article with a short sidebar note.
Structure
Two thirds, one third (2/3 + 1/3)
The mirror image: main text first, a side note on the right.
Main text
The wide column comes first, which suits pages where the side note is optional reading.
Side note
Contact details, a quote or a link list.
Structure
One column with image (Einspaltig mit Bild)
A single highlight with a picture, an optional label and folding details.
Case study
Project Alpha
Image left, text right on desktop, stacked on phones. The details below fold open on click.
Any number of folding items can follow the text.
They use the same accordion as the accordion module.
Structure
Two columns with images (Zwei Spalten mit Bildern)
Two items that each need a picture, such as two services or two projects.
Project A
Image on top, text below.
Project B
Both cards are the same size.
Structure
Three columns with images (Drei Spalten mit Bildern)
A row of three pictured items, for example references.
Reference one
Every column can also carry a label and folding details.
Reference two
Titles line up across the row.
Reference three
On phones the row becomes a stack.
Structure
Four columns with images (Vier Spalten mit Bildern)
Four pictured steps or items, with an optional label each.
Step 1
Brief
Goals and scope.
Step 2
Design
Structure and look.
Step 3
Build
Templates and content.
Step 4
Handover
Launch and training.