Layouts

Der Seiten-Builder verwendet ein flexibles Layout-System, das dir erlaubt, Widgets sowohl vertikal als auch horizontal anzuordnen.

Grundprinzip

Standardmassig werden Widgets vertikal gestapelt - eines unter dem anderen. Fur mehrspaltige Layouts nutzt du das Row-System.

Layout	Beschreibung
Vertikal	Widgets untereinander (Standard)
Row	2-3 Widgets nebeneinander
Container	Widgets in Cards, Tabs, Accordions

---

Breiten-System

Jedes Widget hat eine einstellbare Breite. Das System bietet 6 Preset-Breiten mit intelligentem Snapping.

Breiten-Presets

Preset	Prozent	Anwendung
1/4	25%	Sehr schmale Elemente
1/3	33.33%	Drei-Spalten-Layout
1/2	50%	Zwei-Spalten-Layout
2/3	66.67%	Hauptinhalt neben Sidebar
3/4	75%	Breiter Inhalt
Full	100%	Volle Breite (Standard)

Smart Snapping

Wenn du die Breite eines Widgets anderst, springt der Wert automatisch zum nachsten Preset, sobald du dich ihm naherst.

Snap-Toleranz

Das Snapping greift innerhalb von 3 Prozentpunkten um jeden Preset. Ziehst du auf 48%, springt es automatisch auf 50%.

Breite andern

1. Wahle das Widget aus (tippen)
2. Offne die Einstellungen (doppeltippen oder Kontextmenu)
3. Gehe zum Tab “Layout”
4. Nutze den Breiten-Slider

Der Slider zeigt dir immer den aktuellen Wert und springt zu Presets.

---

Row-System

Das Row-System ermoglicht mehrspaltige Layouts. Eine Row gruppiert 2-3 Widgets horizontal.

Row erstellen

Methode 1: Kontextmenu

1. Fuge zwei Widgets hinzu
2. Halte das erste Widget gedruckt
3. Wahle “Neue Row erstellen” im Menu
4. Wahle das zweite Widget aus

Methode 2: Drag & Drop

1. Fuge zwei Widgets hinzu
2. Ziehe ein Widget neben ein anderes
3. Lass los wenn die Row-Vorschau erscheint

Row-Eigenschaften

Eigenschaft	Beschreibung
Widgets	2-3 Widgets pro Row
Breiten	Automatisch verteilt (anpassbar)
Reihenfolge	Widgets konnen innerhalb der Row verschoben werden

Breiten in Rows

Wenn du eine Row erstellst, werden die Breiten automatisch gleichmassig verteilt:

Widgets	Automatische Breite
2 Widgets	Je 50%
3 Widgets	Je 33.33%

Du kannst die Breiten manuell anpassen - die anderen Widgets in der Row passen sich automatisch an.

Widget zur Row hinzufugen

1. Ziehe ein Widget auf eine bestehende Row
2. Die Row zeigt einen Platzhalter
3. Lass los um das Widget einzufugen

Maximum 3 Widgets

Eine Row kann maximal 3 Widgets enthalten. Fur komplexere Layouts nutze verschachtelte Container.

Widget aus Row entfernen

1. Halte das Widget in der Row gedruckt
2. Wahle “Aus Row entfernen” im Kontextmenu
3. Das Widget wird zu einem normalen Widget

Sonderfall: Wenn nur noch 1 Widget in der Row verbleibt, wird die Row automatisch aufgelost.

---

Container-Layouts

Container-Widgets (Card, Tab Container, Accordion) ermoglichen verschachtelte Layouts.

Widgets in Container ziehen

1. Erstelle ein Container-Widget (z.B. Card)
2. Fuge ein neues Widget hinzu
3. Ziehe es auf den Container
4. Der Container zeigt “Hierher ziehen”
5. Lass los um einzufugen

Verschachtelungstiefe

Maximum 3 Ebenen

Du kannst Widgets bis zu 3 Ebenen tief verschachteln:

• Ebene 1: Seite
• Ebene 2: Container auf Seite
• Ebene 3: Container in Container

Beispiel-Layouts

Zwei Spalten

[  Seite 100%  ]
├── [Row]
│   ├── Text 50%
│   └── Bild 50%
└── Button 100%

Sidebar Layout

[  Seite 100%  ]
├── [Row]
│   ├── Card (Inhalt) 67%
│   └── Card (Sidebar) 33%
└── Footer 100%

Tab mit Inhalten

[  Seite 100%  ]
└── Tab Container 100%
    ├── Tab 1: [Text, Bild]
    ├── Tab 2: [Formular]
    └── Tab 3: [Video]

---

Ausrichtung

Widgets konnen innerhalb ihres Platzes ausgerichtet werden.

Horizontale Ausrichtung

Ausrichtung	Beschreibung
Links	Widget am linken Rand
Zentriert	Widget in der Mitte
Rechts	Widget am rechten Rand

Dies ist besonders nutzlich fur Widgets die nicht 100% Breite haben.

Ausrichtung andern

1. Wahle das Widget aus
2. Offne die Einstellungen
3. Im Tab “Layout” findest du die Ausrichtung
4. Wahle Links, Mitte oder Rechts

---

Seiteneinstellungen

Die gesamte Seite hat eigene Layout-Einstellungen.

Padding

Das Seiten-Padding definiert den Innenabstand zu den Randern:

Seite	Beschreibung
Oben	Abstand vom oberen Rand
Rechts	Abstand vom rechten Rand
Unten	Abstand vom unteren Rand
Links	Abstand vom linken Rand

Grid-Einstellungen

Fur komplexere Layouts kannst du ein Grid aktivieren:

Einstellung	Beschreibung
Layout-Typ	Vertikal oder Grid
Spalten	Anzahl der Spalten bei Grid
Spacing	Abstand zwischen Grid-Zellen

Grid vs. Row

Das Grid-Layout ist fur regelmassige Raster gedacht. Fur flexible Spaltenanordnungen ist das Row-System flexibler.

---

Abstande

Widgets haben zwei Arten von Abstanden:

Margin (Aussenabstand)

Der Abstand ausserhalb des Widgets zu anderen Widgets.

[Widget A]
    ↕ Margin von A (unten)
    ↕ Margin von B (oben)
[Widget B]

Padding (Innenabstand)

Der Abstand innerhalb des Widgets zwischen Rand und Inhalt.

┌──────────────────┐
│     ← Padding    │
│  ┌────────────┐  │
│  │   Inhalt   │  │
│  └────────────┘  │
│     Padding →    │
└──────────────────┘

Abstande einstellen

Beide Abstande findest du im Tab “Layout” der Widget-Einstellungen.

Der Box Spacing Editor zeigt eine visuelle Darstellung:

       ↑ Top
   ┌─────────┐
←  │ Widget  │  →
   └─────────┘
       ↓ Bottom

Du kannst jeden Wert einzeln anpassen oder alle gleichzeitig.

---

Tipps

Konsistente Breiten

Nutze die Presets fur konsistente Layouts. 50%/50% oder 33%/67% sehen professioneller aus als 48%/52%.

Mobile First

Denke daran, dass die App auf verschiedenen Bildschirmgrossen lauft. Teste dein Layout in der Vorschau.

Padding fur Lesbarkeit

Gib deinen Textinhalten ausreichend Padding (8-16px), damit sie nicht am Rand kleben.

Container nutzen

Fur komplexe Layouts: Gruppiere zusammengehorige Widgets in einer Card. Das macht das Layout ubersichtlicher.

Nicht zu viele Ebenen

Mehr als 2 Verschachtelungsebenen werden schnell unubersichtlich. Halte dein Layout flach.

---

Haufige Fragen

Warum kann ich kein viertes Widget in die Row ziehen?

Rows unterstutzen maximal 3 Widgets. Fur mehr Spalten nutze:

• Zwei Rows untereinander
• Ein Grid-Layout in den Seiteneinstellungen
• Verschachtelte Cards

Wie erstelle ich ein 3-Spalten-Layout?

1. Fuge 3 Widgets hinzu
2. Erstelle eine Row mit den ersten beiden
3. Fuge das dritte Widget zur Row hinzu
4. Jedes Widget hat automatisch 33.33% Breite

Kann ich die Breiten in einer Row ungleich verteilen?

Ja! Passe die Breite einzelner Widgets uber die Einstellungen an. Die anderen Widgets passen sich automatisch an.

Was passiert wenn ich eine Row losche?

Beim Loschen einer Row werden alle enthaltenen Widgets geloscht. Entferne zuerst die Widgets aus der Row, wenn du sie behalten mochtest.