Raster
Im Fall händisch gepflegter Contentseiten, die nicht aus Datensätzen generiert werden, müssen gewisse Inhalte in Raster gesetzt werden. Raster sind nichts anderes als Container für Inhalte. Beim Aufbau einer Contentseite muss man sich am besten schon bei der Texterstellung Gedanken darüber machen, in welchen Rastern die Texte am Ende aufgeteilt werden. Das Backend von Dataport kennt folgende Inhalts-Raster:
Das einspaltige Raster
Das einspaltige Raster "GridCol1Main" ist das „Standard-Raster“. Der Text läuft in einer lesefreundlichen Breite. Es ist besonders für längere Textpassagen geeignet und sollte vorzugsweise Verwendung finden. Es empfiehlt sich, für Texteabschnitte, die mit einer weiteren "H2"-Headline angefühft werden, ein neues einspaltiges Raster anzulegen und den Text dort einzupflegen. Zwischen den Rastern entsteht nämlich immer etwas mehr Abstand.
Das zweispaltige Raster - Layout: Standard
Texte und andere Inhalte können auch auf zweispaltige Raster aufgeteilt werden. In den Raster-Eigenschaften gibt es drei Einstellungen: „Standard“, „Offset links“ und „Offset rechts“. In der Standard-Einstellung, so wie in diesem Beispiel, sind beide Spalten gleich breit und zusammen genauso breit wie das einspaltige Raster.
Wechseln Sie Raster immer nur dann, wenn es auch inhaltlich Sinn ergibt! Sie können durch einen Rasterwechsel Inhalte strukturieren und spannender darstellen.
Pro-Tipp:
Wenn das Layout von einem einspaltigen zu einem mehrspaltigen Raster übergeht, oder von der Standard-Einstellung zu einer Offset-Einstellung, empfiehlt sich dazwischen eine Trennlinie.
Das zweispaltige Raster - Layout: Offset Links
In den zweispaltigen Rastern mit Offsets sind die Spalten breiter. Vorrangig sollte dieses Raster mit der Einstellung „Offset links“ verwendet werden. Anschließend kann - um das Layout aufzulockern - auch das Raster mit der Einstellung „Offset rechts“ eingesetzt werden.
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.
Das zweispaltige Raster - Layout: Offset Rechts
Dieses Raster sollte sehr sparsam eingesetzt werden. Es kann auf das einspaltige Raster oder das zweispaltige Raster mit „Offset links“ folgen, um das Layout aufzulockern. Die linke Spalte sollte dabei möglichst mit einem Bild-Element, einem Zitat oder einem Video befüllt werden.
Wenn sich Raster mit „Offset links“ und „Offset rechts“ abwechseln, sollte die bei „Offset links“ die rechte Spalte und bei „Offset rechte“ die linke Spalte möglichst mit Bild-, Zitat- oder Video-Elementen befüllt sein.
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.
Das dreispaltige Raster
Das dreispaltige Raster eignet sich für Inhalte, die aus drei mehr oder weniger gleichwertigen Inhaltsbereichen bestehen.
Dabei sollte man sich immer bewusst sein, dass die Spalten auf bestimmten Bildschirmgrößen durchaus sehr schmal werden können.
Also nicht zu viel Inhalt in die Spalten einpflegen, sonst wird es unter Umständen für manche Viewports schwer zu lesen.
Das vierspaltige Raster
Das vierspaltige Raster eignet sich für Inhalte, die aus vier mehr oder weniger gleichwertigen Inhaltsbereichen bestehen.
Auch hier werden die Spalten auf diversen Browsergrößen schmal. Der Einsatz sollte immer gut abgewogen werden.
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.
Für jedes Raster kann eine eigene Überschrift und Unterüberschrift vergeben werden. Diese erscheinen über dem eingepflegten Inhalt und laufen bei mehrspaltigen Raster über die Spalten hinweg.
