Seitenlayout und Inhalt

Die meisten Seiten folgen einer einheitlichen Struktur: Abschnitt → Zeile → Spalte(n) → Block(s). Wenn man versteht, welche Ebene die Breite und welche den Abstand steuert, lassen sich Layouts so gestalten, dass sie auf dem Desktop zentriert und auf Mobilgeräten angenehm dargestellt werden.

Grundlagen zur Seitenleiste: Seitenleiste und Symbolleiste im Seiteneditor. Blockkatalog: Referenz zu Editor-Blöcken und Layouts.

Das Fotorahmen-Modell

Stellen Sie sich jeden Abschnitt als einen Fotorahmen in voller Breite vor. Die darin enthaltene Zeile ist der Passepartoutkarton – ein zentrierter Kasten mit einer maximalen Breite. Ihre Blöcke befinden sich innerhalb dieses Kastens.

┌─ ABSCHNITT (100 % Breite – Hintergrund, vertikaler Abstand) ────┐
│                                                                 │
│   ┌─ ZEILE (maximale Breite, zentriert – Begrenzung des Hauptinhalts) ─────┐   │
│   │  [ Portfolio-Raster / Text / Schaltflächen / andere Blöcke ]     │   │
│   └─────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

Der Hintergrund des Abschnitts bleibt randlos. Farbe, Bild und Überlagerung füllen den gesamten Abschnitt von Rand zu Rand aus. Zeile → Maximale Breite begrenzt lediglich den Inhalt innerhalb des Passepartouts – der Hintergrund wird dadurch nicht verkleinert.

Verwenden Sie keine großen Abstände links/rechts im Abschnitt, um den Inhalt auf dem Desktop „zusammenzudrücken“. Dies steht im Widerspruch zum Layout-System und führt auf kleineren Bildschirmen vorhersehbar zu Darstellungsfehlern. Verringern Sie stattdessen die Breite des Inhalts mit Zeile → Maximale Breite unter Eigenschaften.

Was die einzelnen Ebenen steuern

Ebene	Steuert	Wo bearbeiten
Abschnitt	Layoutmodus, Höhe, randloser Hintergrund (Bild/Overlay), vertikaler Abstand	Abschnitt auswählen → Attr; Volltonfarbe unter Stil
Zeile	Max. Breite, Abstand zwischen Spalten, Zeilenpolster, horizontale Zentrierung	Zeile auswählen → Attr (Zeilenlayout)
Spalte	Zellenabstand, Mindesthöhe, vertikale Ausrichtung der Blöcke in der Zelle	Spalte auswählen → Attr
Block	Blockspezifische Einstellungen (Portfolio-Quelle, Hero-Bild, Formularempfänger usw.)	Block auswählen → Attr

Der Abschnittsabstand passt die Größe der untergeordneten Elemente nicht an. Es fügt um die Zeile herum Platz hinzu; es dehnt Zeilen oder Spalten nicht, um den Darstellungsbereich auszufüllen. Um ein Band höher zu machen, verwenden Sie Attr → Höhe für den Abschnitt, erhöhen Sie die minimale Höhe der Spalte, fügen Sie Spaltenabstand hinzu oder fügen Sie einen Spacer-Block ein.

Abschnitts-Attr: Layoutmodus und Höhe

Wenn der Abschnitt ausgewählt ist, werden unter Bearbeiten → Attr die Optionen für das Abschnittslayout angezeigt:

Steuerelement	Optionen	Funktion
Layout-Modus	Eingeschränkt (Standard), Feste Breite, Von Rand zu Rand	Wie sich der Abschnitt und seine innere Zeile zur Breite des Ansichtsbereichs verhalten. Von Rand zu Rand erstreckt sich über den gesamten Ansichtsbereich; auf Mobilgeräten werden Spalten weiterhin gestapelt.
Höhe	Auto, 50 % des Ansichtsfensters, 80 % des Ansichtsfensters, 100 % des Ansichtsfensters	Wie hoch der Abschnittsbereich im Verhältnis zum Browserfenster ist (bzw. zur Inhaltshöhe bei „Auto“).

Abschnittshintergrund (im selben Attr-Bedienfeld): Wählen Sie ein Hintergrundbild, Größe/Position und Overlay-Deckkraft aus. Die Farbe für die einheitliche Füllung bleibt auf der Registerkarte Stil – „Attr“ dupliziert keinen zweiten Farbwähler.

Beachten Sie: Bild und Überlagerung gelten für den Abschnittsbereich in voller Breite. Verengen Sie die Überschrift oder das Raster mit Zeile → Maximale Breite, nicht durch Beschneiden des Hintergrunds.

Festlegen der Inhaltsbreite (der rechte Schieberegler)

Ziel	Empfohlene Einstellung	Zu vermeiden
Breites Portfolio- oder Feature-Raster (~1280 px)	Zeile → Maximale Breite → 1280 / Voll	Riesiger horizontaler Abschnitts-Abstand
Schmaler Artikel oder Langtext (~768px)	Zeile → Maximale Breite → 960 oder kleinere Voreinstellung	Breite auf der Registerkarte „Stil“ des Abschnitts
Angenehmer Rand auf Smartphones	Abschnitts-Abstand (typischerweise 32–64px)	Verwendung von Abstand, um die maximale Desktop-Breite zu simulieren
Eigenständiger Block auf der Arbeitsfläche (Portfolio-Einbettung, Kontaktformular)	Stil → Breite (zentriert bei Festlegung eines festen Werts)	Erwartung eines Zeilen-Wrappers, der nicht vorhanden ist

Zeilen werden automatisch zentriert, wenn Sie die maximale Breite unter Attr festlegen. Dies ist die wichtigste Methode, um Seiteninhalte zu komprimieren oder zu erweitern.

Registerkarte „Stil“ vs. „Attr“ für das Layout

Steuerung	Bevorzugen Sie Attr, wenn…	Die Registerkarte Stil dient für…
Maximale Zeilenbreite	Immer (Zeilenlayout-Eigenschaften)	Nur seltene Überschreibungen
Abschnittslayout-Modus / Höhe	Immer (Abschnittslayout-Eigenschaften)	Nicht allein mit der Höhe unter „Stil“ simulieren
Abstand zwischen Zeilen / Abschnitten	Zeilen: nur Attr; Abschnitte: zuerst Attr	Einmalige Anpassungen an Nicht-Zeilen-Elementen
Blockbreite auf der Arbeitsfläche	Block hat keine Zeile (eigenständige Einbettung)	Feste Breite mit automatischer Zentrierung (z. B. 800px)
Einfarbige Hintergrundfarbe für Abschnitt/Block	—	Hintergrundfarbe und Designvorlagen
Hintergrundbild + Überlagerung für Abschnitt/CTA	Immer unter Attr	—
Typografie und andere Farben	Block-Eigenschaften, sofern verfügbar	Fein abgestimmte visuelle Überschreibungen

Wenn sowohl Attr als auch Style den Abstand in derselben Zeile festlegen, verwenden Sie nur Attr, um widersprüchliche Werte auf der Live-Seite zu vermeiden.

Abstand: verknüpft und unverknüpft

Unter Style → Spacing unterstützen Padding und Margin zwei Modi:

• Verknüpft (Verknüpfungssymbol aktiviert): Ein Wert gilt für alle vier Seiten – wie bei der CSS-Kurzschreibweise (padding: 32px).
• Unverknüpft (Verknüpfungssymbol aus): Legen Sie oben, rechts, unten und links unabhängig voneinander fest.

Die Schieberegler reichen bis zu 160px. Für größere oder asymmetrische Werte wechseln Sie in den ungebundenen Modus und geben Sie die Werte in die Zahlenfelder ein (zum Beispiel 200px oder 48px 24px über die Felder pro Seite).

Das richtige Element auswählen

Problem	Lösung
Die Zeile auf der Arbeitsfläche lässt sich nicht anklicken	Ebenen → Abschnitt erweitern → Zeile auswählen
Der Inhalt erscheint linksbündig mit leerem Platz auf der rechten Seite	Zeile → Max. Breite unter Eigenschaften festlegen, nicht nur Stil → Breite bei einem untergeordneten Block
Leiste zu hoch oder zu niedrig	Abschnitt → Attr → Höhe einstellen oder vertikalen Abstand / Spalte-Mindesthöhe anpassen – nicht die Abschnittbreite
Hintergrund scheint bei der Inhaltsbreite abgeschnitten zu sein	Der Hintergrund soll randlos bleiben; schränke stattdessen den Inhalt mit Zeile → Max. Breite ein
Portfolio-Einbettung bei benutzerdefinierter Breite nicht zentriert	Stil → Breite im Block (zentriert automatisch); Seite speichern bestätigen und Vorschau anzeigen

Gängige Seitenlayouts

Standard-Inhaltsseite

1. Abschnitt hinzufügen.
2. Darin: Zeile (die standardmäßige maximale Breite ist in der Regel ausreichend).
3. Fügen Sie 1 Spalte oder 2 Spalten hinzu.
4. Ziehen Sie Blöcke in die Spalten.

Seitenrand übergreifendes Abschnittband, begrenzter Haupttext

1. Wählen Sie den Abschnitt → Eigenschaften → Layout-Modus → Von Rand zu Rand (optional) und legen Sie die Höhe fest, wenn Sie ein hohes Band wünschen.
2. Fügen Sie dem Abschnitt ein Hintergrundbild oder eine einfarbige Farbe hinzu; behalten Sie die maximale Zeilenbreite für Überschriften und Schaltflächen bei.
3. Nächster Abschnitt: Begrenzt mit normaler maximaler Zeilenbreite für Fließtext oder Raster.

Einzelne Einbettung (ohne Zeile)

Einige Blöcke (z. B. Portfolio-Einbettung, Kontaktformular) können ohne Zeile direkt auf der Seite platziert werden. Verwenden Sie Stil → Breite, um sie zu begrenzen und zu zentrieren; nutzen Sie Attr für block-spezifische Optionen.

Nächste Schritte & Überprüfung

1. Öffne eine Entwurfsseite → Ebenen → überprüfe die Hierarchie Abschnitt → Zeile → Spalte.
2. Wählen Sie den Abschnitt aus → Attr → probieren Sie Eingeschränkt im Vergleich zu Von Rand zu Rand und eine % der Ansichtshöhe aus → zeigen Sie eine Vorschau für Desktop und Mobil an.
3. Wählen Sie die Zeile aus → Attr → ändern Sie die Maximale Breite → vergewissern Sie sich, dass der Hintergrund weiterhin die volle Breite einnimmt, während der Inhalt schmaler wird.
4. Fügen Sie horizontalen Abschnitt-Abstand nur als Randfreiraum hinzu – nicht, um eine maximale Breite zu simulieren.
5. Stellen Sie bei einem eigenständigen Block unter Stil → Breite den Wert auf 800px ein → vergewissern Sie sich, dass er nach dem Speichern der Seite zentriert ist.

Siehe auch: Seiteneditor-Seitenleiste und Symbolleiste · Referenz zu Editorblöcken und Layouts · Unterstützte Medienpräsentationsblöcke