Benutzerdefinierter Code

Der Editor ist insofern flexibel, als er es Ihnen ermöglicht, sowohl bestehenden Code zu ändern als auch Ihren eigenen hinzuzufügen. Auf diese Weise können Sie die Funktionalität der Plattform erweitern und erhalten zusätzliche Funktionen. Sie können beispielsweise ein benutzerdefiniertes Kalender-Widget oder sogar ein benutzerdefiniertes Kontaktformular eines Drittanbieters hinzufügen, um Zahlungen auf Ihrer Website entgegenzunehmen.

Hinzufügen von benutzerdefiniertem Code

Es gibt mehrere Möglichkeiten, wie Sie benutzerdefinierten Code hinzufügen können: über den Entwicklermodus oder das HTML-Widget. Im Folgenden finden Sie Anweisungen, wie Sie auf beide zugreifen können.

Hinweis

Benutzerdefinierter Code, der auf der Website sichtbar sein soll, sollte mit einem HTML-Widget hinzugefügt werden. Benutzerdefinierter Code, der nicht vorhanden ist, sollte normalerweise in den Header eingefügt werden. Im Allgemeinen ist es immer am besten, zuerst der Wegbeschreibung des Autors des Codes zu folgen, bevor Sie ihn zu Ihrer Website hinzufügen.

Entwicklermodus

Im Entwicklermodus können Sie den HTML- und CSS-Code der Website bearbeiten. Benutzerdefinierter Code ermöglicht Anpassungen, die mit dem Drag & Drop-Editor nicht möglich sind. Allerdings sollten ausschließlich fortgeschrittene Benutzer mit guten Webprogrammierkenntnissen benutzerdefinierten Code hinzufügen.

So erhalten Sie Zugriff auf den Entwicklermodus:

  1. Klicken Sie in der Navigationsleiste auf Entwicklermodus (dev_mode_icon.png). Alternativ können Sie mit der rechten Maustaste auf eine widget klicken, HTML/CSS bearbeiten auswählen und dann unten links auf Entwicklermodus klicken.

  2. Nachdem Sie Ihren Code hinzugefügt haben, verwenden Sie die Schaltfläche Speichern und Vorschau, um Ihre Arbeit anzuzeigen.

HTML-Widget

Das HTML-Widget ist die einfachste Methode, um benutzerdefinierten Code zu Ihrer Website hinzuzufügen. Je nachdem, wo Sie Ihr HTML-Widget platzieren, wird es entweder auf allen Seiten Ihrer Website oder nur auf einer einzelnen Seite angezeigt. Wenn Sie das HTML-Widget entweder in der Kopf- oder in der Fußzeile platzieren, wird es auf allen Seiten der Website gleichzeitig platziert. Dies liegt daran, dass jede Website die Kopf- und Fußzeile gemeinsam nutzt. Wenn Sie das HTML-Widget an einer anderen Stelle platzieren, wird es nur im Hauptteil angezeigt.

Klicken Sie im Seitenbereich auf widgetund ziehen Sie den HTML- widget in eine Spalte oder Zeilen in Ihre Website und fügen Sie Ihren Code ein.

Benutzerdefinierter Code in der Kopfzeile

Sie können Code in der Kopfzeile der gesamten Website oder in der Kopfzeile für eine einzelne Seite platzieren.

Hinweis

Apps zur Einwilligungsverwaltung sind nicht in der Lage, zu verhindern, dass Code vor der Einwilligung ausgeführt wird, wenn der Code in den Header-HTML eingefügt wird. Dies liegt daran, dass wir die Struktur und Reihenfolge des Ladens von Inhalten auf der Grundlage von Best Practices für die Leistung auf der Website optimieren. Wir platzieren Skripte und CMP-Banner weiter unten auf der Seite, um die Performance des Hauptinhalts zu verbessern. Aus diesem Grund wird empfohlen, bei der Verwendung einer App zur Einwilligungsverwaltung Code im Body-End zu platzieren.

Website-weiter Header

So platzieren Sie den Code in der Kopfzeile der gesamten Website:

  1. Klicken Sie in der Seitenleiste auf SEO & Einstellungen.

  2. Klicken Sie auf Header-HTML.

    • Kopf HTML. Fügen Sie Inhalt zum Feld "Kopfbereich" hinzu.

    • Text Ende HTML. Fügen Sie benutzerdefiniertes HTML/Javascript direkt vor dem abschließenden tag des Elements <body> für jede Seite der Website hinzu.

  3. Fügen Sie Ihren Code ein, und speichern Sie ihn.

Einseitiger Header

So platzieren Sie den Code in der Kopfzeile einer einzelnen Seite:

  1. Klicken Sie in der Seitenleiste auf Seiten.

  2. Klicken Sie auf der Seite, zu der Sie es hinzufügen möchten, auf das Symbol Einstellungen (Einstellungen-icon.png).

  3. Klicken Sie auf SEO.

  4. Scrollen Sie nach unten zu Header HTML.

  5. Fügen Sie hier Ihren Code ein und sparen Sie.

Mein Code verschwindet, wenn ich ihn im head-Bereich platziere

Es kommt häufig vor, dass Pixel-Tracking-Codes verschwinden, wenn sie in der Kopfzeile platziert werden. Der head-Abschnitt <head> akzeptiert keinen Code, der aus <img> <iframe>, und mehr besteht. Normalerweise werden <link>nur , <script>und <meta>benötigt.

Wenn Sie Code einfügen müssen, der nicht im head-Abschnitt gespeichert wird, fügen Sie ihn in den Header oder in den body-end.html ein. Führen Sie dazu die Schritte im Abschnitt Benutzerdefinierter Code nach dem Öffnen des Textkörpers tag Abschnitt dieses Artikels aus.

Benutzerdefinierter Code nach dem tagdes öffnenden Körpers

Wir verfügen derzeit nicht über eine Funktion, um Code direkt nach dem öffnenden Textkörper-Tag zu platzieren. Sie können den Code aber direkt in die Datei „body-end.html“ einfügen. Es gibt zwei Möglichkeiten, das zu tun: im Entwicklermodus oder in den Einstellungen.

So fügen Sie im Entwicklermodus Code direkt in die Datei „body-end.html“ ein:

  1. Klicken Sie in der oberen Leiste auf das Symbol Entwicklermodus (dev_mode_icon.png).

  2. Klicken Sie auf Website HTML / CSS, um die Auswahl zu erweitern.

  3. Klicken Sie auf body-end.html.

  4. Fügen Sie Ihren Code in die letzte Zeile hier ein.

  5. Klicken Sie auf Speichern und Fertig.

So fügen Sie in den Einstellungen Code direkt in die Datei „body-end.html“ ein:

  1. Klicken Sie in der Seitenleiste auf SEO & Einstellungen.

  2. Klicken Sie auf Head HTML.

  3. Fügen Sie Ihren Code in das HTML-Feld Body End ein.

  4. Klicken Sie auf Speichern.

Benutzerdefinierter Code in Elements oder widget

Viele Elemente, einschließlich Zeilen, Spalten und widget bieten die Möglichkeit, auf das HTML/CSS zuzugreifen.

So fügen Sie Code zu einem Element oder widgethinzu:

  1. Klicken Sie mit der rechten Maustaste auf Ihr widget oder Element, um das Kontextmenü aufzurufen.

  2. Klicken Sie auf HTML/CSS bearbeiten. Wenn Sie sich im Flex-Modus im Classic Editor oder Editor 2.0 befinden, klicken Sie auf das Drei-Punkte-Symbol im schwebenden Menü und wählen Sie dann CSS bearbeiten.

  3. Bei Bedarf Code hier hinzufügen oder bearbeiten.

  4. Klicken Sie auf Aktualisieren.

Möglicherweise muss der Browser aktualisiert werden, um die Änderung zu sehen.

Tracking-Code zum Kontaktformular hinzufügen

So fügen Sie einem Kontaktformular einen Tracking-Code hinzu:

  1. Navigieren Sie zu der Seite, auf der sich Ihr Kontaktformular befindet.

  2. Klicken Sie auf Ihr Kontaktformular, um die Optionen zu öffnen.

  3. Klicken Sie auf Einreichung.

  4. Klicken Sie auf Tracking.

  5. Fügen Sie hier Ihren Konversions-Tracking-Code ein.

Empfohlene Richtlinien für benutzerdefinierten Code

Im Folgenden finden Sie empfohlene Richtlinien, die Sie bei der Arbeit mit benutzerdefiniertem Code und dem Entwicklermodus befolgen sollten.

Allgemeine Richtlinien

  • Erstellen Sie immer ein Backup Ihrer Website, bevor Sie benutzerdefinierten Code hinzufügen.

  • Bevor Sie Code in den Header einfügen, testen Sie zuerst auf einer separaten Test-Website. Sie können dies tun, indem Sie ein Duplikat Ihrer Website erstellen, um benutzerdefinierten Code zu testen.

  • Für Code, der auf einer Seite platziert werden muss, erstellen Sie eine Testseite und platzieren Sie den Code dort.

  • Die Vorschau verwendet HTTPS, während Ihre Live-Website dies möglicherweise nicht tut. Dadurch wird benutzerdefinierter Code häufig beschädigt.

  • Platzieren Sie Inhalte innerhalb der Spalten. Unsere responsiven Websites basieren auf einer Zeilen-Spalten-Struktur. Das bedeutet, dass jede Zeile eine Spalte enthält, in welcher wiederum der Inhalt ist. Achten Sie daher beim Hinzufügen bzw. Bearbeiten Ihres HTML-Codes darauf, dass dies innerhalb einer Spalte erfolgt.

Spezifische Richtlinien für den Entwicklermodus

  • Platzieren Sie Inhalte innerhalb der Spalten. Unsere responsiven Websites basieren auf einer Zeilen-Spalten-Struktur. Das bedeutet, dass jede Zeile eine Spalte enthält, in welcher wiederum der Inhalt ist. Achten Sie daher beim Hinzufügen bzw. Bearbeiten Ihres HTML-Codes darauf, dass dies innerhalb einer Spalte erfolgt.

  • Verändern Sie die Klassen nicht. Der Editor benötigt zahlreiche Klassen, die auf Elemente angewendet werden. Verändern Sie vorhandene Klassen (diese beginnen in der Regel mit „dm“) nicht. Wenn Sie Klassen entfernen, erzielen Sie bei der Vorschau möglicherweise nicht das gewünschte Ergebnis.

  • Beachten Sie die Klassengrößen. Spalten verfügen über einen Größenwert, der als Klasse hinzugefügt wird, z. B. „large-6“ oder „small-12“. Hiermit wird die Größe der Spalten innerhalb der Zeile festgelegt. Verändern Sie diese Werte nicht, da diese für die Größenanpassung auf unterschiedlichen Geräten entscheidend sind.

  • Vermeiden Sie nach Möglichkeit das Bearbeiten von Erweiterungen. Im HTML-Code sehen Sie Platzhalter von Elementen, die sich bereits auf der Seite befinden. Wenn Sie können, vermeiden Sie es, diese zu bearbeiten, insbesondere die darin enthaltenen Datenwerte. Das Bearbeiten dieser kann die widget beschädigen, sobald Sie zum Editor zurückkehren.

Problembehandlung bei benutzerdefiniertem Code

Wenn Sie Ihrer Website benutzerdefinierten Code hinzugefügt haben, der sich auf deren Leistung auswirkt oder Sie daran hindert, sie zu bearbeiten, ist dies höchstwahrscheinlich darauf zurückzuführen, dass der Code nicht korrekt formatiert oder nicht HTTPS-konform ist.

Im Folgenden finden Sie Lösungen zur Fehlerbehebung für Probleme, die bei der Arbeit mit benutzerdefiniertem Code auftreten können.

Wiederherstellen eines Backups Ihrer Website

Stellen Sie eine Sicherung Ihrer Website bis zu einem Punkt wieder her, an dem der benutzerdefinierte Code hinzugefügt wurde (auch wenn Sie keine Sicherung erstellt haben, erstellt der Editor eine Sicherung für Sie, wenn Sie veröffentlichen oder in den Entwicklermodus wechseln).

So stellen Sie eine Sicherung wieder her:

  1. Klicken Sie im Seitenbereich auf SEO & Einstellungen und dann auf Website sichern.

  2. Klicken Sie auf den Link Wiederherstellen neben der Sicherung, die Sie wiederherstellen möchten.

  3. Bestätigen Sie Ihre Auswahl, indem Sie auf Wiederherstellen klicken.

Spezifische Fehlermeldungen

Im Folgenden finden Sie spezifische Fehlermeldungen und deren Bedeutung:

  • DUPLICATE_ID. Jedes Element muss über eine eindeutige ID verfügen.

  • INVALID_ELEMENT_LOCATION. Alle Elemente müssen in einer Spalte stehen, die wiederum in einer Zeile stehen muss.

  • BAD_PROPORTION. Spalten in einer Zeile müssen zusammen 12 ergeben.

  • INVALID_CLASS_FOR_ELEMENT. Einem ungültigen Element wurde eine Website Builder Klasse hinzugefügt.

Code funktioniert nicht

Wenn Sie Code haben, der auf der Website nicht funktioniert, liegt das höchstwahrscheinlich daran, dass der Code nicht korrekt formatiert ist oder nicht über HTTPS läuft.

Wenn Sie irgendwelche Links in Ihrem Code haben (http:// oder //) und Ihre Website HTTPS verwendet oder Sie in der Vorschau sind, dann müssen Sie das ändern, sodass es stattdessen https:// ist. Der Grund dafür ist, dass der Nicht-HTTPS-Code bei einer mit HTTPS geladenen Verbindung (Seitenvorschau, Editor usw.) nicht funktioniert.

Problem mit der Seitengeschwindigkeit

Die Optimierung der Seitengeschwindigkeit wirkt sich darauf aus, wie bestimmte Skripte ausgeführt werden. Wir führen die PageSpeed-Optimierung auf den meisten Seiten durch, was zu Problemen mit Ihrem benutzerdefinierten Code führen kann.

So ermitteln Sie, ob Ihr benutzerdefinierter Code von einem Problem mit der Seitengeschwindigkeit betroffen ist:

  1. Duplizieren Sie die Seite mit Ihren Skripten.

  2. Ändern Sie die URL in "testing_scripts".

  3. Veröffentlichen Sie die Seite auf Ihrer Live-Website, und überprüfen Sie sie.

  4. Wenn Ihr Code auf dieser Seite funktioniert, wenden Sie sich an den Support, um die Optimierung der Seitengeschwindigkeit für Ihre Website zu deaktivieren.

Wenn Sie ein Skript verwenden, können Sie auch versuchen, sicherzustellen, dass Ihr Skript asynchron ausgeführt wird – es ist nicht garantiert, aber es kann manchmal das Problem mit Skripten beheben, die im Browser nicht richtig ausgeführt werden.

Um die asynchrone Ausführung von Skripten zu aktivieren, ändern Sie Ihren Code wie folgt:

  • Alter Code: <script src="https://example.com/script.js"></script>

  • Neuer Code: <script src="https://example.com/script.js" async defer></script>