Studio Editor: Die Größe deiner Elemente festlegen

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.

Die meisten Elemente haben 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

Probleme mit der Größenänderung?

Sieh dir dieses Video zur Fehlerbehebung an, um zu erfahren, wie du Probleme mit Abschnitten und Containern beheben kannst dessen Größe nicht geändert wird.

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.

Für welche Medienelemente ist diese Option verfügbar?

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:

Wähle das entsprechende Medienelement aus.
Klicke oben rechts auf den Pfeil für Inspektor öffnen .

Der Pfeil, auf den du im Studio Editor klickst, um das Panel zu öffnen

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

Ä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.

Was ist der Unterschied zwischen den verfügbaren Verhaltensweisen?

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:

Wähle den entsprechenden Breakpoint aus.
Wähle das Element aus.
Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .

Wähle eine Option aus dem Aufklappmenü Responsives Verhalten aus.

GIF des geöffneten Aufklappmenüs „Responsives Verhalten“ und der verfügbaren Optionen

Hast du unerwünschte Zwischenräume auf der Live-Website?

Sieh dir dieses Video zur Fehlerbehebung an, um zu erfahren, wie sich das responsive Verhalten auf das Problem auswirken kann und wie es helfen kann, dieses Problem zu beheben.

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.

Welche Maßeinheiten sind verfügbar?

Du kannst diejenigen auswählen, die dir am besten gefallen:

Pixel (px): Wenn du möchtest, dass dein Element auf jeder Bildschirmgröße genau gleich bleibt, kannst du seine Höhe und Breite in px-Werten festlegen.
Prozentsatz (%): Der Breiten-/Höhenwert des Elements hängt von den Abmessungen des übergeordneten Elements ab. Dadurch wird sichergestellt, dass die Größe des Elements proportional zu seinem Parent geändert wird.
- Du kannst z. B. ein Textelement (Child) an einen Container (Parent) andocken und seine Breite auf 50 % festlegen. Auf diese Weise nimmt dein Text unabhängig von der Bildschirmgröße immer 50 % der Breite des Containers in Anspruch.
Viewport-Breite und -Höhe (vw und vh): Diese Maße stellen die Breite und Höhe eines bestimmten Viewports (Browsers) dar.
- So ist zum Beispiel 1vw in der Breite = 1 % der Breite des Browsers.
Max-Content (max-c): Du kannst dieses Maß verwenden, um die Breite eines Elements festzulegen und sie von der Größe der untergeordneten Elemente abhängig zu machen, und zwar unabhängig davon, wie groß der Inhalt ist oder wie viele Wörter er enthält. Das Parent-Element passt sich dem Inhalt an.
Berechnung: Mit grundlegenden mathematischen Prinzipien kannst du eine „Formel“ schreiben, die die Breite oder Höhe eines Elements bestimmt. Du kannst sogar verschiedene Maße in dieser Berechnung kombinieren (z. B. vh und px).
- Du kannst zum Beispiel eine Kopfzeile und ein Abschnitt so festlegen, dass er die gesamte Höhe des Viewports (100vh) einnimmt. Wenn die Kopfzeilenhöhe auf 100px festgelegt ist, lautet die Berechnung für die Abschnittshöhe: (100vh-100px). Dadurch wird die Kopfzeilenhöhe vom Viewport abgezogen.

Automatische Breite und Höhe

Bei einigen Elementen ist die Breite oder Höhe bereits auf Automatisch eingestellt. Das bedeutet, dass der Inhalt des Elements die Breite/Höhe bestimmt, sodass du Inhalte hinzufügen oder entfernen kannst, ohne dir Gedanken über die Größenänderung machen zu müssen.

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:

Wähle den entsprechenden Breakpoint im Editor aus.
Wähle das Element aus.
Klicke oben rechts auf den Pfeil für Inspektor öffnen .

Klicke neben Größe auf das Symbol für Weitere Aktionen .
Aktiviere den Schalter Erweiterte Größenanpassung.
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:

Klicke oben links auf das Symbol für Wix Studio .
Fahre mit der Maus über Anzeigen.
Fahre mit der Maus über Größenanpassung (Einstellungen).
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.

Ich habe einen Abschnitt so eingerichtet, dass er proportional skaliert wird, aber die Elemente werden nicht skaliert. Warum?

Wann sollte ich die erweiterte Größenanpassung verwenden?

Sind alle responsiven Verhaltensweisen für Elemente verfügbar, die mit den Apps von Wix zusammenhängen?