Anleitung: HTML in einer Wix-Website bearbeiten und hinzufügen

Hier ist ein ausführliches Tutorial, wie du HTML und benutzerdefinierten Code in deine Wix-Website einbinden kannst. Da Wix ein „What-You-See-Is-What-You-Get“-Editor ist, kannst du nicht den gesamten Quellcode der Seite direkt umschreiben, aber du kannst an spezifischen Stellen eigenen Code hinzufügen.

Wix bietet drei Hauptwege an, um mit HTML und Skripten zu arbeiten: über das HTML-Widget, über die Dienst-Einstellungen (Custom Code) oder über den Entwicklermodus (Velo).

Methode 1: HTML-Code auf einer spezifischen Seite einbetten (Widget)

Diese Methode eignet sich am besten, wenn du ein bestimmtes Element (z. B. einen Rechner, ein spezielles Kontaktformular oder ein Widget eines Drittanbieters) an einer exakten Stelle auf deiner Seite anzeigen möchtest.

1. Editor öffnen: Logge dich bei Wix ein und öffne den Website-Editor.
2. Element hinzufügen: Klicke auf das „+“-Icon (Hinzufügen) in der linken Seitenleiste.
3. Einbetten wählen: Gehe zum Punkt Code einbetten.
4. HTML-Einbettung: Wähle die Option HTML-Einbettung (oder „HTML-Frame“). Ein graues Feld erscheint auf deiner Seite.
5. Code eingeben:
   • Klicke auf den Button Code eingeben, der über dem grauen Feld erscheint.
   • Stelle sicher, dass „Code“ ausgewählt ist (nicht „Webadresse“).
   • Füge deinen HTML/CSS/JS-Code in das Textfeld ein.
6. Speichern: Klicke auf Aktualisieren. Du kannst das Fenster nun schließen und das Widget auf deiner Seite positionieren und in der Größe anpassen.

Methode 2: Globalen Code hinzufügen (Header & Body)

Diese Methode ist ideal für Tracking-Codes (wie Google Analytics, Facebook Pixel) oder CSS-Styles, die auf der gesamten Website oder im Hintergrund geladen werden sollen.

1. Dashboard aufrufen: Gehe in dein Wix-Dashboard (nicht in den Editor).
2. Einstellungen: Klicke im linken Menü auf Einstellungen.
3. Benutzerdefinierter Code: Scrolle nach unten zum Bereich „Fortgeschritten“ und klicke auf Benutzerdefinierter Code.
4. Code hinzufügen:
   • Klicke oben rechts auf + Benutzerdefinierten Code hinzufügen.
   • Füge deinen Code in das Feld ein.
   • Platzierung wählen: Entscheide, ob der Code im Head, Body-Start oder Body-Ende eingefügt werden soll.
   • Wähle aus, ob der Code auf allen Seiten oder nur auf einer bestimmten Seite geladen werden soll.
5. Anwenden: Klicke auf Übernehmen.

Methode 3: Velo by Wix (Entwicklermodus)

Wenn du tiefergehende Funktionen programmieren möchtest (z. B. Datenbank-Abfragen oder komplexe Interaktionen), musst du den Entwicklermodus aktivieren.

1. Entwicklermodus aktivieren: Klicke in der oberen Menüleiste des Editors auf Entwicklermodus.
2. Aktivieren: Wähle Entwicklermodus aktivieren.
3. Code-Editor nutzen: Am unteren Bildschirmrand öffnet sich nun ein Code-Panel. Hier kannst du JavaScript nutzen, um die Funktionen deiner HTML-Elemente zu steuern oder APIs anzubinden.
   • Hinweis: Dies erlaubt keinen direkten Zugriff auf das rohe HTML-Gerüst der Seite, aber volle Kontrolle über das Verhalten der Wix-Elemente.

Wichtige Hinweise und Einschränkungen

• Iframes: Wenn du HTML über das Widget (Methode 1) einfügst, wird der Code in einem sogenannten iFrame isoliert. Das bedeutet, dass der Code keinen direkten Zugriff auf andere Elemente deiner Wix-Seite hat.
• Responsivität: Achte darauf, das HTML-Widget sowohl in der Desktop- als auch in der Mobil-Ansicht von Wix zu testen, da die Größe oft manuell angepasst werden muss.
• Sicherheit: Wix erlaubt keine Skripte, die die Sicherheit der Plattform gefährden könnten. Bestimmte PHP-Funktionen können nicht direkt in Wix ausgeführt werden.
• Fehlersuche: Wenn dein Code nicht angezeigt wird, überprüfe, ob alle Tags (z. B. <div>, </div>) korrekt geschlossen sind.

Zusammenfassung: Nutze das HTML-Widget für sichtbare Elemente und die Einstellungen für benutzerdefinierten Code für unsichtbare Skripte und Tracker.