Ein verschachteltes Layout hinzufügen.
Sie können eine Zeile in eine Spalte setzen, um diese Spalte erneut zu teilen, etwa zwei Icons nebeneinander über einer Überschrift. Nutzen Sie das, wenn eine Spalte ein feineres Raster braucht als die Zeile darum. Das Beispiel fügt eine Zeile mit zwei Icons in die mittlere Spalte einer dreispaltigen Zeile ein. Für Ihre erste Zeile beginnen Sie mit Zeilen und Spalten.
Ein verschachteltes Layout hinzufügen
- Fügen Sie einen Abschnitt mit einer Zeile und Spalten hinzu.
- Fahren Sie über eine Spalte und klicken Sie auf + in ihrer Column-Kontrollleiste.
- Wählen Sie im Element-Picker Row aus dem Tab Layout.
- Die verschachtelte Zeile erscheint in der Spalte mit eigenen Spalten.
- Fügen Sie den verschachtelten Spalten wie gewohnt Elemente hinzu, zum Beispiel ein Icon in jeder.
- Klicken Sie in der Symbolleiste auf Save, um die Seite zu speichern.
Neue Elemente landen oben in ihrer Spalte, sodass die verschachtelte Zeile über dem Text der Spalte sitzt.
Was Sie sehen
Stift und Stern sitzen nebeneinander oben in der mittleren Spalte, über der Design-Überschrift. Die äußeren Spalten sind unverändert. Im Editor hat die verschachtelte Zeile eigene Row- und Column-Kontrollleisten, innerhalb derer der äußeren Zeile.
Section
Row (1/3 + 1/3 + 1/3)
Column
Text: Discovery
Column
Row (nested, 1/2 + 1/2)
Column
Icon: pencil
Column
Icon: star
Text: Design
Column
Text: Delivery
Ihr verschachteltes Layout einrichten
Eine verschachtelte Zeile hat dasselbe Grid-Icon und dieselben Einstellungen wie jede Zeile; siehe Zeilen und Spalten. Ihre Breiten sind Anteile der übergeordneten Spalte, nicht der Seite. Eine halb breite Spalte mit einer verschachtelten Zeile aus zwei Hälften ergibt zwei viertelbreite Bereiche.
Auf Bildschirmen schmaler als 768 Pixel stapeln sich verschachtelte Spalten genau wie die äußeren. Geben Sie der verschachtelten Zeile mit Add screen size für Telefone ein eigenes Layout, wenn die Icons nebeneinander bleiben sollen.
Maximale Verschachtelungstiefe
Zeilen verschachteln sich drei Ebenen tief: eine Zeile, eine Zeile in einer ihrer Spalten und eine weitere Zeile darin. Eine vierte Ebene wird abgelehnt. Dasselbe Limit gilt für jeden Containertyp für sich, etwa Tabs in Tabs. Ein Typ zählt nie zum Limit eines anderen Typs.
Zwei Ebenen decken die meisten Layouts ab. Jede weitere Ebene fügt Kontrollleisten hinzu, an denen vorbei Sie zielen müssen, und verengt den Platz für Inhalte.
Häufige Verschachtelungsmuster
| Muster | So wird es gebaut |
|---|---|
| Feature-Raster | Eine Zeile mit drei Spalten, jede mit einer verschachtelten Zeile: ein Icon neben seinem Text |
| Seitenleisten-Blöcke | Eine 2/3 + 1/3-Zeile, deren schmale Spalte verschachtelte Zeilen enthält, eine pro Block |
| Teammitglieder | Eine Zeile mit zwei Spalten, jede mit einer verschachtelten 1/3 + 2/3-Zeile: ein Porträt neben der Bio |
Wenn Sie es nicht sehen
- Eine Warnung besagt, dass Sie Zeilen nur 3 Ebenen tief verschachteln können. Die Spalte sitzt bereits in zwei verschachtelten Zeilen, daher „Element cannot be added“. Fügen Sie die Zeile in eine Spalte eine Ebene höher ein oder verwenden Sie ein Preset mit mehr Spalten in der äußeren Zeile.
- Die verschachtelte Zeile sitzt über dem Text statt darunter. Neue Elemente landen oben in ihrer Spalte. Öffnen Sie More in der Kontrollleiste der verschachtelten Zeile und wählen Sie Move Down.
- Die Icons stapeln sich auf einem Telefon. Verschachtelte Spalten stapeln sich unter 768 Pixeln wie alle Spalten. Klicken Sie auf das Grid-Icon der verschachtelten Zeile, dann auf Add screen size, und wählen Sie 1/2 + 1/2 für Extra small (< 576px).
Wie geht es weiter?
- Positioned layers: Elemente so überlappen, wie es das Grid nicht kann.
- Zeilen und Spalten: Spalten-Presets und ein Layout pro Bildschirmgröße.
- Tabs: Inhaltspanele an einer Stelle stapeln statt nebeneinander.