Layout-Raster

Wozu Raster-Elemente?

Viele Nutzerinnen und Nutzer sind mittlerweile nur noch mit Tablets oder Smartphones online. Um dieser Veränderung Rechnung zu tragen, sind Technik und Layout so konzipiert, dass sich die Inhalte an die Bildschirmgröße des Endgeräts anpassen.

Über Container können Inhalte auch nebeneinander auf der Seite angeordnet werden. Ohne Raster sind Inhaltselemente nur untereinander angeordnet.

(öffnet Vergrößerung des Bildes) — Auswahl im Backend

Redaktionelle Hinweise
Flexibles Layout 16er-Raster
Ansichten im Backend
Beispiele der Raster im Frontend

Redaktionelle Hinweise

Wichtige Informationen immer oben auf die Seite setzen.
Neue Inhaltselemente können im Raster angelegt werden oder bereits vorhandene Elemente per Drag and Drop in das Raster verschoben werden.
Benennen Sie auch Container und stellen Sie den Typ bei Bedarf auf "verborgen" - das erleichtert Ihnen die Übersetzung der Seite.
Prüfen Sie, wie die Seite in anderen Ausgabegeräten angezeigt wird (Web/Ansicht).

Wichtig: kein Raster in ein Raster einfügen!

Flexibles Layout

Grundlage ist...

... ein flexibes 16er Raster. Das Raster ermöglicht ein Anpassen der Seite an verschiedene Ausgabegrößen. Mobile Endgeräte, Landscape-, Portraitformat, etc.

7 Layout-Optionen:

Ansichten im Backend

Das über diesem Bild gezeigte Rasterelement

Beispiele Ansicht Frontend

8:8

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

10:6

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

6:10

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

12:4

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

4:12

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

33:33:33

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Beispiel Teaser

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

25:25:25:25

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

Typoblindtext

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.