Layout-Blöcke
Vier Blöcke ordnen andere Blöcke an. Sie sind das Gerüst jeder Seite, die über eine reine Textfolge hinausgeht.
| Block | Zweck |
|---|---|
| Horizontales Layout | Blocks nebeneinander anordnen |
| Vertikales Layout | Blocks untereinander anordnen |
| Tab-Layout | Unterseiten als Tabs anzeigen |
| Stepper-Layout | Unterseiten als Schritte anzeigen |
Im Strukturmodus arbeiten
Sobald Sie Layouts verschachteln, ist im normalen Editor schwer zu erkennen, welcher Block in welchem liegt. Blenden Sie über Strukturmodus anzeigen die Seitenstruktur ein. → Seite erstellen
Horizontales und vertikales Layout
Beide funktionieren gleich, nur in unterschiedlicher Richtung.
Anordnung
Unter Anordnung stellen Sie ein:
| Einstellung | Auswahl |
|---|---|
| Richtung | Nebeneinander / Untereinander |
| Ausrichtung | Start, Center, End, Oben, Unten |
| Verteilung | Abstand dazwischen, Strecken, Wrap Content |
„Wrap Content" für Mobilgeräte
Ohne diese Einstellung bleiben nebeneinanderliegende Blöcke auch auf schmalen Bildschirmen nebeneinander und werden gequetscht. Mit Wrap Content rutschen sie bei zu wenig Platz untereinander.
Prüfen Sie das Ergebnis in der Portal-Vorschau unter Smartphone.
Aussehen
Zusätzlich verfügbar: Hintergrundfarbe, Border radius, Breite und Höhe.
Karten bauen
Ein vertikales Layout mit Hintergrundfarbe und Border radius ergibt eine Karte. Mehrere davon in einem horizontalen Layout ergeben eine Kartenzeile — die übliche Grundlage für Dashboards.
Tab-Layout
Zeigt Unterseiten als Reiter.
| Aktion | Beschriftung |
|---|---|
| Seite anlegen | Seite hinzufügen |
| Seite entfernen | Ausgewählte Seite löschen |
| Reihenfolge ändern | Nach links verschieben / Nach rechts verschieben |
| Farbe | Tab Farbe |
Ohne Unterseiten erscheint Keine Seiten mit dem Hinweis Fügen Sie Seiten hinzu, um sie als Tabs zu sehen.
Enthält ein Tab unvollständige Pflichtfelder, meldet der Editor Dieser Tab enthält Validierungsfehler.
Wofür Tabs taugen
Für Bereiche, die unabhängig voneinander sind und in beliebiger Reihenfolge angesehen werden — „Übersicht", „Details", „Dokumente".
Für einen Ablauf mit Reihenfolge nehmen Sie stattdessen das Stepper-Layout.
Stepper-Layout
Zeigt Unterseiten als aufeinanderfolgende Schritte — für geführte Abläufe.
| Aktion | Beschriftung |
|---|---|
| Schritt anlegen | Schritt hinzufügen |
| Schritt entfernen | Ausgewählten Schritt löschen |
| Reihenfolge ändern | Nach oben verschieben / Nach unten verschieben |
Ohne Schritte: Keine Schritte mit dem Hinweis Fügen Sie Schritte hinzu, um sie im Stepper zu sehen.
Besucher navigieren mit Zurück und Weiter.
Zwei Einstellungen
| Einstellung | Beschreibung in der Oberfläche |
|---|---|
| Linear | Vorherige Schritte müssen zuerst abgeschlossen werden |
| Vertikal | Schritte im vertikalen Modus anzeigen |
Linear für Prozesse, nicht für Formulare
Linear erzwingt die Reihenfolge — sinnvoll bei Anträgen, Onboarding und allem, wo ein späterer Schritt auf einem früheren aufbaut.
Ohne Linear können Besucher springen. Das ist angenehmer, wenn die Schritte nur der Gliederung dienen.
Unvollständige Pflichtfelder melden Dieser Schritt enthält Validierungsfehler.
Welches Layout wofür
| Ziel | Layout |
|---|---|
| Kennzahlen nebeneinander | Horizontales Layout mit Wrap Content |
| Karte mit Rahmen und Farbe | Vertikales Layout mit Hintergrundfarbe |
| Mehrere unabhängige Bereiche | Tab-Layout |
| Geführter Ablauf mit Reihenfolge | Stepper-Layout, Linear |
| Gliederung ohne Zwang | Stepper-Layout ohne Linear |
| Lange Textseite | keine Layouts, nur Überschriften |
Beispiel: Dashboard-Aufbau
Vertikales Layout
├── Überschrift 1 „Vertrieb"
├── Horizontales Layout (Wrap Content aktiv)
│ ├── Zähler offene Anfragen
│ ├── Summenkarte Auftragswert
│ └── Donut-Diagramm nach Status
└── Grid Ansicht Detailtabelle