Editor X: Die Größe eines Elementes festlegen
5 Min. Lesezeit
Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren
Mit den Optionen im Inspektor-Panel kannst du die Größe deines Elements genau nach deinen Wünschen festlegen. Gib feste pixelgenaue Breiten- und Höhenwerte ein oder verwende fließende Maßeinheiten, damit sich dein Element nahtlos an jede Bildschirmgröße anpasst.
In diesem Artikel erfährst du mehr über die Größenanpassung deiner Elemente im Editor X:
Möchtest du mehr erfahren?
Sieh dir unsere Lektion zum Thema Größenanpassung in der Editor X Academy an (nur auf Englisch verfügbar).
Eine responsive Website strukturieren
Bevor du Inhalte zu deiner Website hinzufügst, ist es wichtig, eine Struktur zu erstellen und deine Ebenen nach dieser Logik aufzubauen. Deine Ebenen sind gemäß dem Parenting-Modell organisiert, was bedeutet, dass die oberste Ebene als übergeordnete Ebene (Parent) für die untere Ebene fungiert.
Zeige mir ein Beispiel
Die Größe des Parent-Elements kann sich auf die Child-Elemente auswirken, da diese ihre Größe relativ zum Parent ändern. Um sicherzustellen, dass dein Design responsiv bleibt, definiere die Größe und Positionierung deiner Ebenen von oben nach unten.
Mit Breakpoints arbeiten:
Du kannst für jeden Breakpoint verschiedene Größenoptionen für deine Elemente festlegen.
Feste vs. fließende Größenanpassung
Wenn du die Größe eines Elements einstellst, kannst du im Inspektor-Panel zwischen der fixierten oder fließenden Größeneinstellung wählen:
- Fixiert: Mit dieser Option bleibt die Breite des Elements in allen Viewports gleich. Sie schrumpft oder wächst nicht mit der Bildschirmgröße.
- Fließend: Diese Option passt die Breite - und manchmal auch die Höhe - von Elementen in Abhängigkeit von der Bildschirmgröße an.
- Proportional skalieren: Aktiviere dieses Kontrollkästchen, damit die Höhe und Breite deines Elements bei einer Größenänderung in einem bestimmten Verhältnis bleiben. Wenn diese Option nicht ausgewählt ist, bedeutet dies, dass die Breite deines Elements entsprechend der Bildschirmgröße angepasst wird, während die Höhe gleich bleibt.
Tipp:
Du kannst auch die Ziehgriffe an den Seiten des Elements ziehen, um dessen Abmessungen zu ändern.
Verfügbare Maßeinheiten
Im Editor X kannst du eine Vielzahl verschiedener CSS-Maßeinheiten verwenden, um die Größe deiner Elemente festzulegen. Die Art der Maßeinheiten, die du verwenden möchtest, hängt davon ab, wie du die Größe von Elementen ändern möchtest, wenn sich die Viewport-Breite ändert.
Klicke unten, um mehr über die einzelnen Maßeinheiten zu erfahren und wann sie zu verwenden sind:
Automatisch
Pixel (px)
Prozentsatz (%)
Viewport-Breite (vw)
Viewport-Höhe (vh)
Min & max Werte
Max-Content (max-c)
Die Größe deiner Elemente mithilfe von Berechnungen bestimmen
Die Berechnung ist ein praktisches Werkzeug, wenn du die Größe eines Elements mit fließenden Maßeinheiten genau bestimmen musst. Mit 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).
So geht's
.Verwende zum Beispiel Berechnungen, um eine Kopfzeile (100px) und einen Abschnitt zu entwerfen, die zusammen die genaue Höhe des Viewports (100vh) in jeder Bildschirmgröße einnehmen. Du kannst die Höhe des Abschnitts auf (100vh - 100px) festlegen, damit die Kopfzeile immer bei der Berechnung berücksichtigt wird (100px).
Ein Element strecken
Strecke dein Element, um den gesamten Hintergrund seines Parent-Containers auszufüllen. Wenn du Raster verwendest, kannst du das Element entweder über eine bestimmte Zelle oder über die gesamte Rasterfläche strecken.
Wenn du ein Element streckst, werden seine Höhe und Breite auf Auto festgelegt, sodass das Element und sein Container ihre Größe dem jeweiligen Viewport entsprechend ändern. Da das Element gesteckt ist, sind Breite und Höhe mit denen des übergeordneten Containers identisch.
Mehr erfahren:
Erfahre mehr über das Erstellen einer responsiven Website mit den Editor X-Tools:
War das hilfreich?
|