Ebene 2 · Ein Bereich einer Seite

Sektionen & Layout gestalten

Im Register Design einer Sektion stellst du ein, wie dieser Bereich aufgebaut ist und aussieht – Layout, Hintergrund, Höhe, Ausrichtung.

Wo du das findest

„Sektion“ heißt in dieser Hilfe: ein Artikel oder eine Elementgruppe. Beide tragen dieselben Felder. Eine Seite mit drei Artikeln untereinander hat also drei Sektionen.

So kommst du hin: Seitenstruktur → Seite → Artikel-Symbol → den Artikel bearbeiten. Im Bearbeitungsformular sind die Felder in aufklappbare Abschnitte gruppiert („Register“, die grauen Balken). Vor dem Register Experte steht das Register Design – aufklappen, darin liegen alle Felder.

Das Register „Design“ an einem Contao-Artikel mit den Sektions-Feldern — Das „Design“-Register an einem Artikel – hier ein Hero mit Bild. Bei News- und Event-Einträgen gibt es dieselben Felder.

Layout

Spalten für die Inhaltselemente in dieser Sektion. Auf schmalen Bildschirmen stapeln alle Varianten automatisch zu einer Spalte.

Option	Bedeutung
Standard (einspaltig)	Elemente untereinander.
Zwei- / Drei- / Vier- / Sechsspaltig	Gleich breite Spalten.
Asymmetrisch 2:1 / 1:2	Zwei Spalten, eine doppelt so breit.
Auto-Raster	So viele gleich breite Spalten, wie nebeneinander passen.
Text + Bild	Zwei zentrierte Spalten mit großem Abstand – für Text neben Bild.
Hauptinhalt + Seitenleiste	Breite Spalte plus schmale Seitenspalte.

Einzelne Elemente breiter machen: ein Inhaltselement kann über mehrere Spalten laufen (Feld Breite am Element, siehe Inhaltselemente).

Abstand

Der vertikale Innenabstand der Sektion (oben/unten): Standard, Klein, Groß. Bei einer Elementgruppe heißt das Feld sinngemäß „Innenabstand der Gruppe“.

Mindesthöhe

Macht aus einer Sektion einen Hero-Bereich – eine Fläche, die mindestens einen Teil des Bildschirms hoch ist.

Option	Höhe
Standard (Inhalt)	So hoch wie der Inhalt.
Drittel / Halb / Groß / Voll	33 % · 50 % · 75 % · 100 % der Bildschirmhöhe (auf dem Handy etwas angehoben, damit Heros nicht flach wirken).

Für einen Hero mit mittig stehendem Titel die Mindesthöhe mit Ausrichtung vertikal → Mittig kombinieren.

Hintergrund

Farbe, Bild, Video, Verlauf oder Glas hinter der ganzen Sektion.

Gruppe	Optionen
Flächen	Grundfläche · Abgesetzte Fläche · Primärfarbe · Sekundärfarbe · Keiner (Fläche entfernen)
Hintergrundbild	ohne Overlay · Overlay dunkel · hell · Primärfarbe · Sekundärfarbe · Verlauf
Hintergrundvideo	wie Bild, mit denselben Overlays
Verläufe	sanft · Primärfarbe · Sekundärfarbe · Farbverlauf (frei) · animiert
Glas	Glas · Glas dunkel (Milchglas-Effekt)

Overlay und Textfarbe

Overlay dunkel / hell / Primärfarbe / Sekundärfarbe / Verlauf: die Textfarbe stellt sich mit um (dunkles Overlay → heller Text). Du musst am Feld Textfarbe nichts tun.
„Hintergrundbild – ohne Overlay“: hier gibt es keine Abdunklung. Setze die Textfarbe passend zum Bild selbst (helles Bild → „Schwarz“, dunkles Bild → „Weiß“).

In jedem Fall in der Vorschau prüfen; im Studio hilft der Schalter Kontraste.

Hintergrundbild auswählen

Sobald du eine „Hintergrundbild …“-Option wählst, erscheint darunter das Feld Hintergrundbild: dort ein Bild aus der Dateiverwaltung auswählen. Es wird automatisch auf 1920 px Breite skaliert und als WebP ausgeliefert; kleinere Varianten für Handy und Tablet entstehen von selbst.

Bild vorbereiten Lade mindestens 2400 px breit hoch – das Theme liefert zwar auf 1920 px herunterskaliert aus, aber die doppelte Auflösung hält es auf Retina-Displays scharf. Format: bei einem vollhohen Hero eher quer und nicht zu detailreich am Rand – das Bild wird je nach Bildschirm unterschiedlich beschnitten, wichtige Motive gehören in die Mitte. Als Dateiformat JPG oder WebP; PNG nur bei Grafiken.

Feld „Hintergrund“ auf „Hintergrundbild“ gestellt, darunter der Datei-Auswähler — Das Datei-Feld taucht erst auf, wenn oben eine Hintergrundbild-Option gewählt ist.

Datei verschieben ist unkritisch. Contao merkt sich das Bild an seiner internen Kennung, nicht am Pfad. Du kannst es später in der Dateiverwaltung umbenennen oder in einen anderen Ordner schieben – die Sektion zeigt es weiterhin. Nur Löschen macht den Hintergrund leer.

Hintergrundvideo

Bei einer „Hintergrundvideo …“-Option erscheinen zwei Felder: Hintergrundvideo (MP4 oder WebM, läuft stumm in Schleife) und Standbild. Ein Pause-Knopf wird automatisch eingeblendet – ohne ihn verstößt bewegter Hintergrund gegen die Barrierefreiheit. Das Standbild wird gezeigt, solange das Video lädt, wenn es pausiert ist und wenn es gar nicht startet (kein JavaScript, reduzierte Bewegung, nicht unterstütztes Format). Ein Standbild ist deshalb Pflicht – ohne bleibt die Sektion in diesen Fällen leer. Mehr dazu unter Fertige Bausteine.

Textgröße

Skaliert die Überschriften in dieser Sektion: Klein, Standard, Groß, Hero – unabhängig vom Design-Studio-Regler.

Ausrichtung

Feld	Optionen	Wirkung
Ausrichtung horizontal	Links · Mittig · Rechts	Textausrichtung und Position von Inhalten, die auf ihre Breite schrumpfen (z. B. Buttons).
Ausrichtung vertikal	Oben · Mittig · Unten	Nur wirksam, wenn die Box höher ist als ihr Inhalt – z. B. bei Mindesthöhe oder unterschiedlich langen Spalten.

Textfarbe

Legt den Textkontext der Sektion fest:

Standard	erbt den Kontext von außen.
Weiß	heller Text – für dunkle Hintergründe.
Schwarz	dunkler Text – für helle Hintergründe.
Primärfarbe / Sekundärfarbe	Überschriften und Text in der Marken- bzw. Zweitfarbe.

Nur bei Elementgruppen: Spaltenabstand & Trennlinien

Feld	Optionen	Wirkung
Spaltenabstand	Standard · Keiner · Klein · Mittel · Groß · Sehr groß	Abstand zwischen den Elementen der Gruppe – waagerecht wie senkrecht. Nicht zu verwechseln mit Abstand (dem Innenabstand der Gruppe).
Trennlinien	Keine · Zwischen den Spalten	Senkrechte Striche in den Spaltenlücken. Bricht das Raster auf eine Spalte um, verschwinden sie. Gedacht für schlichte Spalten ohne eigene Kartenfläche.

Eine Elementgruppe kann außerdem selbst als Karte gerahmt werden oder über mehrere Spalten laufen (Felder Element-Stil und Breite – siehe Inhaltselemente).

Inline-Styles

Im Register Experte, direkt nach dem CSS-ID-/ Klassen-Feld, gibt es Inline-Styles für Feinjustierung, die kein Auswahlfeld abdeckt – z. B. --av-gutter: 2rem. Sparsam einsetzen; das Meiste lässt sich über die Felder oben lösen. Erklärung der Design-Variablen: Für Entwickler.