Layouts
Der Seiten-Builder verwendet ein flexibles Layout-System, das dir erlaubt, Widgets sowohl vertikal als auch horizontal anzuordnen.
Grundprinzip
Section titled “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
Section titled “Breiten-System”Jedes Widget hat eine einstellbare Breite. Das System bietet 6 Preset-Breiten mit intelligentem Snapping.
Breiten-Presets
Section titled “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
Section titled “Smart Snapping”Wenn du die Breite eines Widgets anderst, springt der Wert automatisch zum nachsten Preset, sobald du dich ihm naherst.
Breite andern
Section titled “Breite andern”- Wahle das Widget aus (tippen)
- Offne die Einstellungen (doppeltippen oder Kontextmenu)
- Gehe zum Tab “Layout”
- Nutze den Breiten-Slider
Der Slider zeigt dir immer den aktuellen Wert und springt zu Presets.
Row-System
Section titled “Row-System”Das Row-System ermoglicht mehrspaltige Layouts. Eine Row gruppiert 2-3 Widgets horizontal.
Row erstellen
Section titled “Row erstellen”- Fuge zwei Widgets hinzu
- Halte das erste Widget gedruckt
- Wahle “Neue Row erstellen” im Menu
- Wahle das zweite Widget aus
- Fuge zwei Widgets hinzu
- Ziehe ein Widget neben ein anderes
- Lass los wenn die Row-Vorschau erscheint
Row-Eigenschaften
Section titled “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
Section titled “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
Section titled “Widget zur Row hinzufugen”- Ziehe ein Widget auf eine bestehende Row
- Die Row zeigt einen Platzhalter
- Lass los um das Widget einzufugen
Widget aus Row entfernen
Section titled “Widget aus Row entfernen”- Halte das Widget in der Row gedruckt
- Wahle “Aus Row entfernen” im Kontextmenu
- Das Widget wird zu einem normalen Widget
Sonderfall: Wenn nur noch 1 Widget in der Row verbleibt, wird die Row automatisch aufgelost.
Container-Layouts
Section titled “Container-Layouts”Container-Widgets (Card, Tab Container, Accordion) ermoglichen verschachtelte Layouts.
Widgets in Container ziehen
Section titled “Widgets in Container ziehen”- Erstelle ein Container-Widget (z.B. Card)
- Fuge ein neues Widget hinzu
- Ziehe es auf den Container
- Der Container zeigt “Hierher ziehen”
- Lass los um einzufugen
Verschachtelungstiefe
Section titled “Verschachtelungstiefe”Beispiel-Layouts
Section titled “Beispiel-Layouts”[ Seite 100% ]├── [Row]│ ├── Text 50%│ └── Bild 50%└── Button 100%[ Seite 100% ]├── [Row]│ ├── Card (Inhalt) 67%│ └── Card (Sidebar) 33%└── Footer 100%[ Seite 100% ]└── Tab Container 100% ├── Tab 1: [Text, Bild] ├── Tab 2: [Formular] └── Tab 3: [Video]Ausrichtung
Section titled “Ausrichtung”Widgets konnen innerhalb ihres Platzes ausgerichtet werden.
Horizontale Ausrichtung
Section titled “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
Section titled “Ausrichtung andern”- Wahle das Widget aus
- Offne die Einstellungen
- Im Tab “Layout” findest du die Ausrichtung
- Wahle Links, Mitte oder Rechts
Seiteneinstellungen
Section titled “Seiteneinstellungen”Die gesamte Seite hat eigene Layout-Einstellungen.
Padding
Section titled “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
Section titled “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 |
Abstande
Section titled “Abstande”Widgets haben zwei Arten von Abstanden:
Margin (Aussenabstand)
Section titled “Margin (Aussenabstand)”Der Abstand ausserhalb des Widgets zu anderen Widgets.
[Widget A] ↕ Margin von A (unten) ↕ Margin von B (oben)[Widget B]Padding (Innenabstand)
Section titled “Padding (Innenabstand)”Der Abstand innerhalb des Widgets zwischen Rand und Inhalt.
┌──────────────────┐│ ← Padding ││ ┌────────────┐ ││ │ Inhalt │ ││ └────────────┘ ││ Padding → │└──────────────────┘Abstande einstellen
Section titled “Abstande einstellen”Beide Abstande findest du im Tab “Layout” der Widget-Einstellungen.
Der Box Spacing Editor zeigt eine visuelle Darstellung:
↑ Top ┌─────────┐← │ Widget │ → └─────────┘ ↓ BottomDu kannst jeden Wert einzeln anpassen oder alle gleichzeitig.
Haufige Fragen
Section titled “Haufige Fragen”Warum kann ich kein viertes Widget in die Row ziehen?
Section titled “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?
Section titled “Wie erstelle ich ein 3-Spalten-Layout?”- Fuge 3 Widgets hinzu
- Erstelle eine Row mit den ersten beiden
- Fuge das dritte Widget zur Row hinzu
- Jedes Widget hat automatisch 33.33% Breite
Kann ich die Breiten in einer Row ungleich verteilen?
Section titled “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?
Section titled “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.