Rows, Columns und responsives Layout
Kontrolliere Row-Struktur, Spaltenbreiten, Abstaende (Padding und Margin) und Flex-Alignment — alles pro Breakpoint, damit sich dein Layout jeder Bildschirmgroesse anpasst.
Voraussetzung: Deine Seite hat mindestens eine Row im Pagebuilder.
Rows hinzufuegen oder entfernen
- Row hinzufuegen: Klick auf das + am unteren Seitenende oder auf Section hinzufügen in der Wurzel des Struktur-Baums.
- Row entfernen: Waehl die Row im Struktur-Baum, Rechtsklick, Löschen. Einmal bestaetigen.
- Umsortieren: Zieh eine Row im Struktur-Baum an eine neue Position. Rows stapeln sich immer vertikal.
Spaltenbreiten setzen
Eine Row hat 12 Breiten-Einheiten. Columns teilen diese auf — 6 + 6 ist 50/50, 4 + 8 ist ein Drittel zu zwei Dritteln, 3 + 3 + 3 + 3 sind vier gleiche Columns.
Waehl eine Column im Struktur-Baum und setze im Properties-Panel den Slider Breite oder das numerische Feld Grid Units.
Breiten pro Breakpoint
Jede Column hat vier Breiten-Einstellungen — Desktop, Laptop, Tablet, Mobile. Setz sie einzeln, damit Columns auf Mobile in voller Breite stapeln und auf Desktop 50/50 teilen.
Abstaende setzen (Padding und Margin)
Rows, Columns und Widgets haben jeweils eigene Abstaende. Waehl das Element, oeffne den Tab Einstellungen, scroll zu Abstände.
- Padding — Abstand innerhalb des Elements, zwischen Hintergrund und Inhalt.
- Margin — Abstand ausserhalb des Elements, zwischen ihm und seinen Nachbarn.
Klick auf eine der vier Seiten (oben, rechts, unten, links) und gib einen Wert in Pixel ein. Die Werte gelten fuer den aktuell gewaehlten Breakpoint.
Gleicher Wert auf allen Seiten
Klick das Kettenglied-Icon in der Mitte der Box, um alle vier Seiten zu koppeln — ein Wert aktualisiert dann alle vier.
Flex-Alignment (Rows)
Rows sind CSS-Flex-Container. Im Tab Einstellungen der Row steuert der Abschnitt Flex Alignment, wie sich Columns anordnen.
| Einstellung | Wirkung |
|---|---|
| align-items | Vertikale Ausrichtung der Columns innerhalb der Row (top, center, bottom, stretch). |
| justify-content | Horizontale Ausrichtung, wenn Columns nicht die vollen 12 Einheiten fuellen (start, center, end, space-between, space-around). |
Beide Einstellungen sind pro Breakpoint.
Breakpoints
Der Pagebuilder rendert bei vier Breakpoints:
| Breakpoint | Breite | Icon |
|---|---|---|
| Desktop | > 1200 px | Desktop-Bildschirm |
| Laptop | 992 – 1200 px | Laptop |
| Tablet | 768 – 991 px | Tablet |
| Mobile | < 768 px | Smartphone |
Die meisten Einstellungen (Spaltenbreite, Abstand, Sichtbarkeit, Flex) haben unabhaengige Werte pro Breakpoint. Wechsle den Breakpoint oben, um zu aendern, was du gerade editierst.
Breakpoints vererben nach unten
Eine Einstellung, die du auf Mobile leer laesst, erbt von Tablet, dann Laptop, dann Desktop. Setz immer zuerst Desktop und ueberschreib nur dort nach unten, wo es noetig ist.
Elemente pro Breakpoint verstecken
Rows, Columns und Widgets haben eine Sichtbarkeit-Checkbox-Gruppe — eine Checkbox pro Breakpoint. Haek sie weg, um das Element auf dieser Bildschirmgroesse zu verbergen.
Das Element bleibt im Struktur-Baum (mit durchgestrichenem Augen-Icon), wird aber auf der Live-Seite bei diesem Breakpoint nicht gerendert.
Columns in Columns verschachteln
Brauchst du ein Sub-Layout innerhalb einer Column? Setz ein Columns-Widget ein — es verschachtelt eine neue Row mit eigenen Columns innerhalb der Parent-Column. Praktisch fuer Karten-Raster in einer Sidebar oder zweispaltige Galerien in einer schmalen Inhaltsspalte.
Siehe auch
- Widgets platzieren und konfigurieren — Inhalte innerhalb von Columns.
- Entwuerfe, Veroeffentlichen, Versionen — Aenderungen veroeffentlichen.
- Seiten & Pagebuilder — Uebersicht
- Design-Tokens — globale Farben, Schriften, Abstands-Skalen.