Tutorials

Master-Guide: Skalierung in Wix Studio für jede Bildschirmgröße perfekt einstellen

Melden

Hier ist ein ausführliches Tutorial, wie du in Wix Studio sicherstellst, dass dein Design auf allen Bildschirmgrößen perfekt aussieht – vom riesigen Desktop-Monitor bis zum kleinen Smartphone.

Eines der mächtigsten Features von Wix Studio ist das responsive Verhalten. Doch ohne die richtigen Einstellungen kann ein Design auf dem Tablet oder Handy schnell „auseinanderfallen“. In diesem Tutorial lernst du, wie du die Skalierung kontrollierst.

1. Das Grundprinzip: "Proportional skalieren" vs. "Feste Breite"

Wix Studio arbeitet standardmäßig mit einem System, das Elemente proportional zur Bildschirmbreite skaliert. Das bedeutet: Wenn der Bildschirm kleiner wird, schrumpft das Element mit.

So stellst du es ein:

  1. Klicke ein Element (z.B. ein Bild oder einen Container) an.
  2. Schaue im rechten Inspektor-Panel unter Größe.
  3. Wähle im Dropdown-Menü unter „Responsives Verhalten“ die Option Proportional skalieren (Scale proportionally).

Warum das wichtig ist: Dies ist die sicherste Methode, um sicherzustellen, dass das Layout auf 15-Zoll-Laptops genauso aussieht wie auf 27-Zoll-Monitoren.

2. Die Arbeit mit Breakpoints (Umbrechpunkten)

Wix Studio nutzt drei Standard-Breakpoints: Desktop (Standard), Tablet und Mobil.

  • Wichtigste Regel: Änderungen kaskadieren von oben nach unten. Wenn du etwas am Desktop änderst, wirkt es sich auf Tablet und Mobil aus. Änderungen am Mobilgerät beeinflussen den Desktop jedoch nicht.
  • Fix: Wenn ein Design auf dem Tablet gestaucht aussieht, wechsle oben im Editor in die Tablet-Ansicht und passe dort die Größen oder Abstände an. Wix Studio speichert diese Werte spezifisch für diesen Breakpoint.

3. Stacks (Stapel) verwenden – Die Geheimwaffe

Überlappende Elemente sind der Hauptgrund für fehlerhafte Skalierungen. Wenn du Texte über Bildern oder Buttons neben Texten hast, solltest du Stacks nutzen.

  1. Markiere mehrere Elemente (Halte Umschalt gedrückt).
  2. Klicke auf den Button Stapeln (Stack).
  3. Ein Stack hält die Abstände zwischen den Elementen konstant, egal wie klein der Bildschirm wird.
  4. Du kannst im Inspektor festlegen, ob der Stapel vertikal oder horizontal sein soll.

4. Textskalierung beherrschen

Nichts ruiniert ein Design schneller als Text, der auf dem Handy zu klein zum Lesen oder auf dem Desktop riesig ist.

  • Text-Skalierung aktivieren: Klicke auf ein Textfeld und aktiviere im Inspektor unter Typografie die Option Textskalierung.
  • Min/Max Werte festlegen: Klicke auf die drei Punkte neben der Schriftgröße. Hier kannst du eine Mindestgröße (z.B. 14px) und eine Maximalgröße festlegen. So verhinderst du, dass dein Text auf kleinen Bildschirmen zu winzig wird.

5. Absolute vs. Relative Einheiten (%, vw, px)

Wenn "Proportional skalieren" nicht das gewünschte Ergebnis liefert, kannst du die Einheiten manuell anpassen:

  • % (Prozent): Bezieht sich auf die Größe des übergeordneten Containers. Ideal für Sektionen.
  • vw (Viewport Width): Bezieht sich auf die gesamte Breite des Browserfensters.
  • px (Pixel): Nutze Pixel nur für Elemente, die immer gleich groß bleiben sollen (z.B. ein Logo oder ein kleiner Button). Vermeide Pixel für große Layout-Boxen, da diese auf kleinen Bildschirmen nicht mitskalieren.

6. Sektionen auf "An Bildschirm anpassen" stellen

Manchmal möchtest du, dass eine Sektion (z.B. der Hero-Bereich) immer genau die volle Höhe des Bildschirms einnimmt.

  1. Wähle die Sektion aus.
  2. Stelle im Inspektor die Höhe auf 100vh (Viewport Height).
  3. So füllt das Design den Bildschirm immer komplett aus, egal ob auf einem MacBook Air oder einem großen Monitor.

7. Der Test: Die Vorschau-Funktion richtig nutzen

Verlasse dich nicht nur auf die drei Symbole (Desktop, Tablet, Mobil).

  1. Klicke oben rechts auf Vorschau.
  2. Nutze den Resize-Handle (den blauen Balken an der Seite), um das Browserfenster stufenlos zusammenzuschieben.
  3. Beobachte genau: Wo springt der Text um? Wo überlappen sich Bilder?
  4. Gehe zurück in den Editor und korrigiere genau diese Stellen mit Abständen (Padding/Margins) oder Stacks.

Profi-Tipp für Fortgeschrittene: CSS Grid

Wenn du ein komplexes Layout hast, das sich auf Mobilgeräten komplett verändern soll (z.B. von drei Spalten auf eine Spalte), klicke auf die Sektion und wähle CSS-Grid anwenden. Damit hast du die volle Kontrolle darüber, welches Element in welcher Zelle landet – pro Breakpoint unterschiedlich!

Zusammenfassung:

  • Nutze Proportional skalieren für den Großteil der Elemente.
  • Verwende Stacks, um Abstände zwischen Elementen zu sichern.
  • Setze Min/Max-Werte für Texte.
  • Arbeite dich von Desktop nach Mobil vor.
0