1. Einführung – Was ist ein OnePager-Layout?

  • OnePager ist ein spezielles Seitenlayout mit Container-Elementen.
  • Container dienen zur Strukturierung von Inhalten in Spalten, Sektionen und Gestaltungsvarianten.
  • Alle Inhalte liegen untereinander auf einer Seite, Navigation erfolgt über Sprunganker (ID / #link).

Hinweis: Dieses Layout ist besonders geeignet für Landingpages, Modulübersichten oder Themen-Specials.

2. Aufbau und Steuerung der Container

Container-Control:

  • Im Layout OnePager können Inhaltselemente zusätzlich mit Eigenschaften versehen werden, So können diese über die komplette Breite des Fenster gehen, oder im Inhaltsrahmen platziert werden, dann können Hintergründe, Vollbild und Anker aktiviert werden.
  • Checkbox Verhält sich wie ein Container aktivieren

Die folgenden Schalter/Felder werden nur aktiv, wenn der obere aktiv ist.

  • Inhaltselement passt sich komplett dem Fenster an - objectfit Element nimmt das ganze Fenster ein 100vh und 100vw. 
    Ist dieser Schalter aktiv werden die Felder für den Link nach oben, bzw. nach unten aktiv und es kann ein heller, bzw. dunkler Peil ausgewählt werden.
  • Die Hintergrundfarbe ist frei wählbar, es gibt zudem fertige Farben zur Auswahl. Das gleiche für die Textfarbe, aber nur im selben Objekt, Kinderelemente sind nicht betroffen.

Zusätzlich ist auf dieser Seite die Navigation Seitenanker aktiv. Gesteuert wird das für jedes! Element mit dem Schalter In Menüs zeigen.

Typen:

  • Stretch vs. nicht-stretch (unterschiedliche Breite)
  • Weißer Hintergrund oder farbiger Hintergrund
  • Mit/ohne Anker

3. Best Practices: Inhalte in Containern

  • Bilder immer innerhalb von Container-Elementen platzieren.
  • Text klar strukturieren (Überschriften richtig einsetzen: H1-H3).
  • Einheitliche Spaltenhöhen ggf. mit Füllinhalten (Leertext) ausgleichen.
  • Keine Copy-Paste-Fonts oder Inline-Stile aus Word etc.

Vorteil: Visuell ansprechende, gleichmäßige Layouts ohne manuelles CSS.

4. Info: Was bedeutet Stretch bei Containern?

Die Layout-Option Stretch sorgt dafür, dass ein Container über die gesamte Seitenbreite dargestellt wird – also „randlos“. Das eignet sich besonders gut für große Bildelemente, Headerbereiche oder farbige Sektionen, die sich deutlich vom restlichen Inhalt abheben sollen.

Im Gegensatz dazu bleibt ein Container ohne Stretch im normalen Inhaltsraster, also innerhalb der festgelegten Maximalbreite. Diese Variante wird bevorzugt für leselastige Inhalte wie Text- oder Spaltenelemente verwendet, weil sie ruhiger und übersichtlicher wirkt.

Kurz gesagt:

  • Mit Stretch: Volle Seitenbreite, wirkt großflächig und modern.
  • Ohne Stretch: Begrenzte Breite, ideal für strukturierte Inhalte.