Benutzerdefinierter Code einbetten - Webflow Hilfe

Last updated on 10/23/2025@mrbirddev

Fügen Sie benutzerdefinierte Codeblöcke zu Ihrer Website hinzu, um alle Arten von benutzerdefinierten Funktionen freizuschalten.

Das Code Embed-Element unterstützt nur HTML, CSS in <style>-Tags und JS in <script>-Tags. Sie können keine serverseitigen Sprachen (z. B. Perl, PHP, Python, Ruby) in einem Code Embed-Element integrieren.

Benutzerdefinierter Code ist eine erweiterte Änderung, die mit der zugrunde liegenden Funktionalität von Webflow in Konflikt geraten kann. Daher kann Webflow die Funktionalität oder vollständige Kompatibilität von benutzerdefiniertem Code nicht garantieren. Darüber hinaus kann unser Support-Team keine direkte Hilfe bei der Einrichtung oder Fehlerbehebung von benutzerdefiniertem Code leisten, da diese Themen außerhalb des Umfangs unserer Kundensupport-Richtlinien liegen. Wenn Sie Probleme mit benutzerdefiniertem Code haben, lassen Sie es uns bitte im Webflow-Forum wissen, wo die gesamte Webflow-Community (einschließlich des Personals) zusätzliche Hilfe und Ressourcen bereitstellen kann.

So fügen Sie ein Code Embed-Element hinzu

Sie können Drittanbieter-Code oder Ihren eigenen benutzerdefinierten Code überall in Ihrem Design oder in einem Rich-Text-Element einbetten.

Benutzerdefinierter Code in einem Code Embed-Element darf 50.000 Zeichen nicht überschreiten. Wenn der Code, den Sie einbetten möchten, länger ist, können Sie ihn auf einem anderen Server speichern und das Skript in Ihrem Embed referenzieren. Sie können Ihren benutzerdefinierten Code auch mit einem Drittanbieter-Tool minifizieren oder den Code in mehrere Embed-Elemente aufteilen (vorausgesetzt, dies bricht keine JavaScript-Funktionen).

So fügen Sie benutzerdefinierten Code direkt zu Ihrem Design hinzu

Kopieren Sie den Code, den Sie einbetten möchten, in Ihre Zwischenablage
Öffnen Sie das Hinzufügen-Panel und fügen Sie ein Code Embed-Element zur Webflow-Leinwand hinzu
Fügen Sie den benutzerdefinierten Code ein, den Sie in Schritt 1 kopiert haben
Speichern und schließen Sie das Modal

Wenn Ihr benutzerdefinierter Code Öffnungs- und/oder Schließtags hat, stellen Sie sicher, dass Sie diese hinzufügen, um sicherzustellen, dass Ihr Code wie erwartet funktioniert. Fügen Sie außerdem keine <html>, <body> oder <head> Tags in Ihren benutzerdefinierten Code ein, da sonst Ihre Website/Layout beschädigt wird.

Zeilenumbruch ist standardmäßig aktiviert, um das Anzeigen und Bearbeiten von Code zu erleichtern. Sie können diese Einstellung jedoch deaktivieren, indem Sie das Kontrollkästchen Zeilenumbruch im Code-Editor deaktivieren. Sie können auch die Vollbildbearbeitung aktivieren, indem Sie auf das Symbol „maximieren“ klicken.

Profi-Tipp: Wenn Sie denselben eingebetteten Inhalt auf Ihrer gesamten Website wiederverwenden möchten, können Sie Komponenten verwenden, um Ihr Code-Embed-Element in eine wiederverwendbare Komponente zu verwandeln.

So fügen Sie benutzerdefinierten Code in ein Rich-Text-Element ein

Kopieren Sie den Code, den Sie einbetten möchten, in Ihre Zwischenablage
Platzieren Sie den Cursor in das Rich-Text-Element, in das Sie Ihren benutzerdefinierten Code einfügen möchten
Klicken Sie auf das „Plus“-Symbol, um das Einfügen-Menü zu öffnen, und klicken Sie auf die Benutzerdefinierter Code-Schaltfläche
Fügen Sie den benutzerdefinierten Code ein, den Sie in Schritt 1 kopiert haben

So verwenden Sie dynamische Inhalte in Ihrem benutzerdefinierten Code

Sie können Sammlungsfelder in eingebetteten Code integrieren, um Informationen dynamisch für verschiedene Verwendungszwecke abzurufen. Erfahren Sie mehr: Siehe Dynamische Einbettungen im Webflow Help Center.

So bearbeiten Sie das Code-Embed-Element

Es gibt mehrere Möglichkeiten, den Code-Editor zu öffnen und den Code in einem Code-Embed-Element zu bearbeiten. Sie können:

Wählen Sie das Code-Embed-Element auf der Leinwand aus und doppelklicken Sie
Wählen Sie das Code-Embed-Element auf der Leinwand aus und drücken Sie die Eingabetaste
Wählen Sie das Code-Embed-Element auf der Leinwand aus und klicken Sie auf das Einstellungs-„Zahnrad“-Symbol
Wählen Sie das Code-Embed-Element auf der Leinwand aus und klicken Sie im Einstellungsbereich unter Code-Embed-Einstellungen auf Code-Editor öffnen

Gut zu wissen: Wenn Sie Ihr Code Embed-Element nicht auf der Leinwand sehen können, finden und wählen Sie es im Navigator-Panel aus. Öffnen Sie dann das Einstellungen-Panel und klicken Sie unter Code Embed-Einstellungen auf Code-Editor öffnen, um Ihren Code zu bearbeiten.

So legen Sie Dimensionen für das Code Embed-Element fest

Wenn der benutzerdefinierte Code im Code Embed-Element keine Größen oder Dimensionen explizit festlegt, kann der Inhalt oft die volle Breite des übergeordneten Elements einnehmen. Sie können möglicherweise height="100%" width="100%" in Ihrem benutzerdefinierten Code anhängen, was es Ihnen ermöglicht, die Breite und Höhe des Embed-Elements und des Inhalts über das Stil-Panel anzupassen.

So sehen Sie sich den eingebetteten Inhalt an

Benutzerdefinierter Code, der in <iframe></iframe> oder <style>-Tags eingebettet ist, zeigt eine Vorschau auf der Leinwand oder innerhalb Ihres Rich-Text-Elements an, aber einige Code-Embeds können nur auf der Live-Website angezeigt werden. Jedes Mal, wenn ein Tag im Code-Editor verwendet wird, sehen Sie einen Platzhalter für dieses Element im Designer.

Sobald Sie eine Vorschau anzeigen, Ihre Website veröffentlichen oder exportieren, wird das Skript und der benutzerdefinierte Code an der Stelle gerendert, an der Sie es platziert haben.

Die Effekte des benutzerdefinierten Codes erscheinen im Vorschaumodus, aber sie werden erst live, wenn Ihre Website veröffentlicht ist.

Um benutzerdefinierte Skripte von der Vorschau und Kommentarmodi auszuschließen, umwickeln Sie Ihren Code mit folgendem HTML-Kommentar:
All code here will be excluded

Mehr erfahren: Siehe Use .webflow.io als Staging-Domain für Tests und Feedback.

FAQ und Tipps zur Fehlerbehebung

Kann ich serverseitige Sprachen in einem Code Embed-Element verwenden? Sie können keine serverseitigen Sprachen (z.B. Perl, PHP, Python, Ruby) in einem Code Embed-Element integrieren. Das Code Embed-Element unterstützt nur HTML, CSS in <style>-Tags und JS in <script>-Tags.

Kann ich das 50.000-Zeichen-Limit für das Code-Embed-Element erhöhen?
Benutzerdefinierter Code im Code-Embed-Element darf 50.000 Zeichen nicht überschreiten. Wenn der einzubettende Code länger ist, können Sie ihn auf einem anderen Server speichern und das Skript in Ihrem Embed referenzieren. Sie können auch Ihren benutzerdefinierten Code mit einem Drittanbieter-Tool minimieren oder den Code in mehrere Code-Embed-Elemente aufteilen (sofern dies keine JavaScript-Funktionen beeinträchtigt).

Hilfe! Mein benutzerdefinierter Code funktioniert nicht!
Überprüfen Sie, ob Ihr Code die entsprechenden Öffnungs- und/oder Schlusstags enthält und keine <html>-, <body>- oder <head>-Tags enthält.

Seit August 2020 enthalten neu veröffentlichte Webflow-Sites jQuery v3.5.1. Das Importieren anderer jQuery-Versionen mit benutzerdefiniertem Code kann Konflikte und unerwartetes Verhalten auf Ihrer Site verursachen. Skripte, die DOM-Ereignisse wie onClick, onHover usw. beeinflussen, können ebenfalls unerwartetes Verhalten verursachen.

Es ist wichtig zu beachten, dass benutzerdefinierter Code eine erweiterte Modifikation ist, die mit der zugrunde liegenden Funktionalität von Webflow in Konflikt geraten kann. Daher kann Webflow die Funktionalität oder vollständige Kompatibilität von benutzerdefiniertem Code nicht garantieren.

Unser Support-Team kann keine direkte Hilfe bei der Einrichtung oder Fehlerbehebung von benutzerdefiniertem Code leisten, da diese Themen außerhalb des Umfangs unserer Kundenunterstützungsrichtlinie liegen. Wenn Sie auf Probleme mit benutzerdefiniertem Code stoßen, lassen Sie es uns bitte im Webflow-Forum wissen, wo die gesamte Webflow-Community (einschließlich des Personals) zusätzliche Hilfe und Ressourcen bereitstellen kann.

Zurück zur Webflow-Hilfe

Last updated on 10/23/2025@mrbirddev