Du hast eine wunderschöne Navigationsleiste gebaut. Ganz oben ist sie geschickt in die Hero-Section integriert. Beim ersten Scrollen wird ein kleiner Triggerbereich verlassen und es spielt eine kurze Animation, die unter anderem die Hintergrund- und Schriftfarbe der Navigationsleiste ändert.
Yeah, published! Perfekt! Oder doch nicht?
Der Benutzer findet immer einen Weg, Dein wunderschönes Meisterwerk zu zerstören. Er scrollt ein bisschen runter und die Animation spielt. In der Mitte Deiner Webseite drückt er F5. Was passiert? Die Webseite lädt neu und die Navigationsleiste hat die falsche Farbe, da die Animation nicht spielt!
Kleinigkeiten wie diese lassen einen die eigenen Designentscheidungen überdenken. Lässt sich mein Ansatz überhaupt so umsetzen, wie ich es mir vorgestellt hatte? Die kurze Antwort: Ja natürlich!
Wir sind in unserer Agentur beim intensiven Testen unserer Webseiten schon auf so einige Grenzfälle gestoßen. All diese Probleme ließen sich mit einfachen Tricks unter der Verwendung von Embed-Elementen von Webflow kurzerhand lösen.
Die interessantesten Probleme und Lösungen habe ich hier für Dich zusammengetragen. Als erfahrener Programmierer verstehst Du die Code-Schnipsel vielleicht direkt, aber für die unerfahreneren Entwickler unter euch erkläre ich ihre Funktionsweisen genauer.
Aber bevor wir mit den eigentlichen Tipps loslegen, beantworten wir noch eine grundlegende Frage. Falls Du bei Webflow noch nicht auf so viel mit benutzerdefinierten Code gestoßen bist, fragst Du Dich vielleicht zunächst: “Was ist ein Embed-Element”?
Was ist ein Webflow-Embed-Element?
Ein Webflow-Embed-Element ermöglicht es Dir, an beliebigen Stellen Deiner Webseite individuellen Code einzufügen. Dies bedarf nur drei einfache Schritte:
- Platziere an der gewünschten Stelle ein “Embed”-Element
- Füge den benutzerdefinierten Code in das Code-Fenster ein
- Speichere und schließe das Code-Fenster
Beachte: HTML und CSS, also Elemente für Inhalt und Gestalt, werden bereits im Editor dargestellt. Wird neue Interaktion durch Javascript hinzugefügt, sieht man das Ergebnis erst auf der publizierten Webseite.
Webflow unterstützt in seinem Embed-Element HTML, CSS und Javascript. Aber wie verwendet man diese Sprachen in Webflow genau? Der folgende Abschnitt erklärt dies kurz.
Wie verwendet man HTML, CSS und Javascript in einem Webflow-Embed-Element?
Wir beginnen mit einem kurzen Beispiel. Wir möchten neuen Inhalt hinzufügen, also fügen wir den HTML-Code im Embed-Element direkt ein:
Wo wären wir schon, wenn wir nicht mit einer guten alten “Hello World!”-Nachricht beginnen?! Aber wir wollen diese in Rot! Mit CSS kann man das Styling des Inhaltes anpassen. CSS wird in einem Embed-Element immer mit <style></style> umschlossen. Wir ergänzen den vorhandenen Code also beispielsweise folgendermaßen:
Wir haben eine neue Klasse angelegt, dessen Schriftfarbe rot ist. Dann haben wir unserem Paragraphen diese Klasse zugewiesen. Beachte, dass CSS immer mit <style></style> umschlossen wird und HTML direkt in das Embed-Element geschrieben werden kann.
Das letzte fehlende Puzzlestück ist die Programmiersprache Javascript, mit der Du komplexe Interaktionen programmieren kannst. Javascript wird immer von <script></script> ummantelt, wenn man es in ein Embed-Element einsetzt.
Im Folgenden habe ich viele hilfreiche Hacks zusammengetragen, weshalb ich dieses Beispiel an dieser Stelle nicht weiter ausführe. Dafür werden die folgenden Tricks umso spannender!
Trick #1: Navbar Style geht kaputt, wenn Deine Webseite in der Mitte aktualisiert wird
Falls du nicht weißt, worum es bei diesem Problem geht, schau Dir einfach nochmal das einleitende Video an.
Aber zunächst zum Setup. Ich habe ein absolut positioniertes Div-Element am oberen Rand der Hero-Section platziert. Dieses ist 100% breit und nur 8px hoch. Scrollt man nun ein kleines Stück runter, verlässt das Div-Element den Bildschirmrand und triggert eine Animation, die das Styling der Navigationsleiste ändert. Scrollt man wieder zurück nach oben, so scrollt das Div-Element wieder in den sichtbaren Bereich und eine inverse Animation macht die Styling-Änderung wieder rückgängig.
Das Problem tritt nun auf, wenn der Benutzer auf Webseite ein bisschen runterscrollt und dann die Seite neu geladen wird, beispielsweise durch Drücken von F5. Beim neuen Laden verlässt das Div-Element nie den Bildschirm, weil es von Anfang an gar nicht erst auf dem Bildschirm zu sehen ist. Es ist viel weiter oben außerhalb des Bildschirms. Entsprechend wird die Animation nie gestartet und die Navigationsleiste ist kaputt.
Wie lässt sich dieses Problem lösen? Natürlich mit benutzerdefiniertem Code!
Das Script wird direkt beim Öffnen bzw. neuen Laden der Webseite ausgeführt. In der ersten Zeile prüfe ich, ob bereits mehr als 4px, also mehr als die halbe Höhe des Triggerelementes, runtergescrollt wurde. Ist dies der Fall, passe ich das Styling wie gewünscht an. Ich simuliere also manuell, was die Animation im Normalfall getan hätte.
Könnte man stattdessen auch die Animation direkt triggern? Vermutlich, aber zu komplexeren Ideen wie diesen kommen wir später, also bleib’ gespannt!
Warum habe ich 4px gewählt? Ich wollte auf Nummer sicher gehen, dass wir nicht durch Rundungsfehler bei “etwa 8px” auf Probleme stoßen. Kann man hier auch einfach 8 verwenden? Vermutlich schon.
Um an das korrekte Element zu gelangen, habe ich diesem lediglich eine ID zugewiesen und mir das Element mit dieser ID zurückgeben lassen.
Trick #2: Interaction “While scrolling in view” in Pixeln statt Prozent
Die Interaktion “While scrolling in view” ist fantastisch, um über einen Bereich hinweg beim Scrollen Elemente zu animieren. Allerdings habe ich mir schon einige Male gewünscht, die Animation in Pixeln und nicht in Prozent anpassen zu können.
Zum Glück kann man einfache Animationen auch in Webflow-Embed-Elementen erstellen.
Die Idee ist hier ganz simpel. Wir fügen einen EventListener hinzu, der immer genau dann eine Funktion von uns aufruft, wenn gescrollt wird. Innerhalb dieser Funktion müssen wir nun lediglich schauen, wie viele Pixel bereits gescrollt wurde und das gewünschte Element entsprechend anpassen. That’s it!
Das Beispiel ändert nur die Hintergrundfarbe, aber die Möglichkeiten sind endlos!
Trick #3: Setze das Copyright Jahr automatisch
Wieder ein neues Jahr, und Du musst das Jahr im Copyright im Footer Deiner Webseite schon wieder manuell anpassen. Wenn es nur eine Möglichkeit gäbe, einfach immer das aktuelle Jahr zu verwenden…
Der folgende Trick ist ganz besonders kurz und knackig und dennoch nicht weniger hilfreich! Für die Vorbereitung musst Du nur drei Schritte befolgen:
- Erstelle ein Div an der Stelle, wo Du die Info zum Urheberrecht einfügen möchtest
- Weise dem Div eine Klasse hinzu, sodass seine Kinder den gesetzten Text-Style übernehmen können
- Füge dem Div ein Embed-Element als Kind hinzu
Das Setup sollte dann in etwa folgendermaßen aussehen:
Jetzt musst Du lediglich folgenden Text in das Embed-Element kopieren und das Startjahr anpassen:
Das Styling wird von dem Parent-Div übernommen, sodass der Text korrekt aussieht. Aber wie funktioniert der Code?
Zuerst wird einfach der Text “Copyright © 2015” eingefügt. Anschließend wird das Javascript-Script ausgeführt. Dieses holt sich zunächst das aktuelle Jahr und prüft, ob dieses größer als 2015 ist. Ist dies der Fall, wie beispielsweise für 2024, so wird die rechte Seite der Konjunktion ebenfalls ausgewertet.
Für die Nicht-Programmierer unter Euch: Eine Konjunktion entspricht in der Aussagenlogik dem umgangssprachlichen “und”. Es müssen also beide Seiten der Aussage stimmen, damit der gesamte Ausdruck “wahr” wird. Ist die linke Seite bereits “falsch”, so muss die rechte Seite nicht mehr ausgewertet werden. So spart sich die CPU Arbeit. Ist die linke Seite allerdings “wahr”, so muss die rechte Seite ebenfalls ausgewertet werden, um bestimmen zu können, ob der gesamte Ausdruck “wahr” ist.
Wenn nun die linke Seite der Konjunktion “wahr” ist und somit die rechte Seite der Konjunktion ausgewertet wird, wird “-” und das aktuelle Jahr geschrieben bzw. “konkateniert”.
Schließlich wird noch der Firmenname hinter das Ergebnis gesetzt und wir haben unser Ergebnis. Es gibt also diese beiden möglichen Ergebnisse:
- Copyright © 2015, [Firmenname]
- Copyright © 2015 - [Aktuelles Jahr], [Firmenname]
Trick #4: Verwende das Scroll-Event
Es gibt so einige tolle Dinge, die man tun kann, wenn einem das Scroll-Event zur Verfügung steht. Das Scroll-Event wird immer genau dann getriggert, wenn der Benutzer auf Deiner Webseite hoch oder runter scrollt.
Dieses zu verwenden ist recht unkompliziert. Erstelle an beliebiger Stelle ein Embed-Element und füge den folgenden Code ein:
Glückwunsch! Du hast dich beim Scroll-Event eingetragen. Aber was machst Du nun damit? Ich habe Dir zwei mögliche Verwendungszwecke aufgelistet, die für uns bei Katurbo in der Praxis super hilfreich waren.
Anwendung #1: Burger-Navigation beim Scrollen ausblenden
In einem unserer Projekte haben wir eine Navigationsleiste, die beim Runterscrollen aus- und beim Hochscrollen wieder eingeblendet wird. Außerdem enthält die Navbar ab dem Tablet-Breakpoint ein simples Burger-Menü, welches man per Klick öffnen und schließen kann.
Wenn man nun dieses Burger-Menü öffnet und dann nach unten scrollt, wird die Navigationsleiste ausgeblendet, aber das Burger-Menü bleibt geöffnet und teilweise sichtbar. Es soll sich allerdings wie im folgenden Video ebenfalls schließen.
Das nachfolgende Script kann für genau einen solchen Fall verwendet werden, damit das Ergebnis genau so gebuttert läuft wie unser Endergebnis aus dem Video!
Im Event-Listener wird zunächst geprüft, ob die Breite des Fensters klein genug ist, sodass das Burger-Menü bereits angezeigt wird. Andernfalls ist nichts zu tun.
Expertenfrage: Warum fügen wir den Event-Listener überhaupt hinzu, wenn das Fenster größer als der gewünschte Breakpoint ist? Antwort: Damit das Script auch funktioniert, wenn jemand das Fenster im Nachhinein verkleinert.
Wird nun vom Benutzer ein Scroll-Event ausgelöst und ist die Breite des Fensters im gewünschten Bereich, so holen wir uns ganz einfach das Overlay der Navigationsleiste und simulieren einen Klick darauf! That’s it!
Für den Kontext zum Setup: Wir haben das vorgefertigte Navbar-Element von Webflow verwendet. Im Normalfall hat man nur genau eins davon pro Unterseite, aber falls mehrere davon vorhanden sein sollen, benennt Webflow die relevanten Elements einfach chronologisch “#w-nav-overlay-0” fürs Erste, “#w-nav-overlay-1” fürs Zweite und so weiter.
Troubleshooting
Um sicherzustellen, dass Du die korrekte ID verwendest, kannst du nach dem Veröffentlichen Deiner Webseite mit “inspect” bzw. “inspizieren” (einfach per Rechtsklick auf die veröffentlichte Website) auf das entsprechende Element prüfen, welche ID dem Element zugewiesen wurde.
Anwendung #2: Dropdown Menü beim Scrollen ausblenden
Diese Idee fand im selben Projekt wie der vorherige Ansatz Anwendung und das Problem ist ähnlich. Wie zuvor beschrieben, haben wir eine Navigationsleiste, die sich beim Runterscrollen schließt und beim Hochscrollen öffnet. Zusätzlich dazu lässt sich ein spezifisches Element der Navigationsleiste durch Klicken aus- und einklappen.
Das Problem tritt nun auf, wenn man zuerst das Untermenü per Klick öffnet und dann runterscrollt, sodass sich die Navigationsleiste schließt. Das Untermenü bleibt geöffnet, soll sich aber wie im Video schließen.
Wie zuvor kannst Du einfach ein Embed-Element an beliebiger Stelle erstellen, den folgenden Code einfügen und das Problem löst sich wie von selbst!
Auch hier setzen wir auf das Scroll-Event. Zunächst holen wir uns das entsprechende Dropdown-Menü-Element.
Wir überprüfen, ob das Menü geöffnet ist, indem wir nach der Klasse “w--open” suchen. Diese wird von Webflow automatisch hinzugefügt, wenn das Menü geöffnet wird.
Ist die Klasse vorhanden, wissen wir, dass wir das Menü schließen wollen. Daher lösen zuerst wir ein Event aus, um das Menü zu schließen und daraufhin ein weiteres, um die entsprechende Animation für's Schließen abzuspielen. Wenn Du keine Animation bzw. Interaktion für's Schließen des Menüs gestaltet hast, ist der zweite Trigger nicht notwendig.
Trick #5: Trigger ein Element, wenn genau das Element NICHT geklickt wird
Manchmal möchten wir eine Interaktion ausführen, genau dann, wenn irgendwo hin geklickt wird, aber NICHT auf ein bestimmtes Element. Wir wollten zum Beispiel ein Dropdown-Menü schließen, wenn an eine andere Stelle des Fensters geklickt wird.
Ähnlich wie in Trick #4 lösen wir dieses Problem mit einer Kombination aus einem Event-Listener und dem manuellen Auslösen von Folge-Events.
In diesem Fall beobachten wir “mouseup”-Events, also Events, die feuern, sobald die Maustaste losgelassen wird. Wird also die Maustaste losgelassen, so schauen wir, ob unser Zielelement bereits ein “mouseup”-Event enthält. Falls ja, wurde es geklickt. Falls nein, können wir unsere gewünschte Interaktion ausführen.
Für Troubleshooting und zusätzliche Details, kannst Du Dir Trick #4 genauer anschauen.
BONUS TRICK: Code-Schnipsel in Webflow-Rich-Text-Elemente einfügen
Update 11. Juni 2024: Rich-Text-Elemente von Webflow unterstützen nun Embedded Elemente. Das Konzept funktioniert allerdings dennoch für beliebige HTML-Elemente.
Ich habe Dir in diesem Blogpost so einiges an Code in hübschen Code-Blöcken präsentiert. Aber wie habe ich das überhaupt gemacht?
Wie Du Dir vermutlich schon gedacht hast, schreiben wir unsere Blogbeiträge in Rich-Text-Elementen. So können wir das CMS von Webflow verwenden und dennoch detaillierte Inhalte formulieren.
Hinweis zu Bonusartikel: Warum wir das Content-Management-System von Webflow und nicht von WordPress verwenden
Aber Rich-Text-Elemente können aktuell noch keine Code-Blöcke enthalten. Wir können natürlich externe Libraries verwenden, um Code-Blöcke zu simulieren, aber mein Bedürfnis an dieser Stelle war es, den Code visuell identisch zu Webflow-Code-Blöcken darzustellen.
Der Trick ist recht simpel! Ich habe auf einer beliebigen Unterseite unserer Webseite einen Code-Block erstellt und den gewünschten Inhalt eingefügt. Nun habe ich diese Seite unter unserer Staging-Domain veröffentlicht und mir mit “inspect” bzw. “Inspizieren” den entsprechenden Abschnitt des erzeugten Code von der veröffentlichten Webseite angeschaut und heraus kopiert. Diesen Code musste ich lediglich im Rich-Text-Element dieses Blogbeitrags in einem Embed-Element einfügen und fertig!
Der Code für das Beispiel mit dem einfachen Paragraphen mit dem klassischen “Hello World!”-Text aus dem Intro sieht dann intern beispielsweise folgendermaßen aus (Codeception!):
Fazit zum Webflow-Embed
Wie Du sehen kannst, konnten wir so einige interessante Probleme mit Webflow-Embed-Elementen effizient lösen. Hoffentlich helfen Dir einige dieser Ideen in Sonderfällen Deiner Projekte, sodass Du Deine ausgeklügelten Designideen zukünftig problemlos umsetzen kannst!
