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.
Warnung
Der Entwicklermodus ist nicht verfügbar, wenn Sie die Website im Flex-Modus im klassischen Editor bearbeiten. Sie müssen den Flex-Modus beenden, um auf den Entwicklermodus zugreifen zu können.
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 sichtbar ist, sollte in der Regel 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.
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:
-
Klicken Sie in der Navigationsleiste auf Entwicklermodus (
). Alternativ können Sie mit der rechten Maustaste auf eine widget klicken, HTML/CSS bearbeiten auswählen und dann unten links auf Entwicklermodus klicken.
-
Nachdem Sie Ihren Code hinzugefügt haben, verwenden Sie die Schaltfläche Speichern und Vorschau, um Ihre Arbeit anzuzeigen.
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.
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.
So platzieren Sie den Code in der Kopfzeile der gesamten Website:
-
Klicken Sie in der Seitenleiste auf SEO & Einstellungen.
-
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.
-
-
Fügen Sie Ihren Code ein, und speichern Sie ihn.
So platzieren Sie den Code in der Kopfzeile einer einzelnen Seite:
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.
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:
-
Klicken Sie in der oberen Leiste auf das Symbol Entwicklermodus (
-
Klicken Sie auf Website HTML / CSS, um die Auswahl zu erweitern.
-
Klicken Sie auf body-end.html.
-
Fügen Sie Ihren Code in die letzte Zeile hier ein.
-
Klicken Sie auf Speichern und Fertig.
So fügen Sie in den Einstellungen Code direkt in die Datei „body-end.html“ ein:
Viele Elemente, einschließlich Zeilen, Spalten und widget bieten die Möglichkeit, auf das HTML/CSS zuzugreifen.
Wenn Sie sich im klassischen Editor im Flex-Modus oder in Editor 2.0 befinden:
-
Sie können das CSS von Flex-Containern (Abschnitt, Spalte, innere Spalte und erweitertes Raster) bearbeiten. Wenn Sie Editor 2.0 verwenden: Sie können auch das CSS von Kopf- und Fußzeilen bearbeiten.
-
Das Design-Panel spiegelt möglicherweise nicht alle benutzerdefinierten Codeänderungen wider. Dies kann zu Stilunterschieden zwischen dem Design-Panel und eingebundenen Elementen führen.
So fügen Sie Code zu einem Element oder widgethinzu:
-
Klicken Sie im klassischen Editor mit der rechten Maustaste auf Ihr widget oder Element, um das Kontextmenü aufzurufen.
-
Wenn Sie sich im Flex-Modus im Classic-Editor oder Editor 2.0 befinden: Klicken Sie, um den Flex-Container, die Kopf- oder Fußzeile auszuwählen.
-
KlickenSie auf HTML/CSS bearbeiten. Wenn Sie sich im Flex-Modus im Classic Editor oder Editor 2.0 befinden, klicken Sieauf das Drei-Punkte-Symbol im schwebenden Menü und wählen Sie dann CSS bearbeiten.
-
Bei Bedarf Code hier hinzufügen oder bearbeiten.
-
Klicken Sie auf Aktualisieren.
Möglicherweise muss der Browser aktualisiert werden, um die Änderung zu sehen.
Der aktuelle Stilaktualisierungsmechanismus unterstützt CSS bei Regeln nicht. Wenn Sie CSS bei Regeln im Flex-Modus oder Editor 2.0 verwenden möchten, müssen Sie diese über den Entwicklermodus hinzufügen, auf den Sie zugreifen können, indem Sie auf das Symbol für den Entwicklermodus in der oberen Navigationsleiste klicken.
Die folgenden at-Regeln werden nur im Entwicklermodus unterstützt:
-
@import: Wird zum Importieren externer Stylesheets verwendet.
-
@media: Definiert Stilregeln für verschiedene Medientypen/Geräte.
-
@font-Gesicht: Ermöglicht das Laden und Verwenden von benutzerdefinierten Schriftarten.
-
@supports: Wendet Stile basierend auf der Funktionsunterstützung an.
-
@keyframes: Definiert Animationen.
-
@page: Wird in ausgelagerten Medien verwendet, z. B. beim Drucken.
-
@namespace: Deklariert einen Namespace für XML-Dokumente.
-
@charset: Gibt die Zeichencodierung an.
-
@counter-Stil: Definiert benutzerdefinierte Zählerstile.
-
@document: (Veraltet) Angewendete Stile auf bestimmte URLs.
-
@layer: Wird in CSS-Kaskadenschichten verwendet.
-
@property: Definiert benutzerdefinierte Eigenschaften mit bestimmten Typen und Anfangswerten.
Im Editor 2.0 und Flex-Modus: Sie können CSS-Klassen zu Flex-Elementen (Abschnitt, Spalte, innere Spalte und erweiterte Raster) hinzufügen. Die Verwendung von CSS-Klassen kann beim Formatieren von Elementen Zeit sparen. Anstatt beispielsweise das Design-Bedienfeld zu verwenden, um den Abstand und die Größe einer einzelnen Spalte zu ändern, können Sie eine CSS-Klasse erstellen und diese Stiländerungen auf eine beliebige Anzahl von Spalten anwenden.
Dieselbe Klasse kann auf mehrere Elemente auf derselben Seite angewendet werden, und mehrere Klassen können auf dasselbe Element angewendet werden.
Hinweis
Sie müssen Zugriff auf den Entwicklermodus haben, um diese Funktion verwenden zu können.
So fügen Sie eine CSS-Klasse hinzu oder bearbeiten sie:
-
Wählen Sie das gewünschte Flex-Element aus (Schnitt, Stütze, innere Spalte oder erweitertes Raster).
-
Wählen Sie im schwebenden Menü oder im Kontextmenü die Option CSS-Klassennamen hinzufügen aus.
-
Geben Sie einen neuen CSS-Klassennamen ein oder wählen Sie einen vorhandenen Klassennamen aus dem Dropdown-Menü aus. Sie können mehrere Klassen auswählen.
-
(Fakultativ) Wenn Sie die CSS-Klasse noch nicht zum Code hinzugefügt haben, klicken Sie auf Entwicklermodus öffnen.
-
Klicken Sie auf Fertig.
So fügen Sie einem Kontaktformular einen Tracking-Code hinzu:
-
Navigieren Sie zu der Seite, auf der sich Ihr Kontaktformular befindet.
-
Klicken Sie auf Ihr Kontaktformular, um die Optionen zu öffnen.
-
Klicken Sie auf Einreichung.
-
Klicken Sie auf Tracking.
-
Fügen Sie hier Ihren Konversions-Tracking-Code ein.
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.
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.
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:
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.
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.
Wenn Sie beim ersten Laden Ihrer Website nicht auf den Editor zugreifen können, versuchen Sie, auf einer neuen Seite auf den Editor zuzugreifen, indem Sie eine andere URL in den Editor-Link eingeben, z . B. https://my. Website Builder.co/home/site/XXXXXXX/about. Wenn Sie dort ankommen, können Sie die Seite, die Probleme verursacht, löschen und erneut hinzufügen oder auf den Entwicklermodus zugreifen, um das Problem im Code der Website zu beheben.
Wenn der Editor defekt ist, versuchen Sie auch, das Öffnen des Editors zu erzwingen, indem Sie die Tastenkombination für den Elementinspektor verwenden. Für Mac lautet die Tastenkombination Befehl+Wahl+C. Für PC lautet die Tastenkombination Strg+Alt+C
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:
-
Duplizieren Sie die Seite mit Ihren Skripten.
-
Ändern Sie die URL in "testing_scripts".
-
Veröffentlichen Sie die Seite auf Ihrer Live-Website, und überprüfen Sie sie.
-
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>