Studio Editor: Über die Struktur einer Seite (Parent-, Child- und Geschwisterelemente)
4 min
Wenn du Website-Seiten strukturierst, verschachtelst du Elemente innerhalb von Abschnitten und/oder Containern und Layout-Tools. Wenn du zum Beispiel Text in einer Container-Box platzierst, wird eine Beziehung zwischen dem Text und dem Container hergestellt, die von modernen HTML- und CSS-Konzepten stammt.
In diesem Artikel erfährst du mehr über die Seitenstruktur, einschließlich der Parent-Child-Beziehung zwischen Elementen und Seitenebenen.
Parent-Child-Beziehungen zwischen Elementen
Wenn du ein Element in einem Container oder Layout-Tool platzierst, wird es an dieses Tool oder diesen Container angehängt. Dadurch wird eine Parent-Child-Beziehung hergestellt. Wenn du beispielsweise ein Logo zu einer Kopfzeile hinzufügst, wird das Logo zum „Child“ und die Kopfzeile zum „Parent“.
Ähnlich wie bei CSS beeinflusst das Design (z. B. Größe, Position, Abstand usw.) eines übergeordneten Containers seine untergeordneten Elemente. Wenn du zum Beispiel Abstände zu einem Container hinzufügst, werden die Elemente darin verkleinert, um die Änderung wiederzugeben. Mehr über die Größenanpassung von Elementen erfahren
Gut zu wissen:
- Neue Elemente, die du hinzufügst, werden automatisch oben und links/rechts an das Parent-Element angedockt. Du kannst das automatische Andocken deaktivieren, um die Position des Child-Elements manuell anzupassen.
- Wenn du Elemente stapelst werden sie in einer Flexbox platziert, die als übergeordnetes Element dient.
Die Struktur einer Seite erstellen
Wenn du das Design einer Website planst, ist es wichtig, zunächst eine Ebenenstruktur zu schaffen. Wir empfehlen, zuerst die Parent-Container zu erstellen und dann Child-Elemente hinzuzufügen, indem du sie per Drag-and-Drop an die richtige Stelle ziehst.
Ebenen auf einer Seite
Im Studio Editor wird die von dir erstellte Struktur im Ebenen-Panel angezeigt. Die folgenden Ebenen bilden die Struktur der Website:
- Seite: Im Ebenen-Panel kannst du die Hintergrundfarbe der Seite bearbeiten und Abstände hinzufügen. Klicke neben dem Seitennamen auf das Symbol für Weitere Aktionen , um diese Einstellungen zu ändern.
- Abschnitte: Jede Seite besteht aus mindestens einem Abschnitt, und du kannst so viele erstellen, wie dein Kunde benötigt. Die meisten Abschnitte enthalten Layout-Tools und Container (z. B. Zellen, Stapel usw.)
- Container und Layout-Tools: Du kannst Elemente innerhalb von Containern verschachteln, um ganz einfach eine responsive Struktur zu erstellen und sicherzustellen, dass sie an ihrem Platz bleiben. Füge Container oder Layout-Tools wie Repeater und Flexboxen hinzu.
- Elemente: Dies sind die Elemente, die du über das „Elemente hinzufügen“-Panel hinzufügst (z. B. Text, Buttons, Medien usw.). Du kannst einzelne Elemente andocken oder mehrere Elemente stapeln, um sicherzustellen, dass sie in jeder Bildschirmgröße die gleiche Reihenfolge und den gleichen Abstand haben.
, um diese Einstellungen zu ändern.
Re-Parenting von Elementen
Das Verschieben eines Child-Elements in ein neues Parent-Element wird als „Re-Parenting“ bezeichnet. Um ein Element neu zu unterordnen, ziehe es einfach per Drag-and-Drop in das neue übergeordnete Element.
Den Platz eines Elements in der Hierarchie finden
Jeder Abschnitt, Container und jedes Element auf einer Seite hat Breadcrumbs, die seine Position in der Hierarchie anzeigen. Du kannst ganz einfach zwischen diesen Ebenen navigieren, indem du auf die Breadcrumbs auf der Arbeitsfläche klickst.
Gleichgeordnete Elemente (Geschwister) strukturieren
Gleichgeordnete Elemente sind Elemente, die dasselbe direkte Parent-Element teilen. Zum Beispiel sind der Text und die Vektorgrafik im folgenden Bild Geschwister, wobei der Container das übergeordnete Element ist:
Wenn sich gleichgeordnete Elemente in bestimmten Layout-Tools befinden (z. B. Stapel, Repeater usw.), können sie sich gegenseitig in der Größe und Position beeinflussen. Die Gestaltung dieser Beziehung kann bei der Erstellung einer responsiven Website nützlich sein, da du verhindern kannst, dass sich Elemente bei kleineren Bildschirmgrößen überlagern.
Im Beispiel unten siehst du die Abstände, die automatisch zwischen gleichgeordneten Elementen erstellt werden:
Strukturelle Änderungen über Breakpoints hinweg
Das Ebenen-Panel zeigt dir die Hierarchie der Inhalte einer Seite (Abschnitte, Container/Layout-Tools und Elemente) und ermöglicht es dir, sie nach Bedarf anzupassen.
Die Seitenhierarchie ist Teil der HTML-Struktur der Website, das heißt Änderungen, die du daran vornimmst, werden auf alle Breakpoints angewendet. Wenn du zum Beispiel ein übergeordnetes und ein untergeordnetes Element trennst (z. B. Text und dessen Container), gilt diese Trennung für alle Breakpoints. Über Breakpoints hinweg designen