Studio Editor: Elemente positionieren
8 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.
Öffne unsere Wix Studio Academy, um zusätzliche Webinare, Anleitungen und Kurse von Wix Studio anzusehen.
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 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
Andocken manuell anpassen
, sodass das Element sich immer in der Mitte befindet.
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 das Symbol für Inspektor öffnen
.
- Scrolle nach unten zu Position.
- Klicke unter Andocken, Ränder, Abstand auf einen Rand (z. B oben, links).
- (Optional) Klicke auf das Symbol für Individuell bearbeiten
, um nur die Seite zu bearbeiten, die du ausgewählt hast. - Gib einen Wert für den Rand ein.
Tipp: Klicke auf die Maßeinheit (z. B. px*, %, um dies zu ändern.
Maßeinheiten für Ränder:
Die Ränder können in px*, 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 deine Arbeitsfläche ziehst, um die Größe zu ändern.
Abstand um ein Element herum 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.
Um Abstand um ein Element herum hinzuzufügen:
- Wähle das entsprechende Element aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke unter Andocken, Ränder und Abstände auf das Feld Abstand.
- Klicke auf die Seite, die du anpassen möchtest.
- Gib einen Wert in %, px, px*, vh oder vw ein.
Tipp: Klicke auf die aktuelle Größeneinheit, um eine andere auszuwählen. - (Optional) Klicke auf das Symbol für Auf alle Seiten anwenden
.
Abstandseinheiten:
Abstände können in px*, 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 deine 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
Zellen zur Organisation des Layouts hinzufügen
Einen Stapel anwenden
Wenn du derzeit unerwünschte Überlagerungen zwischen Elementen siehst, sieh dir diese Video-Anleitung an, um das Problem zu beheben.
War das hilfreich?
|