Studio Editor: Die Größe deiner Elemente festlegen
9 Min. Lesezeit
Bei der Gestaltung deiner Website solltest du sicherstellen, dass die Elemente auf jeder Bildschirmgröße gut aussehen. Im Studio Editor bearbeitest du die Größe in Pixeln und das responsive Verhalten erledigt den Rest.
Jedes Element hat ein Standardverhalten (z. B. proportionales Skalieren), das steuert, wie die Größe auf anderen Bildschirmen geändert wird. Im Inspektor-Panel kannst du das responsive Verhalten eines Elements so ändern, dass es deinen Anforderungen besser entspricht.
Öffne unsere Wix Studio Academy, um zusätzliche Webinare, Anleitungen und Kurse von Wix Studio anzusehen.
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.
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.
Um das Seitenverhältnis zu fixieren:
- Wähle das entsprechende Medienelement aus.
- Klicke oben rechts auf den Pfeil für Inspektor öffnen
.
- Klicke unter Größe auf das Symbol für Seitenverhältnis sperren
.
- Ä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 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 %).
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 im Editor aus.
- Wähle das Element aus.
- Klicke oben rechts auf den Pfeil für Inspektor öffnen .
- Wähle eine Option aus dem Aufklappmenü Responsives Verhalten aus.
Erweiterte Größenanpassung verwenden
Die erweiterte Größenanpassung ermöglicht eine tiefergreifende Anpassung der Elementgröße pro Breakpoint. Wenn du die erweiterte Größeneinstellung für ein Element aktivierst, siehst du die von uns verwendeten Maße und kannst diese an deine Bedürfnisse anpassen.
Das bedeutet, dass du mit responsiven Einheiten anstelle von Pixeln arbeiten kannst, was ganz neue Möglichkeiten eröffnet.
Welche Maßeinheiten sind verfügbar?
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.
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 Wix-Studio-Symbol
. - 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.
- Immer erweiterte Größenanpassung anzeigen: Die Größenanpassung im Inspektor ist immer auf „Erweitert“ eingestellt.
War das hilfreich?
|