Studio Editor: Elemente positionieren
6 Min. Lesezeit
In einer sich ständig verändernden Welt von Geräten ist es wichtig, die Position deiner Elemente zu steuern, damit sie auf verschiedenen Bildschirmgrößen genau so aussehen, wie du es wünschst. Im Studio Editor werden Elemente automatisch angedockt, um dies sicherzustellen.
Dies gibt dir die Freiheit, Elemente zu verschieben, ohne dich um die Positionierung über Breakpoints hinweg kümmern zu müssen. Du kannst die Position, das Andocken und die Ränder jedoch jederzeit im Inspektor-Panel selbst festlegen.
In diesem Artikel erfährst du mehr über folgende Themen:
Elemente auf der Arbeitsfläche positionieren
Per Drag-and-Drop kannst du die Position deines Elements direkt auf der Arbeitsfläche festlegen, separat für jeden Breakpoint. So kannst du sicherstellen, dass sich das Element wirklich auf jedem Bildschirm an der richtigen Stelle befindet.
Solange das Element innerhalb desselben Parents bleibt (z. B. Abschnitt, Zelle), kannst du es verschieben, ohne dass es sich auf andere Breakpoints auswirkt. Wenn du ein Element in ein anderes Parent verschiebst (es vom Parent löst), wird dies auf alle Breakpoints angewendet.
X- und Y-Koordinaten im Inspektor-Panel
Du kannst die X- und Y-Koordinaten deines Elements überprüfen, um seine genaue Position auf der aktuellen Größe der Arbeitsfläche zu sehen.
- X: Die horizontale Ebene, vom linken Rand zum rechten Rand des übergeordneten Elements (z. B. Abschnitt, Container, Stapel).
- Y: Die vertikale Ebene vom oberen bis zum unteren Rand des übergeordneten Elements.
Im folgenden Beispiel kannst du sehen, wie der px*-Wert negativ wird, wenn wir das Text-Element aus seinem übergeordneten Element, der Zelle, heraus verschieben.
Was ist px*?
px* ist eine Maßeinheit im Studio Editor und zeigt dir die „Pixel auf der Arbeitsfläche“. Der px*-Wert, den du siehst, ist das Pixel-Äquivalent, das der Größe deiner aktuellen Arbeitsfläche entspricht. Wechsle zu einem anderen Breakpoint, um zu sehen, wie sich der px*-Wert automatisch ändert.
Automatisches Andocken
Wenn du ein neues Element hinzufügst, wird es automatisch angedockt:
- An den oberen Rand des übergeordneten Elements (z. B. Abschnitt, Container, Stapel)
- An den linken oder rechten Rand des übergeordneten Elements, je nachdem, welcher am nächsten liegt
Das automatische Andocken stellt sicher, dass das Element auf allen Bildschirmen und Geräten an seinem Platz bleibt. Du kannst Elemente frei verschieben und die Andockpunkte anpassen — du musst nicht erneut andocken.
Die Andock-Position wird durch die gepunkteten Linien zum Element und die Andock-Punkte im Inspektor-Panel (unter Position) angegeben. Im folgenden Beispiel wird das Textelement automatisch am oberen und rechten Rand der Zelle angedockt.
Tipp:
Standardmäßig ist das Kontrollkästchen Element dockt autom. an aktiviert. Du kannst die Auswahl aufheben und das Andocken manuell anpassen.
Das Andocken von Elementen manuell anpassen
Du kannst das automatische Andocken außer Kraft setzen und manuell im Inspektor einrichten. Dies ist zum Beispiel nützlich, wenn du ein Element unten statt oben andocken möchtest.
Docke ein Element an einer beliebigen Seite an — oben, unten, links, rechts oder sogar in der Mitte des Abschnitts, Containers oder der Zelle, in der es sich befindet.
Um ein Element manuell anzudocken:
- Wähle das entsprechende Element aus.
- Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen
. - Scrolle nach unten zu Position.
- Klicke auf die entsprechenden Andock-Punkte (oben, unten, rechts oder links). Du kannst auch auf das Symbol für Zentriert ausrichten
klicken, dann befindet sich das Element immer in der Mitte.
Hinweis:
Dadurch wird das Kontrollkästchen Element dockt autom. an automatisch deaktiviert.
Elemente mithilfe von Rändern andocken
Wenn ein Element angedockt ist, helfen Ränder, einen festgelegten Abstand zwischen dem Element und den Rändern seines übergeordneten Elements einzuhalten. Du kannst auch an den Seiten, die nicht angedockt sind, Ränder hinzufügen. Ränder dienen als Puffer und verhindern Überlagerungen mit anderen Elementen.
Im folgenden Beispiel ist das Textelement am oberen und rechten Rand der Zelle angedockt. Wenn du im Inspektor-Panel mit der Maus über die Ränder fährst, werden sie auf der Arbeitsfläche hervorgehoben:
Um einen Rand zu erstellen oder zu bearbeiten:
- Wähle das entsprechende Element aus.
- Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
- Scrolle nach unten zu Position.
- Klicke unter Andocken, Ränder, Abstand auf einen Rand (z. B oben, links).
- Gib einen Wert für den Rand ein.
Tipp: Klicke auf die Maßeinheit (z. B px, %), um diese zu ändern. Wir empfehlen, Prozentsatz (%) zu verwenden, um deine Elemente auf jeder Bildschirmgröße einheitlich zu positionieren. - (Optional) Klicke auf das Symbol für Alle Seiten bearbeiten
, um für alle Seiten den gleichen Rand festzulegen.
Maßeinheiten für Ränder:
Die Ränder können in Pixel (px), Prozentsatz (%), Viewport-Höhe (vh) und Viewport-Breite (vw) eingestellt werden. Jede Einheit hat ein anderes Ergebnis, wenn die Größe des Bildschirms geändert wird. Siehe den Unterschied im Verhalten der Einheiten, indem du deinen Arbeitsfläche ziehst, um die Größe zu ändern.
Das Überlagern von Elementen verhindern
Beim Positionieren von Elementen ist darauf zu achten, dass sie sich an kleineren Breakpoints nicht überlagern. Um dies zu verhindern, beachte unsere Tipps unten.
Oben andocken
Es ist normalerweise eine gute Idee, deine Elemente am oberen Rand des Containers, des Abschnitts oder der Gitterzelle anzudocken, in dem/der sie sich befinden. Dadurch wird sichergestellt, dass immer ein definierter Abstand zwischen dem Element und dem Container/Abschnitt vorhanden ist, wenn weitere Inhalte zu deiner Seite hinzugefügt werden.
Zellen zur Organisation des Layouts hinzufügen
Füge für komplexere Layouts Zellen hinzu, um den Abschnitt zu organisieren. Platziere Elemente in eigenen Zellen und docke sie an eine Rasterlinie an, damit sie auf jeder Bildschirmgröße perfekt positioniert sind.
Einen Stapel anwenden
Platziere eine Gruppe von Elementen in einem horizontalen oder vertikalen Stapel, um sicherzustellen, dass sie sich nicht überlagern. Ein Stapel ist ein Flex-Container, der sich automatisch an unterschiedliche Bildschirmgrößen anpasst. Du musst nur die Ränder zwischen den Elementen festlegen.
Mit negativen Rändern kannst du Elemente in einem Stapel einander überlagern lassen. So kannst du Elemente vor anderen platzieren, wodurch ein komplexes Design entsteht.