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.

Overflow auto (horizontal scrollen) mit vor und zurück Button
Code-Vorlage
Mit Video-Anleitung
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Bei der Gestaltung von horizontal scrollbaren Sektionen auf Desktops ist es klug, Vorwärts- und Rückwärts-Buttons als Backup einzufügen. Nicht alle Nutzer sind in der Lage, horizontal zu scrollen. Mein bereitgestellter Code ermöglicht dir das nahtlose Einbinden solcher Buttons in Webflow, die bequem über Attribute gesteuert werden können. Wenn also ein Seitenbesucher mit seiner Maus nur vertikal scrollen kann, kann er trotzdem eine Sektion, die von dir auf Overflow auto gestellt ist, über die Button steuern.

Zusätzlich grauen sich die Button automatisch aus, sobald die Liste durchgescrollt ist. Und es wird immer so weit gescrollt, wie ein item in der horizontal scrollbaren Liste breit ist. Dieser Wert wird über ein Attribute, welches du in Webflow vergibst, automatisch übernommen.

Vorteile dieser Lösung:

  1. Barrierefreiheit: Die Buttons bieten eine barrierefreie Alternative für Nutzer, die Schwierigkeiten beim horizontalen Scrollen haben.
  2. Benutzerfreundlichkeit: Die Buttons erhöhen die Nutzerfreundlichkeit, indem sie eine zusätzliche Navigationsmöglichkeit bieten.
  3. Verbesserte Navigation: Nutzer können bequem zwischen den Sektionen wechseln, ohne präzises horizontales Scrollen zu benötigen.
  4. Konsistenz: Die Buttons sorgen für eine konsistente Benutzererfahrung über verschiedene Geräte hinweg.
  5. Flexibilität: Die Möglichkeit, die Position und das Design der Buttons anzupassen, ermöglicht eine nahtlose Integration in das Design deiner Website.
  6. Einfache Implementierung: Der bereitgestellte Code und die Attribute ermöglichen eine unkomplizierte Integration der Buttons in deine Webflow-Website.

Die Kombination aus intuitiver Navigation, Barrierefreiheit und Anpassbarkeit macht diese Lösung ideal, um sicherzustellen, dass alle Nutzer problemlos zwischen den horizontal scrollbaren Sektionen navigieren können.

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

Weitere nützliche Webflow Tricks

Copyright Jahreszahl im Footer automatisch aktualisieren
Kostenlos
Freischalten
Copyright Jahreszahl im Footer automatisch aktualisieren

Copyright Jahreszahl im Footer einer Webflow Website automatisch aktualisieren.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Autoplay Webflow Tabs
Highlight
Freischalten
Autoplay Webflow Tabs

Passe Webflow Tabs mithilfe von Attributen so an, dass sie automatisch nach einer festgelegten Zeit zum nächsten Tab wechseln (mit animierter Tab-Bar).

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Tabs in Tabs, die auf Mobile zu Dropdown werden
Kostenlos
Freischalten
Tabs in Tabs, die auf Mobile zu Dropdown werden

Eine individuell gestaltete Tabs-in-Tabs-Komponente, die sich auf dem Mobile Breakpoint in eine Dropdown-Komponente verwandelt.

Cloneable
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
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)
Kostenlos
Freischalten
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)

Einfach bild reinziehen und zwischen Screenshot-Modus, perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Page Load Animation nur 1x in Webflow abspielen
Highlight
Freischalten
Page Load Animation nur 1x in Webflow abspielen

Erstelle eine Ladeanimation, die nur dann abgespielt wird, wenn der Besucher zum ersten Mal auf die Website kommt und nach Page Reload nicht mehr.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Showreels Inspiration
Kostenlos
Freischalten
Showreels Inspiration

Showreelz ist ein kreativer Feed, der inspirierende und bemerkenswerte Designvideos präsentiert.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Hunderte Device Mockups mit Menschen schnell kostenlos erstellen
Freischalten
Hunderte Device Mockups mit Menschen schnell kostenlos erstellen

Falls man für eine Präsentation oder zum einbinden auf der Website mal ein schnelles Mockup braucht (kostenlos). Einfach Screenshot hochladen und High-Res Bild wieder runterladen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Erstes FAQ Accordion standardmäßig geöffnet anzeigen
Freischalten
Erstes FAQ Accordion standardmäßig geöffnet anzeigen

Zeige beim laden einer Seite das erste Element einer FAQ Liste standardmäßig geöffnet an.

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
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)
Freischalten
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)

Ersetze die Standard CSM Rich-Text-Bullet-Liste in Webflow mit eigenen SVG-Icons, die sich automatisch skalieren. Perfekt für individuell gestaltete Aufzählungen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird
Freischalten
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird

Passe die Standard-Hintergrundfarbe des Browsers an, wenn Text markiert ist, und steuere diese mit deinen Webflow Variablen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung