Editor X: Über die Struktur deiner Seite (Parent-, Child- und Geschwisterelemente)
4 Min. Lesezeit
Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren
Wenn du Seiten auf deiner Website strukturierst, verschachtelst du im Wesentlichen Elemente innerhalb von Containern, zum Beispiel, indem du Text innerhalb einer Container-Box platzierst. Dadurch wird eine Beziehung zwischen den Elementen und ihrem übergeordneten Container hergestellt, die von modernen HTML- und CSS-Konzepten abgeleitet ist.
In diesem Artikel erfährst du mehr über diese Beziehung und wie du sie nutzen kannst, um eine responsive Website zu erstellen:
Parent-Child-Beziehungen zwischen Elementen
Wenn ein Element innerhalb eines Containers platziert wird (z. B. Abschnitt, Container-Box, Layouter usw.), wird dadurch das Element angehängt und eine Parent-Child-Beziehung hergestellt. Wenn du zum Beispiel dein Logo an die Kopfzeile anhängst, wird es automatisch an den nächsten Rändern angedockt und wird zum „Child“ der Kopfzeile.
Ähnlich wie bei CSS beeinflusst das Design (d. h. Größe, Position, Abstand usw.) eines übergeordneten Containers seine untergeordneten Elemente. Wenn du z. B. einem Container einen Abstand hinzufügst, werden die Elemente darin kleiner, um die Änderung zu berücksichtigen.
Hinweis:
Wenn du Elemente stapelst , um ihre vertikale Anordnung zu steuern, werden sie in einem Flex-Container platziert, der als übergeordnetes Element fungiert.
Tipp:
Klicke hier , um mehr über die Größeneinstellung für Elemente zu erfahren.
Deine Seitenstruktur erstellen
Wenn du das Design deiner Website planst, ist es wichtig, mit einer geschichteten Struktur zu beginnen. Wir empfehlen, zuerst die übergeordneten Container zu erstellen und dann untergeordnete Elemente durch Ziehen und Ablegen an der richtigen Stelle hinzuzufügen.
Die Ebenen deiner Seite
Im Editor X spiegelt sich die von dir erstellte Struktur im Ebenen-Panel wider. Die folgenden Ebenen bilden die Struktur deiner Website:
- Seite: Vom Ebenen-Panel aus kannst du die Hintergrundfarbe der Seite bearbeiten und Füllung hinzufügen. Klicke neben Seite auf das Symbol für Mehr anzeigen
, um diese Einstellungen zu steuern. - Abschnitte: Jede Seite besteht aus mindestens einem Abschnitt. Du kannst so viele vertikale und horizontale Abschnitte erstellen, wie du benötigst. Du kannst auch Master-Abschnitte erstellen, die auf mehreren Seiten angezeigt werden.
- Container: Verschachtele Elemente innerhalb von Containern, um eine responsive Struktur zu erstellen und sicherzustellen, dass sie an ihrem Platz bleiben. Füge eine Container-Box oder intelligente Layout-Tools wie Stapel , Layouter und Repeater hinzu.
- Elemente: Dies sind die Elemente, die du über das Hinzufügen-Panel hinzufügst (z. B. Text, Button, Formulare). Du kannst einzelne Elemente andocken oder mehrere Elemente stapeln , um sicherzustellen, dass sie in jeder Bildschirmgröße die gleiche Reihenfolge und dem gleichen Abstand haben.
Wichtig:
Auch wenn Gitter nicht Teil des hierarchischen Modells sind, können sie dennoch die Größe und Positionierung deiner Elemente beeinflussen. Mehr erfahren
Re-Parenting von Elementen
Wenn du ein untergeordnetes Element in einen neuen übergeordneten Container verschiebst, wird dies als „Re-Parenting“ bezeichnet. Um für ein Element in eine neue Parent-Child-Beziehung herzustellen, ziehst du es einfach in das neue übergeordnete Element.
Die Position eines Elements in der Hierarchie finden
Jeder Abschnitt, jeder Container und jedes Element auf deiner Seite hat Breadcrumbs, die die Position in der Hierarchie anzeigen. Du kannst ganz einfach zwischen den Ebenen deiner Seite navigieren, indem du auf die Breadcrumbs klickst.
Gleichgeordnete Elemente (Geschwister) strukturieren
Geschwisterelemente sind Elemente, die dasselbe direkte übergeordnete Element (Parent) haben. Zum Beispiel sind der Text und der Button in diesem Container Geschwister, da der Container das übergeordnete Element ist:
Wenn sich deine Geschwisterelemente in Flexbox-Containern befinden (z. B. Stapel , Layouter , Repeater ), können sie sich gegenseitig in Größe und Position beeinflussen. Die Gestaltung dieser Beziehung könnte für die Erstellung einer responsiven Website nützlich sein, da du verhindern kannst, dass sich Elemente in kleineren Bildschirmgrößen überlagern.
Im Beispiel unten siehst du die Abstände, die automatisch zwischen gleichgeordneten Elementen erstellt werden:
Strukturelle Änderungen über Breakpoints
Im Ebenen-Panel kannst du die Beziehung (z. B. Hierarchie) zwischen Elementen, Containern und Abschnitten auf deiner Seite sehen und sie bei Bedarf verschieben.
Die Seitenhierarchie ist Teil der HTML-Struktur deiner Website, d. h. Änderungen, die du daran vornimmst, werden an allen Breakpoints berücksichtigt. Wenn du z. B. ein übergeordnetes und ein untergeordnetes Element (z. B. Text und seinen Container) trennst, gilt diese Trennung für alle Breakpoints.
Tipp:
Um mehr über das Design über Breakpoints zu erfahren, klicke hier .
War das hilfreich?
|