Grid

Das Grid unterteilt die Seite in verschiedene Abschnitte.

Über das Feld "+ Inhalt" gelangt man zu den Auswahlmöglichkeiten der Grids.

Bei Verwendung eines 100% Grids (eine Spalte) erscheinen die Inhalte in einem Block. Sie erstrecken sich somit über die gesamte Seite. Jedoch berücksichtigen Sie den vordefinierten Rand links und rechts. (kein Vollbild)
Wird dagegen ein 50% / 50% Grid (2 Spalten) verwendet, teilt sich die Seite in zwei Hälften - rechts und links.
Ein 33% / 33% / 33% Grid (3 Spalten) teilt die Seite in drei gleich große Bereiche auf - links, mitte und rechts.
Ein 25% / 25% / 25% / 25% Grid (4 Spalten) teilt die Seite in vier gleich große Bereiche auf.
Falls gewünscht, können Grids zusätzlich in ein anderes Grid eingefügt werden. Wird beispielsweise ein 50% / 50% Grid in eine Seite eines 50% / 50% Grids eingefügt, erhält man dort zwei 25% Grids. Die Grid-in-Grid Variante ist besonders hilfreich, um verschiedene Formatmöglichkeiten einer Seite durchspielen zu können, da die einzelnen Grid Elemente beliebig - ineinander, sowie untereinander - verschoben werden können. Ein Grid-Element kann dabei neben Text, ebenfalls beispielsweises einem Bild oder einem Video bestehen.

Durch den Einsatz von unterschiedlichen Grids kann beispielsweise links ein Text eingefügt werden und rechts ein Bild oder auch ein Video. Oder der Text wird in zwei Spalten aufgeteilt, wodurch zum einen Platz gespart und zum anderen etwas Abwechslung in die Gestaltung der Seite gebracht werden kann.

In einem Grid darf in jeder Spalte nur ein Element gepflegt werden (z. B. 33% / 33% / 33% Grid = 3 Elemente, eins pro 33% Spalte), wenn ein Abstand zwischen den Elementen (Bild, Text) gewünscht ist. Werden mehrere Elemente gepflegt, ist kein Abstand dazwischen vorhanden.

Die folgende Darstellung zeigt die verschiedenen Möglichkeiten des Grid-Systems.

Grid System - 1 Spalte (100%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Grid System - 2 Spalten (50% / 50%)

Bei einem Grid, das genau zwei Spalten besitzt (rechts und links) kann vor dem Speichern das Feld "Rechter Content Mobile oben?" ausgewählt werden. Dadurch wird die rechte Hälfte des Grids auf einem mobilen Endgerät obenhalb von der linken Hälfte dargestellt. Die linke Hälfte erscheint dann direkt unterhalb.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Grid System - 2 Spalten (33% / 67%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Grid System - 2 Spalten (67% / 33%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Grid System - 3 Spalten (33% / 33% / 33%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

50% / 50% Grid in 50% / 50% Grid (= 25% / 25% / 50%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Grid System - 4 Spalten (25% / 25% / 25% / 25%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Grids mit mehreren Zeilen

Neben den beschriebenen Grids, die aus einer Zeile und mehreren Spalten bestehen können, können auch Grids eingesetzt werden, die aus mehreren Zeilen bestehen.

Das Bild links zeigt beispielsweise ein Grid, das aus 3 Zeilen (3 Reihen) besteht. Hierfür wurde das Grid 3 Reihen - 4 Felder benutzt.

Im Zusammenhang mit Grids, die aus mehreren Zeilen (Reihen) bestehen, kann beispielsweise das Contenelement Zahl verwendet werden.

Hier wurde das Grid 2 Reihen - 3 Spalten genutzt.

Hier wurde beispielsweise das Grid 2 Reihen - 4 Felder benutzt.

Das nebenstehende Bild zeigt ein Grid mit mehreren Reihen im Backend. Es handelt sich um das Grid 3 Reihen - 6 Felder #2.

Über "+ Inhalt" können Elemente ausgewählt werden, die das Grid füllen. Folgende Elemente können beispielsweise eingefügt werden: Zahl, Beschriftung mit Hintergrund, Teaser mit Überschrift.

Beispielhafte Gestaltung des gezeigten Grids.

Hier wurde in jedem Feld das Contentelement Zahl verwendet.

Darstellung des gezeigten Grids im Frontend.