Seitenlayouts

Verwendungshinweis

Die Wahl des Seitenlayouts beeinflusst den Aufbau des Seiteninhalts. Hier wird zunächst zwischen Seiten über die gesamte Breite  und Containerseiten unterschieden. Full-Width Seiten haben keine Außenabstände und deren Inhalte werden im weiteren Verlauf mit Wrappern und Raster-Elementen strukturiert. Containerseiten haben bereits Außenabstände und können z.B. auch eine seitliche Navigation der Unterseiten enthalten (vgl. Demobereich).

Im Folgenden wird eine kundenspezifische Auflistung der zur Verfügung stehenden Seitenlayouts und deren empfohlene Verwendung aufgeführt.

Seiten über die volle Viewportbreite

Vorrangig für aufbereitete Inhalte

0:12 (Full-width)

Einsatz: Vollflächige Seite ohne Prepend und Intro Bereich

  • Vorangestellte Spalte: keine
  • Hauptspalte: einspaltig, ohne Abstände (Full-width)
  • Seitliche Navigation: keine
  • Position Pagetitle/H1: über Content pflegen

3:12 -- 0:12 (Full-width mit Prepend und Intro)

Einsatz: Startseite, Portalseiten und Unterseiten mit mehreren Textblöcken und Elementen

  • Vorangestellte Spalte: einspaltig, ohne Abstände (Full-width) 

Vorangestellte Inhalte richtig nutzen

  • Intro Spalte: einspaltig, Einleitung mit Teaser-Text, weiße überlappende Box mit grauem Hintergrund (Aussehen für Startseite angepasst)
  • Hauptspalte: einspaltig, ohne Abstände (Full-width)
  • Seitliche Navigation: keine
  • Position Pagetitle/H1: über Content pflegen

Container Seiten

Vorrangig für reine Textinhalte

0:12 (Container)

Einsatz: Einfache Textseiten

  • Vorangestellte Spalte: keine
  • Hauptspalte: einspaltig, mit Außenabständen
  • Seitliche Navigation: keine
  • Position Pagetitle/H1: automatisch über Seitentitel

3:12 -- 0:12 (Container mit Prepend)

Einsatz: Einfache Textseiten mit Bild

  • Vorangestellte Spalte: einspaltig, ohne Abstände (Full-width)
  • Hauptspalte: einspaltig, mit Außenabständen
  • Seitliche Navigation: keine
  • Position Pagetitle/H1: automatisch über Seitentitel

1:3 -- 0:9 (Container mit linker Spalte)

Einsatz: Einfache Textseiten mit Unterseiten

  • Vorangestellte Spalte: keine
  • Hauptspalte: zweispaltig, mit Außenabständen
  • Seitliche Navigation: in linker Spalte
  • Position Pagetitle/H1: automatisch über Seitentitel

3:12 -- 1:3-0:9 (Container mit Prepend und linker Spalte)

Einsatz: Einfache Textseiten mit Bild und Unterseiten

  • Vorangestellte Spalte: einspaltig, ohne Abstände (Full-width)
  • Hauptspalte: einspaltig, mit Außenabständen
  • Seitliche Navigation: in linker Spalte
  • Position Pagetitle/H1: automatisch über Seitentitel