Webflow CMS Slider erstellen

Webflow CMS Slider: Dynamische Inhalte in deinen Slidern nutzen

Webflow bietet großartige Möglichkeiten, um beeindruckende Slider zu erstellen. Doch was, wenn du Inhalte zentral steuern und auf mehreren Seiten automatisch aktualisieren möchtest? Genau hier kommt der Webflow CMS Slider ins Spiel! In diesem Tutorial erfährst du, wie du deinen Slider mit CMS-Inhalten verknüpfst und flexibel steuerst.

Warum ein CMS-gestützter Slider?

Manuelle Updates sind zeitaufwendig und fehleranfällig – insbesondere, wenn du denselben Slider mehrfach auf deiner Website nutzt. Ein klassisches Beispiel ist ein Testimonial-Slider: Du willst die Position eines Kunden ändern, müsstest dies aber in jedem einzelnen Slider-Element tun. Mit einem CMS-gestützten Slider kannst du Inhalte einmal ändern und sie werden überall aktualisiert.

Da Webflow von Haus aus keine nativen CMS-Slider bietet, gibt es zwei Lösungen:

1. Externe Slider-Bibliotheken wie Swiper.js (benötigt umfangreiches Custom Code).
2. FinSuite CMS Slider, eine externe Skript-Lösung, die sich nahtlos in bestehende Webflow-Slider integrieren lässt.

In diesem Tutorial setzen wir auf die zweite Variante.

1. Deinen Slider vorbereiten

Falls du noch keinen Slider hast, erstelle zunächst einen Webflow-Slider mit statischen Inhalten. Eine Anleitung dazu findest du in unserem vorherigen Blogartikel: Webflow Slider 101.

Hast du bereits einen funktionierenden Slider, kannst du direkt zum nächsten Schritt übergehen.

2. CMS Collection einrichten

1. Erstelle eine CMS Collection (z. B. "Testimonials").
2. Füge relevante Felder hinzu:
   • Name
   • Position & Unternehmen
   • Portraitbild
   • Bewertung (optional)
   • Kategorie-Tag (optional, für verschiedene Seiten)
3. Erstelle einige Einträge, um den Slider zu füllen.

3. Slider mit der CMS Collection verbinden

1. CMS Collection List hinzufügen
   • Platziere eine CMS Collection List auf der Seite (Position egal, muss aber sichtbar sein).
   • Verbinde sie mit deiner Testimonials Collection.
2. Slider-Inhalt aus CMS ziehen
   • Kopiere eine bestehende Testimonial-Karte in den CMS-Listeneintrag.
   • Verbinde Texte, Bilder und Sternebewertungen mit den CMS-Daten.

4. FinSuite CMS Slider einbinden

Nun nutzen wir das FinSuite CMS Slider Skript, um den Slider mit der Collection List zu verknüpfen:

1. Skript einbinden
   • Kopiere das FinSuite CMS Slider Skript und füge es im Head deiner Seite ein (Page Settings > Custom Code).
2. Attribute zuweisen
   • CMS Collection List markieren: Gehe zu den Element-Einstellungen und füge das Attribut fs-cmsfilter-element="list" hinzu.
   • Slider markieren: Wähle das Slider-Element und füge fs-cmsfilter-element="slider" hinzu.
3. Test & Veröffentlichung
   • Veröffentliche die Seite und teste, ob der Slider die CMS-Daten korrekt anzeigt.

5. Optimierungen: Höhe & Filterfunktionen

Einheitliche Höhe für alle Slides

Füge folgendes CSS in dein Global Styles Embed ein:

.w-slide { display: flex; align-items: stretch; }
.testimonial-card { height: 100%; }

Slides filtern und sortieren

1. Sortierung hinzufügen:
   • Füge ein CMS-Feld "Sortierung" (Zahl) hinzu und ordne deine Testimonials in 5er-Schritten.
   • Setze in der Collection List eine Sortierregel nach diesem Feld.
2. Filter nach Kategorien:
   • Erstelle eine weitere CMS-Collection für Kategorien.
   • Verknüpfe Testimonials mit den gewünschten Tags.
   • Nutze die Webflow-Filteroptionen, um Testimonials nach Kategorien auszuwählen.

Fazit

Ein Webflow CMS Slider ist die perfekte Lösung, um Inhalte zentral zu verwalten und auf verschiedenen Seiten flexibel darzustellen. Mit dem FinSuite CMS Slider Skript kannst du Webflow-Slider einfach in dynamische Inhalte umwandeln – ohne aufwändige externe Code-Lösungen.

Falls du mehr über das Webflow CMS erfahren möchtest, lies unseren nächsten Artikel: Webflow CMS Basics. 🚀

‍