Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Code-Vorlage
Mit Video-Anleitung
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 41 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Die Integration eines Info-Banners auf einer Website kann eine effektive Möglichkeit sein, wichtige Informationen an die Besucher weiterzugeben. Doch oft möchten Nutzer nach dem ersten Mal, wenn sie den Banner gesehen haben, nicht erneut damit konfrontiert werden. Hier kommt ein nützlicher Code ins Spiel.

Dieser 20 Zeilen Code ermöglicht die Implementierung eines Info-Banners mit einer intelligenten Cookie-Steuerung. Sobald ein Seitenbesucher den Banner schließt, merkt sich die Website diese Entscheidung über ein Cookie. Beim nächsten Laden der Seite wird der Banner dem Besucher nicht erneut angezeigt.

Die Vorteile dieser Lösung sind vielfältig:

  1. Verbesserte Benutzererfahrung: Die wiederholte Anzeige des Info-Banners kann Besucher frustrieren. Die Möglichkeit, diese Erfahrung zu verhindern, verbessert die Nutzerfreundlichkeit der Website.
  2. Flexibilität: Die Zeit, nach der der Banner erneut angezeigt werden soll, kann einfach über ein Attribut angepasst werden. Das ermöglicht es, die Benutzererfahrung je nach Bedarf anzupassen.
  3. Keine externe Bibliothek: Der Code benötigt keine externe JavaScript-Bibliothek. Er ist schlank und fügt sich nahtlos in die Website ein.
  4. Benutzerdatenschutz und kein DSGVO Cookie Banner nötig: Durch die Verwendung von Cookies, die auf der Client-Seite gespeichert werden, werden keine personenbezogenen Daten erfasst. Dies gewährleistet den Datenschutz der Nutzer.
  5. Attraktives Design: Der Banner kann individuell in Webflow gestaltet werden, um die Ästhetik der Website zu ergänzen und den Info-Bereich ansprechend zu präsentieren.

Insgesamt trägt dieser Code zur Verbesserung der Benutzererfahrung bei, indem er lästige Wiederholungen verhindert und gleichzeitig die Flexibilität bietet, die richtige Balance zwischen Information und Benutzerfreundlichkeit zu finden.

Diesen Trick und 41 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)
Freischalten
Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)

Ein kreativer Effekt, der auch auf der Webflow Conf Website 2022 angewendet wurde. Die Elemente verschwinden automatisch on hover und tauchen wo anders wieder auf.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
SVG Linien animieren (wenn im Viewport)
Kostenlos
Freischalten
SVG Linien animieren (wenn im Viewport)

Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Overflow auto (horizontal scrollen) mit vor und zurück Button
Highlight
Freischalten
Overflow auto (horizontal scrollen) mit vor und zurück Button

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)
Freischalten
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)

Automatisiert 'rel=nofollow' Attribut bei allen Links in Richt-Text-Elementen hinzufügen. Spart Zeit und verbessert SEO.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Slider bei einem bestimmten Slide starten lassen
Highlight
Freischalten
Webflow Slider bei einem bestimmten Slide starten lassen

Entscheide welcher Slide beim laden der Seite zuerst angezeigt werden soll. Einfach über Attributes editierbar.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Highlight
Freischalten
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Eigener Video Player komplett in Webflow gebaut
Kostenlos
Freischalten
Eigener Video Player komplett in Webflow gebaut

Bau dir ein Video Player komplett in Webflow mit eigenen Interaktionen und Icons. Das mp4 File muss selbst gehostet werden.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webdesign Animations-Inspiration – Godly
Kostenlos
Freischalten
Webdesign Animations-Inspiration – Godly

Jede verlinkte Seite hat eine Video-Vorschau, um schnell zu entscheiden, ob es als Inspiration geeignet ist, oder nicht.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webdesign Galerie mit ganzen Screenshots – Landbook
Kostenlos
Freischalten
Webdesign Galerie mit ganzen Screenshots – Landbook

Jeder Screenshot beinhaltet eine ganze Website-Seite und nicht nur einen Ausschnitt. Zudem gibt es gute Filtermöglichkeiten.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Im Browser Hintergrund von Bildern entfernen und als PNG runterladen
Freischalten
Im Browser Hintergrund von Bildern entfernen und als PNG runterladen

Nutze ich häufig wenn es bei Kundenaufträgen mal schnell gehen muss. Funktioniert natürlich am besten bei Objekten, die einen neutraleren Hintergrund haben.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen
Freischalten
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen

Verlinke auf ein bestimmtes FAQ-Element von einer anderen Seite aus zu verlinken und es gleichzeitig geöffnet anzuzeigen. Einfach ?faq=3 mit an die URL hängen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
DSGVO konforme Alternative zu Webflow Forms
Freischalten
DSGVO konforme Alternative zu Webflow Forms

Mit einem Kostenlosen Plan von 250 Absendungen pro Monat, sehr einfacher Integration und du kannst weiterhin die Webflow Form-Komponente verwenden.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung