Zum Hauptinhalt gehen
DE Español Français Italiano Português

Benutzerdefinierter Code

Verfügbar auf Pläne für Teams und höher.

Der Editor ist flexibel, da Sie sowohl vorhandenen Code ändern als auch Ihren eigenen hinzufügen können. 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 Site im Flex-Modus im Classic Editor bearbeiten. Sie müssen den Flex-Modus verlassen, um auf den Entwicklermodus zuzugreifen.

So fügen Sie benutzerdefinierten Code hinzu

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

Anmerkung

  • Benutzerdefinierter Code, der auf der Website sichtbar sein soll, sollte mithilfe eines HTML-Widgets hinzugefügt werden. Benutzerdefinierter Code, der nicht sichtbar ist, sollte normalerweise in die Kopfzeile eingefügt werden. Im Allgemeinen ist es immer am besten, zuerst den Anweisungen des Codeschreibers zu folgen, bevor Sie ihn zu Ihrer Website hinzufügen.

  • Sie können keine PHP-Dateien hochladen oder ausführen. Serverseitige Sprachen wie PHP werden nicht unterstützt, da die Plattform keine serverseitige Ausführung oder keinen Dateisystemzugriff bietet

Entwickler-Modus

Im Entwicklermodus können Sie den HTML- und CSS-Code Ihrer Website bearbeiten und ändern. Das Hinzufügen von benutzerdefiniertem Code ermöglicht erweiterte Anpassungen, die mit dem Drag-and-Drop-Editor nicht möglich sind. Dies sollte jedoch nur von fortgeschrittenen Benutzern mit soliden Kenntnissen des Webentwicklungscodes durchgeführt werden.

Um auf den Entwicklermodus zuzugreifen, klicken Sie, um das Hamburger-Menü im Editor zu öffnen, und wählen Sie Dev-Modus.

dev-mode.png

HTML-Widget

Das HTML-Widget ist die einfachste Methode, um Ihrer Website benutzerdefinierten Code hinzuzufügen. Je nachdem, wo Sie Ihr HTML-Widget platzieren, erscheint es entweder auf allen Seiten Ihrer Website oder nur auf einer einzelnen Seite. Wenn Sie das HTML-Widget entweder in der Kopf- oder 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, erscheint es nur im Hauptteil

Um ein HTML-Widget hinzuzufügen:

  1. Klicken Sie im Seitenbereich auf Hinzufügenund klicken Sie dann auf Elemente.

  2. Suche nach HTML, dann ziehen Sie das Widget per Drag & Drop in eine Spalte oder Zeile auf Ihrer Website und fügen Sie dann Ihren Code ein.

Benutzerdefinierter Code in der Kopfzeile

Sie können Code in den Header der gesamten Website oder in den Header für eine einzelne Seite einfügen.

Anmerkung

Apps zur Verwaltung von Einwilligungen können nicht verhindern, dass Code vor der Zustimmung ausgeführt wird, wenn der Code im Header-HTML platziert wird. Das liegt daran, dass wir die Struktur und Reihenfolge, in der Inhalte geladen werden, 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 Leistung der Hauptinhalte zu verbessern. Aus diesem Grund wird empfohlen, bei der Verwendung einer App zur Verwaltung von Einwilligungen den Code in das Textfeld einzufügen

Seitenweiter Header

Um den Code in den Header der gesamten Website einzufügen:

  1. Klicken Sie im Seitenbereich auf Mehr, dann klicken Sie Einstellungen.

  2. Klicken Sie Header-HTML.

    • Kopf HTML. Fügen Sie dem Feld für den Kopfbereich Inhalt hinzu.

    • Body End HTML. Add custom HTML/Javascript just before the closing tag of the <body> element for each page in the site.

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

Einzelseiten-Header

Um den Code in die Kopfzeile einer einzelnen Seite zu platzieren:

  1. Klicken Sie im Seitenbereich auf Seiten.

  2. Klicken Sie auf der Seite, zu der Sie es hinzufügen möchten, aufEinstellungenSymbol (Gray gear icon named settings icon).

  3. Klicken SieSEO.

  4. Scrollen Sie nach unten zuHeader-HTML.

  5. Füge deinen Code hier ein und speichere.

Mein Code verschwindet, wenn ich ihn im Kopfbereich platziere

It is common for pixel tracking codes to disappear when placed in the header. The head section <head> does not accept any code that is <img>, <iframe>, and more. It normally only takes <link>, <script>, and <meta>.

Wenn Sie Code einfügen müssen, der nicht im Kopfbereich gespeichert wird, fügen Sie ihn in die Kopfzeile oder in die body-end.html ein. Folgen Sie dazu den Schritten im Benutzerdefinierter Code nach dem ersten Body-Tag Abschnitt dieses Artikels.

Benutzerdefinierter Code nach dem öffnenden Body-Tag

Wir haben derzeit keine Funktion, um Code direkt nach dem öffnenden Body-Tag zu platzieren. Sie können Code jedoch direkt in die Datei body-end.html einfügen. Dazu gibt es zwei Möglichkeiten: im Entwicklermodus oder in den Einstellungen.

Um Code im Entwicklermodus direkt in die Datei body-end.html einzufügen:

  1. Klicken Sie, um das Hamburger-Menü im Editor zu öffnen, und wählen Sie dann Dev-Modus.

  2. Klicken SieSeite HTML/CSSum die Auswahl zu erweitern.

  3. Klicken Siebody-end.html.

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

  5. Klicken Sie Speichern und Erledigt.

Um Code direkt in die Datei body-end.html in den Einstellungen einzufügen:

  1. Klicken Sie im Seitenbereich auf Mehr, dann klicken Sie Einstellungen.

  2. Klicken Sie Kopf HTML.

  3. Fügen Sie Ihren Code in dasHTML-Code am Ende des TextteilsFeld.

  4. Klicken SieSpeichern.

Benutzerdefinierter Code in Elementen oder Widgets

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

Wenn Sie sich im Classic Editor mit 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 im Editor 2.0 sind: Sie können auch das CSS von Kopf- und Fußzeilen bearbeiten.

  • Das Designfenster spiegelt möglicherweise nicht alle benutzerdefinierten Codeänderungen wider. Dies kann zu Stilunterschieden zwischen dem Designbereich und den Inline-Elementen führen.

Um Code zu einem Element oder Widget hinzuzufügen:

  1. Klicken Sie im Classic-Editor mit der rechten Maustaste auf Ihr Widget oder Element, um das Kontextmenü aufzurufen.

  2. Wenn Sie sich im Classic-Editor oder Editor 2.0 im Flex-Modus befinden: Klicken Sie, um den Flex-Container, die Kopf- oder Fußzeile auszuwählen.

  3. CleckenHTML/CSS bearbeiten. Wenn Sie sich im Classic Editor oder Editor 2.0 im Flex-Modus befinden, cKlicken Sie im schwebenden Menü auf das Dreipunktsymbol und wählen SieCSS bearbeiten.

  4. Bearbeiten oder fügen Sie hier nach Bedarf Code hinzu.

  5. Klicken Sie Aktualisieren.

Der Browser muss möglicherweise aktualisiert werden, um die Änderung zu sehen.

CSS-Einschränkungen im Editor 2.0 und im Flex-Modus

Der aktuelle Style-Aktualisierungsmechanismus unterstützt CSS bei Regeln nicht. Wenn Sie CSS bei rules verwenden möchten im Flex-Modus oder Editor 2.0, Sie müssen sie im Entwicklermodus hinzufügen, auf den Sie zugreifen können, indem Sie auf das Entwicklermodus-Symbol in der oberen Navigationsleiste klicken.

Die folgenden AT-Regeln werden nur im Entwicklermodus unterstützt:

  • @import: Wird verwendet, um externe Stylesheets zu importieren.

  • @media: Definiert Stilregeln für verschiedene Medientypen/Geräte.

  • @font -face: Ermöglicht das Laden und Verwenden benutzerdefinierter Schriftarten.

  • @supports: Wendet Stile an, die auf der Funktionsunterstützung basieren.

  • @keyframes: Definiert Animationen.

  • @page: Wird in seitenweisen Medien verwendet, z. B. beim Drucken.

  • @namespace: Deklariert einen Namespace für XML-Dokumente.

  • @charset: Gibt die Zeichenkodierung an.

  • @counter -style: Definiert benutzerdefinierte Zählerstile.

  • @document: (Veraltet) Stile auf bestimmte URLs angewendet.

  • @layer: Wird in CSS Cascade Layers verwendet.

  • @property: Definiert benutzerdefinierte Eigenschaften mit bestimmten Typen und Anfangswerten.

CSS-Klassen für Flex-Elemente (Editor 2.0 und Flex-Modus)

Im Editor 2.0 und im Flex-Modus: Sie können Flexelementen CSS-Klassen hinzufügen (Abschnitt, Spalte, innere Spalte und erweiterte Raster). Die Verwendung von CSS-Klassen kann beim Stylen von Elementen Zeit sparen. Anstatt beispielsweise das Designfenster 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.

Anmerkung

Sie müssen Zugriff auf den Entwicklermodus haben, um diese Funktion nutzen zu können.

Um eine CSS-Klasse hinzuzufügen oder zu bearbeiten:

  1. Wählen Sie das gewünschte Flex-Element (Abschnitt, Spalte, innere Spalte oder erweitertes Raster) aus.

  2. Wählen Sie entweder im schwebenden Menü oder im Kontextmenü Fügen Sie einen CSS-Klassennamen hinzu.

  3. Geben Sie einen neuen CSS-Klassennamen ein oder wählen Sie einen vorhandenen Klassennamen aus dem Dropdownmenü aus. Sie können mehrere Klassen auswählen

  4. (Fakultativ) Wenn Sie die CSS-Klasse noch nicht zum Code hinzugefügt haben, klicken Sie auf Öffnen Sie den Dev-Modus.

  5. Klicken Sie Erledigt.

Tracking-Code zum Kontaktformular hinzufügen

So fügst du einem Kontaktformular einen Tracking-Code hinzu:

  1. Navigiere zu der Seite, auf der sich dein Kontaktformular befindet.

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

  3. Klicken SieEinreichung.

  4. Klicken SieNachverfolgung.

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

Empfohlene Richtlinien für benutzerdefinierten Code

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

Allgemeine Richtlinien

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

  • Wenn Sie mit benutzerdefiniertem Code arbeiten, verwenden Sie immer Ihren Editor über diesen Link: http://my.duda.co?nossl

  • Sie können eine Vorschau des Codes außerhalb eines Iframes anzeigen, indem Sie den Editor-Link von https://my.duda.co/home/ed/site/xxxxx/page in https://my.duda.co/site/xxxxx/page?preview=true ändern

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

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

  • Vorschau verwendet HTTPS, Ihre Live-Site möglicherweise nicht. Dadurch wird benutzerdefinierter Code häufig beschädigt.

  • Achte darauf, dass du innerhalb der Spalten bleibst. Unsere responsiven Websites basieren auf einer Zeilen-Spalten-Struktur. Das bedeutet, dass jede Zeile Spalten enthält, die letztendlich den Inhalt enthalten. Wenn Sie Ihren eigenen HTML-Code hinzufügen oder bearbeiten, stellen Sie sicher, dass er sich in einer Spalte befindet.

Spezifische Richtlinien für den Entwicklermodus

  • Achte darauf, dass du innerhalb der Spalten bleibst. Unsere responsiven Websites basieren auf einer Zeilen-Spalten-Struktur. Das bedeutet, dass jede Zeile Spalten enthält, die letztendlich den Inhalt enthalten. Wenn Sie Ihren eigenen HTML-Code hinzufügen oder bearbeiten, stellen Sie sicher, dass er sich in einer Spalte befindet.

  • Lass die Klassen an Ort und Stelle. Der Editor stützt sich auf die vielen Klassen, die Elementen hinzugefügt werden. Wenn Sie eine vorhandene Klasse sehen (die normalerweise mit dm beginnt), lassen Sie sie unverändert. Wenn du Klassen entfernst, sieht die Seite möglicherweise nicht mehr so aus, als ob sie in der Vorschau angezeigt wird.

  • Beachten Sie die Klassengrößen. Spalten haben einen Größenwert, der als Klasse hinzugefügt wird, z. B. Large-6 oder small-12. Dies bestimmt die Größe der Spalten in dieser Zeile. Sie sollten diese an Ort und Stelle belassen, da sie der Kern der Größenänderung der Zeile auf verschiedenen Geräten sind.

  • Vermeiden Sie nach Möglichkeit die Bearbeitung von Erweiterungen. Im HTML werden Sie Platzhalter für Elemente auf der Seite bereits sehen. Wenn möglich, vermeiden Sie es, diese zu bearbeiten, insbesondere die darin enthaltenen Datenwerte. Wenn Sie diese bearbeiten, können die Widgets kaputt gehen, wenn Sie zum Editor zurückkehren

Problembehandlung bei benutzerdefiniertem Code

Wenn du deiner Website benutzerdefinierten Code hinzugefügt hast, der die Leistung beeinträchtigt oder dich daran hindert, sie zu bearbeiten, liegt das höchstwahrscheinlich daran, dass der Code nicht richtig formatiert ist oder nicht HTTPS-konform ist.

Achtung

Der Duda-Support kann keine Probleme mit benutzerdefiniertem Code beheben.

  • Benutzerdefinierter Code ist sehr unvorhersehbar. Es gibt viele Faktoren, warum Ihr benutzerdefinierter Code möglicherweise nicht mit unserer Plattform funktioniert. Wenn Sie Hilfe benötigen, damit der benutzerdefinierte Code auf Ihrer Website funktioniert, lohnt es sich möglicherweise, einen zu beauftragenDuda Experteum Ihnen zu helfen, Ihren Code auf Ihrer Website zum Laufen zu bringen.

  • Apps zur Einwilligungsverwaltung können nicht verhindern, dass Code vor der Zustimmung ausgeführt wird, wenn der Code im Header-HTML platziert wird. Das liegt daranDudaoptimiert die Struktur und Reihenfolge, in der Inhalte geladen werden, basierend auf den Best Practices für die Leistung auf der Website. Wir platzieren Skripte und CMP-Banner weiter unten auf der Seite, um die Leistung der Hauptinhalte zu verbessern. Aus diesem Grund wird empfohlen, bei der Verwendung einer App zur Verwaltung von Einwilligungen den Code in das Textfeld einzufügen

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

Stellen Sie ein Backup Ihrer Website wieder her

Stelle ein Backup deiner Website bis zu einem Zeitpunkt wieder her, an dem der benutzerdefinierte Code hinzugefügt wurde (auch wenn du kein Backup erstellt hast, erstellt der Editor eines für dich, wenn du veröffentlichst oder in den Entwicklermodus wechselst).

Um ein Backup wiederherzustellen:

  1. Klicken Sie im Seitenbereich auf Mehr, dann klicken Sie Einstellungen.

  2. Klicken Sie Sicherung der Website.

  3. Klicken Sie aufWiederherstellenLink neben dem Backup, das Sie wiederherstellen möchten.

  4. Bestätigen Sie Ihre Auswahl mit einem KlickWiederherstellen.

Spezifische Fehlermeldungen

Im Folgenden finden Sie spezifische Fehlermeldungen und deren Bedeutung:

  • DUPLICATE_ID. Jedes Element muss eine eindeutige ID haben.

  • INVALID_ELEMENT_LOCATION. Alle Elemente müssen sich in einer Spalte befinden, die sich in einer Zeile befinden muss.

  • BAD_PROPORTION. Die Summe der Spalten in einer Reihe muss 12 ergeben.

  • INVALID_CLASS_FOR_ELEMENT.DudaKlasse wurde zu einem ungültigen Element hinzugefügt.

Code funktioniert nicht

Wenn du Code hast, der auf der Website nicht funktioniert, liegt das höchstwahrscheinlich daran, dass der Code nicht richtig formatiert ist oder kein HTTPS ist.

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

Der Editor kann nicht geöffnet werden

Wenn Sie beim ersten Laden Ihrer Website nicht auf den Editor zugreifen können, versuchen Sie, auf einer neuen Seite auf Ihren Editor zuzugreifen, indem Sie eine andere URL in Ihren Editor-Link eingeben, z. B. https://my.Duda.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 mit dem Code der Website zu beheben

Oder, wenn der Editor kaputt ist, versuchen Sie, 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 Abkürzung Strg+Alt+C

Laden Sie die ungesicherte Version des Editors

Laden Sie die ungesicherte Version des Editors, um Skripte zu laden, die nicht über eine sichere Verbindung eingebettet wurden. Loggen Sie sich dazu http://my.Duda.co?nossl

Problem mit der Seitengeschwindigkeit

Optimierung der Seitengeschwindigkeit wirkt sich darauf aus, wie bestimmte Skripts 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 stellst du fest, ob dein 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 und überprüfen Sie dann die Seite auf Ihrer Live-Website.

  4. Wenn dein Code auf dieser Seite funktioniert, kontaktiere den Support, um die Optimierung der Seitengeschwindigkeit für deine Website zu deaktivieren.

Wenn Sie ein Skript verwenden, können Sie auch versuchen, sicherzustellen, dass Ihr Skript asynchron ausgeführt wird. Dies ist nicht garantiert, kann aber manchmal das Problem lösen, dass Skripts im Browser nicht ordnungsgemäß ausgeführt werden.

Um Async für Skripts 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>

Was this article helpful?

Zurück an den Anfang