Webflow wird weithin als No-Code-Entwicklungsplattform vermarktet, was als sein größter Vorteil angesehen wird. Dies bedeutet jedoch nicht, dass Sie Ihrem Design keine Codes hinzufügen können.
Obwohl Webflow eine breite Palette an Designoptionen bietet, möchten Sie Ihre Website vielleicht noch weiter anpassen. Hier kommen benutzerdefinierte Codes ins Spiel, da deren Hinzufügen weitere Funktionalität ermöglicht.
Lesen Sie weiter, um zu erfahren, wie Sie in Webflow einen benutzerdefinierten Code hinzufügen.
Einschränkungen beim Hinzufügen von benutzerdefiniertem Code
Bevor Sie lernen, wie Sie in Webflow benutzerdefinierte Codes hinzufügen, ist es wichtig, einige Grundregeln durchzugehen.
Beachten Sie, dass benutzerdefinierte Codes erweiterte Änderungen sind. Daher können sie Konflikte mit der Funktionalität von Webflow verursachen, was zu unerwartetem Verhalten auf Ihrer Site führen kann. Daher gibt es keine Garantie dafür, dass jeder benutzerdefinierte Code vollständig kompatibel oder funktionsfähig ist.
Im Allgemeinen unterstützt Webflow die folgenden Codetypen:
Durch das Hinzufügen von benutzerdefinierten JavaScript-Codes können Sie Ihrer Website viele Funktionen hinzufügen. Aus diesem Grund ist Webflow auch mit einer einfacheren Version von JavaScript namens jQuery ausgestattet. Sie können es zusammen mit JavaScript verwenden, um den Schreibprozess zu vereinfachen.
Beim Importieren von jQuery ist es wichtig, auf die Version zu achten. Die Version sollte mit der aktuell importierten Webflow-Version übereinstimmen, um Konflikte und unerwartetes Verhalten zu vermeiden. Darüber hinaus können Skripte wie onClick und onHover, die DOM-Ereignisse beeinflussen, ebenfalls zu unerwartetem Verhalten auf Ihrer Site führen.
Beim Integrieren eines benutzerdefinierten Codes können Sie keine serverseitigen Sprachen verwenden, darunter:
Ein weiterer wichtiger Aspekt ist die Länge des benutzerdefinierten Codes. Webflow legt die folgenden Zeichenbeschränkungen fest:
- 10.000 Zeichen für eingebettete Elemente
- 10.000 Zeichen für Codes zu einer einzelnen Seite
- 20.000 Zeichen für Codes zur gesamten Website
Wenn der Code, den Sie einbetten möchten, diese Zeichenbegrenzung überschreitet, können Sie ihn nicht direkt einbetten. Sie können den Code jedoch auf einem anderen Server speichern und dann in Ihrem Code auf das Skript verweisen. Alternativ können Sie ein Drittanbietertool verwenden, um Ihren benutzerdefinierten Code zu minimieren.
Die meisten benutzerdefinierten Codes wirken sich nicht auf Elemente im Designermodus aus, um unerwartetes Verhalten zu vermeiden. Daher sehen Sie die Ergebnisse erst, nachdem Sie Ihre Website veröffentlicht haben.
Wenn Ihr benutzerdefinierter Code nicht funktioniert, kann Ihnen das Webflow-Supportteam leider nicht weiterhelfen, da benutzerdefinierter Code außerhalb des Aufgabenbereichs des Teams liegt. Kundensupport-Richtlinie. Überprüfen Sie Ihren Code noch einmal und besuchen Sie die Webflow Forum für zusätzliche Hilfe, falls erforderlich.
Webflow: So fügen Sie benutzerdefinierten Code hinzu
Mit benutzerdefinierten Codes können Sie Ihre Website an Ihre spezifischen Anforderungen anpassen. Webflow hat darauf geachtet, eine Reihe von Szenarien abzudecken, sodass Benutzer benutzerdefinierte Codes der gesamten Site oder nur einzelnen Seiten hinzufügen können. Darüber hinaus können Sie auch bestimmte Beiträge anpassen. Das Beste daran ist, dass Sie Ihren benutzerdefinierten Code mit wenigen Klicks hinzufügen können, unabhängig vom Standort.
So fügen Sie einer gesamten Website benutzerdefinierten Code hinzu
Wenn Ihr benutzerdefinierter Code auf jeder Seite Ihrer Website angewendet werden soll, sind die „Site-Einstellungen“ der richtige Ort. Wenn Sie dort den benutzerdefinierten Code hinzufügen, wird ein nahtloses Erlebnis auf allen Elementen Ihrer Website gewährleistet.
Codes für die gesamte Website können in den Header- oder Footer-Codebereich eingefügt werden. Um einen benutzerdefinierten Code im Header-Codebereich hinzuzufügen, gehen Sie wie folgt vor:
- Öffnen Sie die „Site-Einstellungen“.
- Navigieren Sie zur Registerkarte „Benutzerdefinierter Code“.
- Fügen Sie den benutzerdefinierten Code zum Feld „Kopfcode“ hinzu.
- Drücken Sie „Änderungen speichern“.
In diesem Abschnitt können Sie benutzerdefinierte Stile verwenden, Links zu externen Ressourcen erstellen und Metadaten hinzufügen.
Wenn Sie dem Abschnitt „Fußzeilencode“ einen benutzerdefinierten Code hinzufügen möchten, wechseln Sie erneut zur Registerkarte „Benutzerdefinierter Code“ und führen Sie dann diese Schritte aus:
- Fügen Sie den benutzerdefinierten Code zum Feld „Fußzeilencode“ hinzu.
- Tippen Sie auf „Änderungen speichern“.
So fügen Sie einer einzelnen Seite benutzerdefinierten Code hinzu
Manchmal möchten Sie vielleicht nur eine oder wenige bestimmte Seiten Ihrer Website anpassen. Webflow hat diesen Vorgang relativ einfach gemacht. Nachdem Sie den Code hinzugefügt haben, folgt er jedem Site-weiten Code im Markup Ihrer Website.
Wenn Sie einer einzelnen Seite einen benutzerdefinierten Code hinzufügen, können Sie auswählen, wo er platziert werden soll.
Platzieren Sie HTML- und CSS-Codes immer innerhalb der
Tag. JavaScript-Codes sollten jedoch im Tag-Abschnitt vor dem Tag stehen. Normalerweise verbessert dies die Leistung der Website, da
