Layout grid

Why grid elements?

Many users are now only online with tablets or smartphones. To take this change into account, the technology and layout are designed in such a way that the content adapts to the screen size of the end device.

Content can also be arranged side by side on the page using containers. Without a grid, content elements are only arranged one below the other.

(opens enlarged image)
Selection in the backend

Editorial notes

  • Always place important information at the top of the page.
  • New content elements can be created in the grid or existing elements can be moved into the grid using drag and drop.
  • Also name containers and set the type to "hidden" if required - this makes it easier for you to translate the page.
  • Check how the page is displayed in other output devices (web/view).

Important: do not insert a grid into a grid!

Flexible layout

The basis is...

... a flexible 16-page grid. The grid makes it possible to adapt the page to different output sizes. Mobile devices, landscape, portrait format, etc.

7 layout options:

Views in the backend

The grid element shown above this image

Examples Front end view

8:8

Typoblind text

This is a typoblind text. You can use it to see whether all the letters are there and what they look like. Sometimes you use words like Hamburgefonts, Rafgenduks or Handgloves to test fonts.

Image: Paavo Blafield

10:6

Image: Fiona Körner

Typoblind text

This is a typoblind text. You can use it to see whether all the letters are there and what they look like. Sometimes you use words like Hamburgefonts, Rafgenduks or Handgloves to test fonts.

6:10

Typoblind text

This is a typoblind text. You can use it to see whether all the letters are there and what they look like. Sometimes you use words like Hamburgefonts, Rafgenduks or Handgloves to test fonts.

Image: Fiona Körner

12:4

Typoblind text

This is a typoblind text. You can use it to see whether all the letters are there and what they look like. Sometimes you use words like Hamburgefonts, Rafgenduks or Handgloves to test fonts.

Image: Presse Uni Kassel

4:12

Typoblind text

This is a typoblind text. You can use it to see whether all the letters are there and what they look like. Sometimes you use words like Hamburgefonts, Rafgenduks or Handgloves to test fonts.

Image: Knut Wiarda

33:33:33

Typoblind text

This is a typoblind text. You can use it to see whether all the letters are there and what they look like. Sometimes you use words like Hamburgefonts, Rafgenduks or Handgloves to test fonts.

Image: Presse_Uni_Kassel

Example teaser

This is a typoblind text. You can see from it whether all the letters are there and what they look like.

25:25:25:25

Typoblind text

This is a typoblind text. You can see from it whether all the letters are there and what they look like.

Image: Sonja Rode

Typoblind text

This is a typoblind text. You can see from it whether all the letters are there and what they look like.

Image: Fiona Körner
To top