header-logo
Erfahre, wie du Wix für den Aufbau deiner Website und deines Unternehmens nutzen kannst
Gestalte und verwalte deine Website mit Wix.
Verwalte Premiumpakete, Abos und Rechnungen
Führe dein Unternehmen und vernetze dich mit Mitgliedern.
Kaufe, verknüpfe oder übertrage eine Domain.
Stärke dein Unternehmen und deine Webpräsenz.
Steigere deine Sichtbarkeit mit SEO und Marketing.
Nutze erweiterte Funktionen für mehr Effizienz.
Finde Lösungen oder kontaktiere uns.
placeholder-preview-image
Verbessere deine Kenntnisse mit unseren Tutorials.
Erhalte Tipps für Webdesign, Marketing und mehr.
Erfahre, wie du den organischen Traffic steigerst.
Erstelle eine Website mit unserer Full-Stack-Plattform.
Finde einen Spezialisten, der dir hilft, deine Ziele zu erreichen.
placeholder-preview-image

Studio Editor: Mit der Andock-Funktion, Rändern und Abständen arbeiten

11 min
In diesem Artikel
  • Elemente auf der Arbeitsfläche positionieren
  • X- und Y-Koordinaten im Inspektor-Panel
  • Automatisches und manuelles Andocken
  • Elemente mithilfe von Rändern andocken
  • Abstände um responsive Container herum hinzufügen
  • Das Überlagern von Elementen verhindern
  • FAQs
In einer Welt, in der sich Geräte ständig verändern, ist es wichtig, die Position deiner Elemente so zu steuern, dass sie auf verschiedenen Bildschirmgrößen genau so aussehen, wie du es dir wünschst. Im Studio Editor werden Elemente automatisch angedockt, um genau das 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 Andocken, Ränder und 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. Dann kannst du beobachten, 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 separat für jeden Breakpoint festlegen. So bleibt das Element wirklich jederzeit auf jedem Bildschirm an der richtigen Stelle.
Solange das Element innerhalb desselben Parent-Elements bleibt (z. B. Abschnitt, Zelle), kannst du es verschieben, ohne andere Breakpoints zu beeinflussen. Wenn du ein Element zu einem anderen Parent verschiebst (vom Parent lösen), gilt dies für alle Breakpoints.
Screenshot von einem Element, das in eine andere Parent-Zelle gezogen wird, und eine Benachrichtigung, dass dies alle Breakpoints betrifft

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 du das Stapelelement aus seinem Parent-Element, der Zelle, herausschiebst.
Ein Bildschirmfoto zeigt, wie ein Stapelelement aus seiner Parent-Zelle verschoben wird und wie dadurch im Inspektor ein negativer Y-Wert erstellt wird.

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.
Screenshot: Ein Container, der im Studio Editor am oberen und rechten Rand seiner Parent-Zelle angedockt ist
Tipp:
Der Responsivitätsprüfer hilft dir dabei, Elemente zu erkennen, die am unteren Rand des Parent-Elements angedockt werden sollten anstatt am oberen Rand, um so auf der Live-Website entstehende Zwischenräume zu vermeiden.

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 dabei, einen festgelegten Abstand zwischen dem Element und den Rändern des jeweiligen Parent-Elements einzuhalten. Außerdem kannst du an den Seiten, die nicht angedockt sind, Ränder hinzufügen.

Um einen Rand zu erstellen oder zu bearbeiten:

  1. Wähle das entsprechende Element aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, wie das Inspektor-Panel im Studio Editor geöffnet wird
  1. Scrolle nach unten zu Position.
  2. Gib einen Wert für den entsprechenden Rand ein (links, rechts, oben oder unten).
Ein Container im Editor und das Inspektor-Panel, in dem der Bereich Ränder des Panels hervorgehoben ist.
Tipp:
Der Responsivitätsprüfer hilft dir dabei, unnötige Ränder zu erkennen. Diese schränken sonst vielleicht deine Möglichkeiten ein, wenn du die Größe des Parent-Elements ändern möchtest.

Abstände um responsive Container 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.
Sobald du Abstände hingefügt hast, kannst du diese 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:

  1. Wähle das entsprechende Element aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, wie das Inspektor-Panel im Studio Editor geöffnet wird
  1. Scrolle nach unten zu Layout.
  2. 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.
Ein Bildschirmfoto zeigt einen Container auf der Arbeitsfläche neben den Abstandseinstellungen im Inspektor-Panel.

Das Überlagern von Elementen verhindern

Beim Positionieren von Elementen ist darauf zu achten, dass diese sich an kleineren Breakpoints nicht überlagern. Um dies zu vermeiden, schau dir unsere Tipps unten an.
Fehlerbehebung:
Wenn du aktuell Probleme mit unerwünschten Überlagerungen zwischen Elementen hast, sieh dir diese Anleitung zur Fehlerbehebung an.

FAQs

Klicke unten auf eine Frage, um mehr zu erfahren.