Eine Einführung in Webflow Custom Code

Tobi

9.8.2023

Warum brauche ich Custom Code?

Webflow bietet eine Vielzahl von Funktionen, um ansprechende und funktionale Websites zu erstellen. Aber manchmal stoßen wir an die Grenzen des standardmäßigen Angebots. Hier kommt Custom Code ins Spiel. Durch die Einbindung von Javascript, HTML und CSS können wir unser Webseitenprojekt auf die nächste Stufe bringen und noch mehr Funktionen und Designs freischalten. In diesem Artikel werfen wir einen genaueren Blick auf die verschiedenen Arten von Custom Code, wie sie in Webflow eingebunden werden können und welche Vorteile sie bieten.

Welche Code-Typen gibt es?

Was ist HTML?

HTML umfasst alle Elemente, die eine Seite ausmachen. Dazu gehören unter anderem Überschriften, Bilder, Buttons, und alle anderen Elemente, die im Webflow Elemente-Panel vorzufinden sind.

‍

Wofür verwendet man CSS?

Während HTML die Bestandteile selbst definiert, wird CSS für das Styling der Elemente genutzt. Dafür haben wir in Webflow das Style-Panel, welches uns alle Eigenschaften eines Elements von Padding bis zur Hintergrundfarbe anpassen lässt. Dennoch macht es manchmal Sinn, CSS Eigenschaften mit Code festzulegen, das könnte wie folgt aussehen:

‍

Wann verwendet man JavaScript?

Mit Hilfe von JavaScript legt man fest, wie die Seite funktionieren soll. Also z.B. was passiert, wenn die Seite lädt, eine Person auf einen bestimmten Button klickt oder wie ein Element auf hovern reagiert.
‍

JavaScript-Funktionalitäten lassen sich innerhalb von Webflow mithilfe des Interaktions- / Animations-Panel spezifizieren und können Seitenweit, oder beschränkt auf ein Element, implementiert werden.
‍

Dennoch sind nicht alle Funktionen nativ mit Webflow erstellbar, weswegen oft zu externen Bibliotheken, wie GSAP (Animationen) oder Swiper.js (Slider), als Ergänzung gegriffen wird.

‍

Wie kann ich Custom Code implementieren?

Seiteneinstellungen

Die erste Möglichkeit um Custom-Code in dein Webflow Projekt zu implementieren ist über die Seiteneinstellungen. Hier wird eine Trennung in <Head> und </Body> vorgenommen.

‍

Skripte werden meistens im Body referenziert, um Leistungsverminderungen beim Laden der Seite zu verhindern. Die Head Code-Sektion hingegen ist am besten für Links und Styles geeignet. Der dort abgelegte Code funktioniert exklusiv auf dieser Unterseite, und hat ein Limit von 10 000 Zeichen.

Browserfenster mit dem Webflow Designer geöffnet. Das Pages-Panel ist ausgeklappt und die Header und Footer Code Sektion des Menüs ist sichtbar.

‍

Projekteinstellungen

Eine weitere Möglichkeit Custom Code zu verwenden, bieten die Projekteinstellungen. Auch hier haben wir eine Trennung zwischen <head> und <footer>, analog zu den Seiteneinstellungen. Das Zeichenlimit beschränkt sich dort auf 20 000 und der Code wird auf der ganzen Webseite geladen und angewendet.
‍

Da der Code auf jeder Seite geladen wird, unabhängig davon ob er in Nutzung ist oder nicht, sollten nur die wichtigsten Snippets, wie z.B. Tracking-Software oder seitenweite Skripte, eingefügt werden, um die Performance der Webseite nicht zu beeinträchtigen.

Webflow Projekteinstellungen innerhalb eines Browserfensters mit dem Custom Code Bereich im Fokus

‍

Code Embed

Das Code Embed ist ein HTML Element, welches direkt auf der Seite innerhalb des Designers eingefügt werden kann. Im Vergleich zu den anderen beiden Optionen wird der dort geschriebene Code sofort auf die Seite angewandt, ohne dass zuvor veröffentlicht werden muss.

‍

Zu den häufigsten Verwendungszwecken gehören die Einbindung von SVGs in Codeform, oder die Definition von Klassen mit nicht nativen Funktionen (z.B. Pointer-Events: none). Auch hier sollte man jedoch das Zeichenlimit von 10 000 im Hinterkopf behalten.

Tipps & Tricks für die Nutzung von Custom Code

Ordnung halten

Damit Fehler schnell sichtbar und einfach zu beheben sind, lohnt es sich, Ordnung mit schöner Formatierung zu halten. Das erreichst du durch Einrücken von Codezeilen, kommentieren des Codes und beschreibende Variablennamen / Klassen.

‍

Somit bleibt dein Code nicht nur aufgeräumt, sondern kann auch einfacher von anderen Personen nachvollzogen und angepasst werden.

‍

Testen & Debuggen

Der wichtigste Schritt nach dem schreiben des Codes ist, ihn auf Fehler und andere Unregelmäßigkeiten zu testen. Dies kann in Webflow manchmal schwer sein, da der Code (anders wie bei einer IDE) nicht validiert wird und somit Syntaxfehler unentdeckt bleiben können. Zudem muss die Seite veröffentlicht werden, bevor der Code in Effekt tritt - mit Ausnahme des Code-Embed.
‍

Daher bietet es sich an, den Code vorerst extern in einem entsprechenden Tool zu schreiben, um die dortigen Hilfsmittel (Syntaxhighlights, Debugger, Compiler) nutzen zu können. Für die Einbindung von Codesandbox und Webflow haben wir einen serperaten Artikel.
‍

Falls dein Code nicht funktioniert, haben wir hier ein paar der häufigsten Fehlerquellen aufgelistet:

Fehlende Tags: Hast du die richtigen Tags für CSS (<style>) und JavaScript (<script>) verwendet? Hast du alle offenen Tags wieder geschlossen?
‍
Überschneidungsfehler: Bei der Verwendung von <html>, <body> und <head> Tags in deinem Custom-Code kann es zu Komplikationen mit Webflow kommen - vermeide sie bestenfalls.
‍
Syntaxfehler: Hast du alle geöffneten Klammern wieder geschlossen? Hast du alle “;” richtig gesetzt?
‍
Rechtschreibfehler: Sind alle Variablen und Funktionen ohne Rechtschreibfehler im weiteren Code?

‍

Längerer Custom Code

Zuvor haben wir die limitierte Zeichenanzahl in den jeweiligen Codefeldern spezifiziert. Falls dein Code jedoch länger sein sollte, gibt es ein paar Tricks um dieses Limit zu umgehen:

Extern gehosteter Code
‍
Damit dein Code in Webflow funktioniert, muss er dort nicht unbedingt vollständig abgelegt sein. Du kannst deinen Code ebenfalls auf einer dritten Plattform wie Codesandbox schreiben und als Skript in deine Seite einbinden.

Webflow-Skript
‍
Du kannst deinen Code ebenfalls innerhalb einer einfachen Textdatei speichern, und diese im Anschluss in deinen Webflow-Assets hochladen. Mithilfe der Asset-URL kannst du dieses Dokument nun mit folgendem Schema als “externes” Skript verwenden:
‍
<script src = “Hier Asset URL einfügen”> </script>

Webflow Designer innerhalb eines Browserfensters mit dem Assets-Panel geöffnet. Es wird dargestellt wie man den Link zu einem Asset kopiert.

Beispiele für Code-Implementierung

Automatische Änderung der Jahreszahl im Footer

 <script>
	Webflow.push(function() {
		$('.footer-jahr').text(new Date().getFullYear());
	});
</script>

Klasse hinzufügen wenn mit Button interagiert wird

 <script>
document.addEventListener('DOMContentLoaded', () => {
 document.querySelectorAll('.close-button').forEach(trigger => {
  trigger.addEventListener('click', function(){ 
    document.querySelectorAll('.popup').forEach(target => target.classList.add('is-invisible')); 
    });
 });
});
</script>

Teile diesen Artikel