So fügen Sie benutzerdefinierten HTML-Code in Ihre Wix-Website ein

So identifizierst du Bereiche, die benutzerdefinierten HTML-Code unterstützen

Nicht alle Bereiche deiner Wix-Website unterstützen benutzerdefinierten HTML-Code. Hier erfährst du, wie du herausfindest, welche Bereiche dies tun:

Text-Widgets

• Text-Widgets sind die einfachste Möglichkeit, HTML-Code auf deiner Website einzufügen.
• Um zu überprüfen, ob ein Text-Widget HTML unterstützt, klicke darauf und suche nach einem Symbol für ein "<"-Zeichen im Editor.

Bild-Widgets

• Bild-Widgets unterstützen HTML-Code nur für alternative Textfelder und Bildunterschriften.
• Klicke auf ein Bild-Widget und suche nach dem Feld "Alternativer Text" oder "Bildunterschrift".

Weitere Bereiche

• Wix-App-Markt: Viele Wix-Apps von Drittanbietern unterstützen die Einfügung von HTML-Code. Überprüfe die App-Beschreibung, um zu sehen, ob sie diese Funktion bietet.
• Wix-Code: Mit Wix-Code kannst du benutzerdefinierten HTML-Code in deine Website einfügen. Weitere Informationen findest du in der Wix-Code-Dokumentation.

HTML-Code in Text-Widgets einfügen

Text-Widgets sind eine vielseitige Möglichkeit, Textinhalte in deine Wix-Website einzufügen. Sie bieten dir auch die Flexibilität, benutzerdefinierten HTML-Code hinzuzufügen, um erweiterte Funktionen oder Formatierungen zu erstellen.

Schritt 1: Text-Widget hinzufügen

• Gehe zu "Hinzufügen" > "Widgets" > "Text".
• Ziehe das Text-Widget an die gewünschte Position auf deiner Seite.
• Klicke doppelt auf das Widget, um seine Einstellungen zu öffnen.

Schritt 2: HTML-Code einfügen

• Klicke im linken Menü auf "HTML & CSS".
• Aktiviere den Schalter "Benutzerdefinierten HTML-Code hinzufügen".
• Füge deinen HTML-Code in das Feld "HTML-Code" ein.

Schritt 3: HTML-Struktur verstehen

• Text-Widgets unterstützen grundlegende HTML-Elemente wie <p>, <h1> und <a>.
• Du kannst auch CSS-Stile verwenden, um das Erscheinungsbild des Texts anzupassen.
• Verwende den Inline-HTML-Code-Editor, um Live-Vorschauen deines Codes zu erhalten, während du schreibst.

Schritt 4: Vorschau und Veröffentlichen

• Klicke auf "Vorschau", um die Änderungen an deinem Text-Widget zu sehen.
• Klicke auf "Aktualisieren", um die Änderungen zu speichern.
• Veröffentliche deine Website, um die Änderungen live zu schalten.

Tipps

• Verwende Text-Widgets, um benutzerdefinierte Call-to-Actions, Opt-in-Formulare oder andere interaktive Elemente hinzuzufügen.
• Verbinde dich mit Wix Developer Tools, um erweiterte HTML- und CSS-Funktionen freizuschalten.
• Teste deinen HTML-Code gründlich, bevor du ihn auf deiner Website veröffentlichst, um sicherzustellen, dass er wie erwartet funktioniert.

HTML-Code in Bild-Widgets einfügen

Bild-Widgets können über das Wix Bild-Widget benutzerdefinierten HTML-Code aufnehmen. So kannst du HTML-Code verwenden, um Bilder anzupassen oder zusätzliche Funktionen wie Bildlaufleisten oder Lightbox-Popups hinzuzufügen.

Anweisungen

1. Ziehe ein Bild-Widget auf deine Seite.
2. Klicke im Editor auf das Bild und wähle Code bearbeiten.
3. Füge deinen HTML-Code in den Code bearbeiten-Bereich ein.
4. Klicke auf Anwenden.

Möglichkeiten zum Anpassen von Bildern mit HTML-Code

• Bildgröße ändern: Verwende das style-Attribut, um die Breite und Höhe des Bildes festzulegen.
• Bild zuschneiden: Verwende das object-fit-Attribut, um das Bild so zuzuschneiden, dass es in den Widget-Rahmen passt.
• Bild drehen: Verwende das transform-Attribut, um das Bild zu drehen.
• Hover-Effekte hinzufügen: Verwende CSS-Übergänge, um Hover-Effekte wie Vergrößerung oder Einblenden von Bildunterschriften hinzuzufügen.

Zusatzfunktionen mit HTML-Code

• Bildlaufleiste hinzufügen: Füge benutzerdefinierten HTML-Code von einem Drittanbieter wie jQuery hinzu, um eine Bildlaufleiste für große Bilder zu erstellen.
• Lightbox-Popups erstellen: Verwende HTML- und JavaScript, um ein Lightbox-Popup zu erstellen, in dem ein vergrößertes Bild angezeigt wird, wenn du darauf klickst.
• Interaktive Bilder erstellen: Füge HTML- und JavaScript hinzu, um interaktive Bilder wie Hotspots oder Schieberegler zu erstellen.

Tipps

• Teste deinen HTML-Code immer in einem Vorschaufenster, bevor du ihn auf deiner Live-Website veröffentlichst.
• Verwende inline styling, um den HTML-Code im Code bearbeiten-Bereich von Wix anzupassen.
• Du kannst den Wix Code Editor verwenden, um komplexeren HTML-Code hinzuzufügen und anzupassen.

Weitere Möglichkeiten zum Einfügen von HTML-Code

Neben Text- und Bild-Widgets kannst du auch andere Methoden verwenden, um benutzerdefinierten HTML-Code in deine Wix-Website einzufügen.

HTML-Code in Lightbox-Popups einfügen

Du kannst HTML-Code verwenden, um interaktive Elemente in Lightbox-Popups hinzuzufügen, wie z. B. Formulare, Videos oder animierte Inhalte. So geht's:

1. Füge ein Lightbox-Popup zu deiner Seite hinzu.
2. Klicke im Popup-Editor auf das Code-Symbol.
3. Füge deinen HTML-Code in das HTML-Snippet einfügen-Feld ein.

HTML-Code in Wix Stores einfügen

Wenn du einen Wix Store betreibst, kannst du HTML-Code verwenden, um den Kaufprozess anzupassen, z. B. um zusätzliche Produktinformationen oder Sonderangebote hinzuzufügen. So geht's:

1. Gehe zu Meine Website > Wix Stores.
2. Klicke im Dashboard auf Anpassen.
3. Klicke auf HTML & CSS.
4. Füge deinen HTML-Code in das Feld Benutzerdefinierte HTML-Header-Tags oder Benutzerdefinierte HTML-Body-Tags ein.

HTML-Code in benutzerdefinierte Codeblöcke einfügen

Wix bietet benutzerdefinierte Codeblöcke, mit denen du beliebigen Code, einschließlich HTML, in deine Website einfügen kannst. So geht's:

1. Fülle ein HTML-Widget mit deinem HTML-Code.
2. Ändere den Typ des Widgets zu Benutzerdefinierter Codeblock.
3. Speichere die Änderungen.

Anpassen des Inline-HTML-Code-Editors

Der Wix-Inline-HTML-Code-Editor bietet dir die Möglichkeit, Anpassungen vorzunehmen, die deinen Workflow verbessern. Hier sind einige Schritte, die du befolgen kannst:

Schriftgröße und -art ändern

• Klicke auf die Schaltfläche "Optionen" in der oberen rechten Ecke des Editors.
• Wähle "Schriftgröße" und "Schriftart" aus dem Menü aus.
• Passe die Schriftgröße und -art nach deinen Wünschen an.

Farbthema festlegen

• Klicke auf die Schaltfläche "Optionen" und wähle "Farbthema".
• Wähle aus den verfügbaren Farbthemen dasjenige aus, das zu deiner Website passt.
• Das Farbthema ändert die Farben der Syntaxhervorhebung und des Editors.

Code-Vervollständigung aktivieren

• Klicke auf die Schaltfläche "Optionen" und wähle "Code-Vervollständigung".
• Aktiviere die Code-Vervollständigung, um Vorschläge für HTML-Tags und -Attribute zu erhalten.
• Dies kann dir helfen, Fehler zu reduzieren und die Codierung zu beschleunigen.

Syntaxhervorhebung anpassen

• Klicke auf die Schaltfläche "Optionen" und wähle "Syntaxhervorhebung".
• Wähle aus den verfügbaren Syntaxhervorhebungsthemen dasjenige aus, das zu deinen Vorlieben passt.
• Das Syntaxhervorhebungsthema ändert die Farben, die zum Hervorheben verschiedener Codeelemente verwendet werden.

Zusätzliche Funktionen

Neben den oben aufgeführten Anpassungen bietet der Inline-HTML-Code-Editor auch die folgenden Funktionen:

• Code-Vorschau: Zeige eine Live-Vorschau deiner HTML-Änderungen in einem separaten Fenster an.
• Zeilennummern einblenden: Aktiviere Zeilennummern, um das Auffinden und Bearbeiten bestimmter Codezeilen zu erleichtern.
• Schnellsuche: Verwende die Suchleiste, um schnell nach spezifischem Code innerhalb des Editors zu suchen.

Fehlerbehebung bei Problemen mit eingefügtem HTML-Code

Wenn du Schwierigkeiten bei der Anzeige oder Funktionalität von eingefügtem HTML-Code hast, kannst du die folgenden Schritte zur Fehlerbehebung ausführen:

Überprüfe die Syntax

Stelle sicher, dass dein HTML-Code syntaktisch korrekt ist. Ungültiger HTML-Code kann zu Anzeigeproblemen oder Fehlfunktionen führen. Du kannst Dienste wie den HTML-Validator verwenden, um die Syntax deines Codes zu überprüfen.

Überprüfe die Platzierung

HTML-Code muss an Stellen eingefügt werden, die dies unterstützen. Nicht alle Wix-Elemente unterstützen das Einfügen von benutzerdefiniertem HTML-Code. Überprüfe, ob du den HTML-Code an einer unterstützten Stelle eingefügt hast, wie z. B. Text- oder Bild-Widgets.

Behebe Fehlersymbole

Wenn du ein rotes Fehlersymbol im HTML-Code-Editor siehst, weist dies auf einen Fehler hin, der behoben werden muss. Klicke auf das Symbol, um eine detaillierte Fehlermeldung zu erhalten und den Fehler entsprechend zu beheben.

Überprüfe die Sicherheitseinstellungen

Stelle sicher, dass die Sicherheitseinstellungen deiner Website nicht mit dem eingebetteten HTML-Code in Konflikt stehen. Wenn du Inhalte von Drittanbietern einfügst, musst du möglicherweise die Whitelist-Einstellungen deiner Website aktualisieren, um den Zugriff zuzulassen.

Leere den Cache deines Browsers

Manchmal können Probleme durch einen zwischengespeicherten Browser verursacht werden. Leere den Cache und die Cookies deines Browsers und lade deine Website dann neu, um zu prüfen, ob das Problem dadurch behoben wird.

Verwende einen anderen Browser

Wenn du Probleme in einem bestimmten Browser hast, versuche, deine Website in einem anderen Browser zu öffnen. Dies kann helfen, Kompatibilitätsprobleme zu identifizieren und zu lösen.

Erhalte Unterstützung von Wix

Wenn du keine Lösung für das Problem finden kannst, kannst du dich an den Wix-Support wenden. Sie können dir helfen, den Fehler zu identifizieren und eine Lösung zu finden.

Tipps und Best Practices für die Verwendung von HTML-Code in Wix

Beim Einfügen von HTML-Code in deine Wix-Website gibt es einige bewährte Methoden, die du beachten solltest, um eine reibungslose Funktionalität und ein optimales Besuchererlebnis sicherzustellen.

Überprüfe die Kompatibilität von Widgets

Nicht alle Widgets in Wix sind mit der Einfügung von HTML-Code kompatibel. Bevor du HTML-Code in ein Widget einfügst, überprüfe die Widget-Einstellungen, um sicherzustellen, dass es die Verwendung von HTML-Code unterstützt.

Teste deinen Code

Bevor du deinen HTML-Code live schaltest, teste ihn gründlich in der Vorschau, um sicherzustellen, dass er wie erwartet funktioniert. Prüfe auf Fehler, falsche Formatierungen und Kompatibilitätsprobleme.

Verwende den Inline-HTML-Code-Editor

Der Inline-HTML-Code-Editor in Wix bietet eine praktische Möglichkeit, HTML-Code direkt in den Text oder in die Eigenschaften eines Widgets einzufügen. Nutze diese Option, wenn du nur kleine Code фрагmente einfügen möchtest, die du bequem bearbeiten kannst.

Nutze externe Hosting-Dienste für große HTML-Dateien

Wenn du große HTML-Dateien in deine Website einbetten musst, ist es empfehlenswert, externe Hosting-Dienste wie GitHub oder CodePen zu verwenden. Dadurch wird verhindert, dass die Ladezeit deiner Website verlangsamt wird.

Halte deinen Code sauber und organisiert

Verwende lesbaren und gut kommentierten HTML-Code, um die Wartung und Aktualisierung deiner Website zu erleichtern. Dies hilft dir auch, Fehler zu erkennen und zu beheben.

Sei vorsichtig mit JavaScript

Während HTML-Code in Wix unterstützt wird, sind JavaScript-Dateien in den meisten Widgets nicht erlaubt. Wenn du JavaScript verwenden musst, wähle ein Widget, das die Einbettung von JavaScript zulässt, oder verwende eine Drittanbieter-App, die JavaScript-Unterstützung bietet.

Behebung von Problemen

Wenn du Probleme bei der Implementierung von HTML-Code in Wix hast, überprüfe zunächst die Kompatibilität des Widgets. Wenn das Widget HTML-Code unterstützt, überprüfe deinen Code auf Syntaxfehler oder Formatierungsfehler. Du kannst auch versuchen, den Code in einem anderen Browser oder Inkognito-Modus zu testen, um Cache-Probleme auszuschließen.