Webflow Slider bei einem bestimmten Slide starten lassen

Webflow Code-Vorlage mit Anleitung

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

Diesen Trick und 43 weitere im Bundle kaufen

Vorschau

Passe das Verhalten deines Webflow-Sliders an! Normalerweise lädt Webflow den ersten Slide einer Slideshow standardmäßig beim Laden einer Website Unterseite. Mit diesem Code behältst du die Kontrolle: Wähle selbst, welcher Slide zuerst angezeigt wird. Ganz einfach über Attribute editierbar.

Wann könnte so eine Funktion nützlich sein?

Hervorhebung wichtiger Inhalte: Wenn du eine bestimmte Nachricht, ein Angebot oder ein Produkt präsentieren möchtest, kannst du sicherstellen, dass dieser Slide zuerst angezeigt wird, um die Aufmerksamkeit der Besucher zu lenken.
Im Design wird eine wichtige Botschaft des Sliders oft mittig platziert und so geht der Platz links gestalterisch nicht leer aus, sondern wird mit slide-1 gefüllt. Aktiv angezeigt wird aber der zweite Slide.
Gezielte Botschaften: Für bestimmte Marketingkampagnen oder Events kannst du einen beliebigen Slide entsprechend gestalten, um eine spezifische Botschaft zu vermitteln.
Visuelles Storytelling: Wenn deine Webseite eine visuelle Geschichte erzählt, kannst du einen anderen Slide als Einführung nutzen, um die Geschichte ansprechend zu beginnen.
Saisonale oder aktuelle Inhalte: Du kannst den ersten Slide anpassen, um saisonale Angebote, Neuigkeiten oder Veranstaltungen zu präsentieren.
Benutzerfreundlichkeit: Falls du möchtest, dass Besucher beim Betreten der Seite direkt zu einem bestimmten Abschnitt geleitet werden.

Diesen Trick und 43 weitere im Bundle kaufen

Für 49 € freischalten

Was ist enthalten?

Weitere nützliche Webflow Tricks

Freischalten

Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)

Liste an Plattformen für kostenloses Bild- und Videomaterialien. Nutze ich als Webdesigner bei jedem Kundenauftrag.

Tool

Text-Anleitung

Demo Beispiel

Video-Anleitung

Kostenlos

Highlight

Freischalten

Sammlung an guten Webflow Styleguide-Vorlagen zum klonen (kostenlos)

Nutze diese kostenlosen Webflow Styleguide Vorlagen für einheitliches, professionelles Website-Design.

Cloneable

Text-Anleitung

Demo Beispiel

Video-Anleitung

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

Freischalten

Video Playback in einem Popup bei schließen stoppen

Dieser Code stoppt automatisch das weitere abspielen eines Videos in einem Popup / Modal Fenster, sobald dieses geschlossen wird.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Highlight

Freischalten

Position Sticky innerhalb von overflow auto / hidden

Ein Accordeon mit einer großen Tabelle verwendet "overflow: hidden", während die Tabelle selbst "overflow: auto" nutzt, um sowohl horizontal als auch vertikal gescrollt werden zu können. Eigentlich funktioniert "position: sticky" innerhalb dieser Tabelle nicht mehr, mit dieser Code-Vorlage allerdings schon.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

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

Freischalten

Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee

Lass Bilder, Logos und Texte mit nur zwei Zeilen CSS Code horizontal durch den Bildschirm wandern. Mit dieser Code-Vorlage musst du nur ein Attribut vergeben.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern

Ein Trick, der dir zeigt, wie du in Webflow mehrere unabhängige Lightbox-Galerien mit dynamischen CMS-Gruppennamen erstellst, ohne dass sie sich in einer Gruppe öffnen.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

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

Highlight

Freischalten

Lazy Loading Background Videos in Webflow

Viele Background Videos auf einer Website führen zu einer hohen Netzwerknutzlast und schlechteren Page-Speed Score. Dieser Code hilft dir dabei, Videos erst zu laden, sobald sie im Viewport des Seitenbesuchers sind.

Code-Vorlage

Text-Anleitung

Demo Beispiel

Video-Anleitung

Freischalten

Webflow SEO Checkliste (mehrere zusammengefasst)

Ich habe dir einige wichtige Punkte von verschiedenen SEO Beiträgen in diesem Beitrag zusammengefasst.

Allgemein

Text-Anleitung

Demo Beispiel

Video-Anleitung

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

Alle Tricks anzeigen →