Studio Editor: Die Größe deiner Elemente festlegen

9 Min. Lesezeit
Bei der Gestaltung deiner Website solltest du sicherstellen, dass sie auf jeder Bildschirmgröße gut aussieht. Im Studio Editor legst du die Größe in px* fest und das responsive Verhalten erledigt den Rest.
Jedes Element hat ein Standardverhalten (z. B. proportional skalieren), was steuert, wie die Größe auf anderen Bildschirmen geändert wird. Du kannst das Standardverhalten jederzeit so ändern, dass es deinen Anforderungen besser entspricht.
px* ist eine fließende Größeneinheit im Verhältnis zur Bearbeitungsgröße.
In diesem Artikel erfährst du, wie die Größenanpassung im Studio Editor funktioniert:
Tipp:
Du kannst die Größe und das responsive Verhalten des Elements pro Breakpoint festlegen.

Die Größenanpassung eines Elements ändern

Wähle ein Element auf der Arbeitsfläche aus und ziehe die Ziehpunkte, um es zu verkleinern oder zu vergrößern. Dadurch wird festgelegt, wie das Element auf dem aktuellen Breakpoint aussieht.
Im Inspektor-Panel kannst du die genaue Breite und Höhe des Elements in Pixeln überprüfen. Bei Bedarf kannst du deine eigenen Werte für Breite und Höhe eingeben.
Lass den Inspektor Folgendes berechnen:
Der Einfachheit halber kannst du bei der Eingabe von Größenwerten Additions- (+), Subtraktions- (-), Multiplikations- (*) und Divisionszeichen (/) verwenden. Mache zum Beispiel ein Element 3-mal breiter, indem du neben der aktuellen Breite *3 hinzufügst.
GIF, das zeigt, wie du die Größe eines Elements auf der Arbeitsfläche mit den Ziehpunkten änderst

Die Größe von Medienelementen ändern

Wenn du die Größe eines Medienelements wie eines Bildes oder eines Videos änderst, kannst du das Seitenverhältnis sperren, sodass Breite und Höhe immer proportional dazu bleiben.
Das bedeutet, dass die Höhe automatisch angepasst wird, wenn du die Breite änderst (und umgekehrt), um die ursprüngliche Form des Elements beizubehalten.
GIF, das zeigt, wie die Größenänderung eines Elements auf der Arbeitsfläche aussieht, wenn das Seitenverhältnis gesperrt ist

Um das Seitenverhältnis zu fixieren:

  1. Wähle das entsprechende Medienelement aus.
  2. Klicke oben rechts auf den Pfeil für Inspektor öffnen .
Der Pfeil, auf den du im Studio Editor klickst, um das Panel zu öffnen
  1. Klicke unter Größe auf das Symbol für Seitenverhältnis sperren .
Screenshot des Symbols zum Sperren des Seitenverhältnisses, das du im Inspektor für jedes Medienelement anklicken kannst
  1. Ändere die Größe des Elements, indem du eine der folgenden Optionen verwendest:
    • Den Wert für die Breite/Höhe im Inspektor eingeben (der andere Wert wird automatisch angepasst)
    • Die Ziehpunkte um das Element auf der Arbeitsfläche ziehen
Hinweis:
Diese Option ist im Modus erweiterte Größenanpassung nicht verfügbar.

Einstellung der Größe in px*

px* ist eine fließende Maßeinheit im Studio Editor. Damit kannst du die Größe mit einer vertrauten Messung (Pixel) bearbeiten, während die eigentliche Messung hinter den Kulissen responsiv ist.
Mit anderen Worten: Dein Design erfolgt in Pixeln, die die Größe auf der Arbeitsfläche repräsentieren, und das Element bleibt responsiv. Die spezifischen Werte und Größeneinheiten hängen vom ausgewählten responsiven Verhalten ab. Fahre mit der Maus über px*, um die Berechnung und die verwendete responsive Größeneinheit zu sehen.
Im folgenden Beispiel beträgt die Breite des Containers auf der aktuellen Arbeitsfläche 1000 px*. Die tatsächliche Einheit ist der Prozentsatz, das heißt die Breite ist relativ zu jedem Bildschirm (79,1 %).
Ein Screenshot, der zeigt, dass beim Mouseover über px* im Inspektor ein Pop-up mit der tatsächlichen Berechnung geöffnet wird
Was ist der Unterschied zwischen px* und px?
In beiden Fällen kannst du jedoch in Pixel bearbeiten:
  • px* bedeutet, dass die Größe, die du siehst, für den Breakpoint relevant ist, an dem du gerade arbeitest.
  • px bedeutet, dass die Größe über Breakpoints hinweg fixiert ist.

Das responsive Verhalten eines Elements auswählen

Wenn du der Seite ein Element hinzufügst, ist responsives Verhalten bereits integriert. Das bedeutet, dass du dir keine Gedanken darüber machen musst, wie das Element auf verschiedenen Bildschirmen aussieht. Das responsive Verhalten stellt sicher, dass die Größe des Elements geändert wird.
Möglicherweise möchtest du jedoch das responsive Verhalten ändern, wenn du ein Verhalten siehst, das besser für dein Design geeignet ist.
Hinweis:
Das von dir gewählte responsive Verhalten wirkt sich auf die verwendeten Größeneinheiten aus. Wenn du zum Beispiel das responsive Verhalten „Fest“ auswählst, ändert sich die Größe von px* zu px.

Um ein anderes responsives Verhalten auszuwählen:

  1. Wähle den entsprechenden Breakpoint aus.
  2. Wähle das Element aus.
  3. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Der Pfeil, auf den du im Studio Editor klickst, um das Panel zu öffnen
  1. Wähle eine Option aus dem Aufklappmenü Responsives Verhalten aus.
GIF des geöffneten Aufklappmenüs „Responsives Verhalten“ und der verfügbaren Optionen

Erweiterte Größenanpassung verwenden

Die erweiterte Größenanpassung ermöglicht eine tiefergreifende Anpassung der Elementgröße pro Breakpoint. Anstatt mit px* zu arbeiten und ein responsives Verhalten auszuwählen, kannst du in diesem Modus die Maße sehen, die wir hinter den Kulissen verwenden (z. B. px, %, vh), und sie an deine Bedürfnisse anpassen.
Die erweiterte Größenanpassung gilt für das ausgewählte Element und für alle Breakpoints. Der erweiterte Größenanpassungsmodus bleibt für dieses Element aktiviert, um einen einfachen Zugriff zu ermöglichen, aber du kannst ihn jederzeit deaktivieren.

Um auf die erweiterte Größenanpassung zuzugreifen und diese zu bearbeiten:

  1. Wähle den entsprechenden Breakpoint im Editor aus.
  2. Wähle das Element aus.
  3. Klicke oben rechts auf den Pfeil für Inspektor öffnen .
Der Pfeil, auf den du im Studio Editor klickst, um das Panel zu öffnen
  1. Klicke neben Größe auf das Symbol für Weitere Aktionen .
  2. Aktiviere den Schalter Erweiterte Größenanpassung.
  3. Bearbeite die Größe nach Bedarf: Breite, Höhe sowie Mindest- und Höchstwerte.
    Tipp: Wechsle zu einer anderen Einheit (z. B. von px zu %), indem du im Inspektor darauf klickst. Dies öffnet eine Liste der verfügbaren Maßeinheiten für das Element.
GIF mit der Lise an Maßeinheiten, die sich öffnet, wenn du im Inspektor darauf klickst
Die Abschnittshöhe festlegen:
Wir empfehlen, die Höhe nicht in Pixel festzulegen, da dies dazu führen kann, dass Elemente nicht wie vorgesehen angezeigt werden. Sie können zum Beispiel überlaufen oder abgeschnitten erscheinen.

Die Einstellungen für die Größenanpassung festlegen

Wähle die gewünschte Größenanpassung für die von dir gestaltete Website. Wenn du gerne mit erweiterten CSS-Maßeinheiten arbeitest, kannst du die erweiterte Größenanpassung im gesamten Editor aktivieren. Wenn du den Größenanpassungsmodus lieber pro Element auswählen möchtest, kannst du die Einstellungen auch so lassen.

Um die Einstellungen für die Größenanpassung für eine Website festzulegen:

  1. Klicke oben links auf das Symbol für Wix Studio .
  2. Fahre mit der Maus über Anzeigen.
  3. Fahre mit der Maus über Größenanpassung (Einstellungen).
  4. Wähle deine Einstellung:
    • Immer erweiterte Größenanpassung anzeigen: Die Größenanpassung im Inspektor ist immer auf „Erweitert“ eingestellt.
      Hinweis: Dieser Modus deaktiviert die Option, für bestimmte Elemente die erweiterte Größenanpassung zu deaktivieren.
    • Pro Element festlegen: Du legst die Größeneinstellung für jedes Element fest.
Screenshot des oberen Menüs im Studio Editor, in dem du die Größeneinstellung steuern kannst

Häufig gestellte Fragen (FAQs)

Klicke unten auf eine Frage, um mehr über die Größenanpassung zu erfahren.

War das hilfreich?

|