Studio Editor: Mit der Andock-Funktion, Rändern und Abständen arbeiten
9 min
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.
px* (Skalierung) ist die Standardmaßeinheit für das Andocken, die Ränder und den Abstand. 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.
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 neben dem „Y“ negativ wird, wenn wir das Stapelelement aus seinem übergeordneten Element, der Zelle, heraus verschieben.
Automatisches und manuelles Andocken
Wenn du ein neues Element im Editor hinzufügst, wird es automatisch angedockt, um sicherzustellen, dass es auf allen Bildschirmen und Geräten an seinem Platz bleibt. Du kannst das automatische Andocken jedoch jederzeit deaktivieren und die Andockpunkte manuell auswählen.
Klicke unten auf ein Thema, um mehr zu erfahren.
Automatisches Andocken im Editor
, dann wird es nicht automatisch an eine Ecke angedockt.
Andocken manuell anpassen
. 
, Unten 
, Rechts 
oder Links 
.
Tipp:
Mit dem Responsivitätsprüfer kannst du Elemente erkennen, die am unteren Rand des übergeordneten Elements angedockt werden sollten, anstatt am oberen Rand, was auf der Live-Website zu Lücken führen kann.
Elemente mithilfe von Rändern andocken
Ränder dienen als Puffer und verhindern Überlagerungen mit anderen Elementen. 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.
Um einen Rand zu erstellen oder zu bearbeiten:
- Wähle das entsprechende Element aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Scrolle nach unten zu Position.
- Gib einen Wert für den entsprechenden Rand ein (links, rechts, oben oder unten).
Tipp:
Mit dem Responsivitätsprüfer kannst du Elemente mit unnötigen Rändern erkennen. Sie können deine Möglichkeiten einschränken, wenn du die Größe des übergeordneten Elements ändern möchtest.
Abstände um responsive Container hinzufügen
Füge Containern Abstände hinzu, um einen Zwischenraum (Füllung) zwischen den Rändern (oben, unten oder an den Seiten) und dem Inhalt darin zu schaffen. Abstände können zu allen Arten von responsiven Containern hinzugefügt werden, einschließlich Standard-Containern, Stapeln, Flexboxen, Repeatern, Zellen, Abschnitten und Seiten.
Sobald du Abstände hingefügt hast, kannst du sie per Drag-and-Drop-Funktion direkt auf der Arbeitsfläche anpassen. Wähle den responsiven Container aus und fahre mit der Maus über den Abstand, um diese Option zu sehen.
Um einen Abstand hinzuzufügen:
- Wähle das entsprechende Element aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Scrolle nach unten zu Layout.
- Wähle, welchen Abstand du bearbeiten möchtest:
- Eine bestimmte Seite : Klicke auf das Symbol und gib den Wert für die entsprechende Seite ein – links, rechts, oben oder unten.
- Horizontaler Abstand : Gib einen Wert für den linken und rechten Abstand ein.
- Vertikaler Abstand : Gib einen Wert für den oberen und unteren Abstand ein.
: Klicke auf das Symbol und gib den Wert für die entsprechende Seite ein – links, rechts, oben oder unten.
: Gib einen Wert für den linken und rechten Abstand ein.
: Gib einen Wert für den oberen und unteren Abstand ein.
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
Zellen zur Organisation des Layouts hinzufügen
Einen Stapel anwenden
Fehlerbehebung:
Wenn du Probleme mit unerwünschten Überlagerungen zwischen Elementen hast, sieh dir diese Anleitung zur Fehlerbehebung an.
FAQs
Warum kann ich die Rand- und Abstandsangaben auf der Arbeitsfläche nicht sehen?
.
Kann ich beim Festlegen von Rändern und Abständen andere Einheiten als px* verwenden?
