Tutorials

Wix-Tutorial: Unterschiede zwischen Editor, Vorschau und Live-Seite beheben

Melden

Hier ist ein ausführliches Tutorial, wie du Darstellungsfehler zwischen dem Wix-Editor, der Vorschau und deiner Live-Website behebst.

Es kann frustrierend sein: Im Wix-Editor sieht alles perfekt aus, in der Vorschau passt es meistens noch, aber sobald die Seite live ist, verschieben sich Elemente, Schriftarten ändern sich oder Inhalte fehlen komplett. Hier sind die gängigsten Lösungen, um diese Differenzen zu korrigieren.

1. Der "Hard Refresh" (Erzwungenes Aktualisieren)

Oft liegt das Problem nicht an Wix selbst, sondern an deinem Browser, der eine alte Version der Seite im Zwischenspeicher (Cache) hält.

  • Lösung: Öffne deine Live-Website und drücke:
    • Windows: Strg + F5
    • Mac: Cmd + Shift + R
  • Dies erzwingt das Herunterladen der aktuellsten Daten vom Server.

2. Prüfung der Rasterlinien (Gridlines)

Einer der häufigsten Gründe für Verschiebungen ist das Platzieren von Elementen außerhalb der vertikalen Rasterlinien.

  • Das Problem: Elemente, die außerhalb der gestrichelten Linien im Editor liegen, werden auf kleineren Bildschirmen (Laptops) oft abgeschnitten oder verschoben.
  • Die Lösung:
    1. Aktiviere im Editor oben rechts unter „Werkzeuge“ die Rasterlinien.
    2. Stelle sicher, dass alle wichtigen Inhalte (Texte, Buttons, Logos) innerhalb dieser Linien liegen.
    3. Hintergründe und Streifen können und sollten über die Linien hinausgehen, um die volle Breite zu füllen.

3. Überlappende Elemente und Ebenen

Wenn Elemente im Editor übereinander liegen, kann der Browser sie in der Live-Ansicht falsch interpretieren.

  • Die Lösung:
    1. Nutze das Ebenen-Panel (zu finden unter Werkzeuge > Ebenen).
    2. Prüfe, ob sich unsichtbare Container oder Textfelder über Buttons legen, wodurch diese nicht mehr klickbar sind.
    3. Räume „verwaiste“ Elemente auf, die hinter anderen Bildern versteckt sind.

4. Browser-Cache und Inkognito-Modus

Wenn die Seite live anders aussieht, könnte ein Browser-Plugin oder ein voller Cache die Ursache sein.

  • Test: Öffne deine Website in einem privaten Fenster (Inkognito-Modus).
  • Wenn sie dort korrekt aussieht, musst du deinen Browser-Cache in den Einstellungen deines Browsers leeren.

5. Unterschied zwischen Sandbox und Live-Datenbank

Falls du mit dem Wix Content Manager (CMS) arbeitest und Daten in der Vorschau siehst, aber nicht auf der Live-Seite:

  • Das Problem: Wix unterscheidet zwischen einer „Sandbox-Datenbank“ (Editor) und der „Live-Datenbank“.
  • Die Lösung:
    1. Gehe zum Content Manager.
    2. Klicke auf die entsprechende Sammlung.
    3. Wähle oben rechts „Sync“ und dann „Kopieren von Sandbox zu Live“.
    4. Stelle sicher, dass die Berechtigungen der Sammlung auf „Öffentlich“ stehen, falls jeder die Daten sehen soll.

6. Mobile Optimierung separat prüfen

Wix ist kein voll-responsives System, sondern nutzt einen separaten Mobile-Editor. Änderungen im Desktop-Editor können das Mobile-Layout negativ beeinflussen.

  • Die Lösung:
    1. Wechsle oben im Editor auf das Handy-Symbol.
    2. Klicke auf das "Optimieren"-Werkzeug (Seitenlayout-Optimierer), um das Layout automatisch anzupassen.
    3. Ordne Elemente manuell neu an. Keine Sorge: Änderungen im Mobile-Editor (außer Textinhalte) beeinflussen die Desktop-Version nicht.

7. Schriftarten und Custom Code

  • Schriftarten: Wenn du eigene Schriften hochgeladen hast, stelle sicher, dass sie korrekt eingebettet sind. Manchmal zeigt der Browser eine Ersatzschrift an, wenn die Datei nicht schnell genug lädt.
  • Velo / Custom Code: Falls du JavaScript (Velo) nutzt, können Fehler im Code dazu führen, dass Elemente in der Vorschau funktionieren (weil du eingeloggt bist), aber live blockiert werden. Prüfe die Konsole deines Browsers (F12 -> Console) auf Fehlermeldungen.

Zusammenfassung: Checkliste bei Fehlern

  1. Veröffentlichen geklickt? (Nur Speichern reicht nicht).
  2. Rasterlinien eingehalten?
  3. Browser-Cache geleert?
  4. Datenbank synchronisiert?
  5. Elemente im Ebenen-Panel geprüft?

Sollte das Problem weiterhin bestehen, hilft oft das Löschen und erneute Hinzufügen des betroffenen Elements (z.B. eines Streifens oder Menüs).

0