Wie erstellt man einen E-Commerce-Slider? Slider-Größen für die Startseite, Mobilbild, Übergangseinstellungen und Seitengeschwindigkeit – Praxisleitfaden mit Zykluszeit-Rechner und Slider-Prüfung

Wenn Besucher auf Ihre Startseite kommen, ist der Slider oft das Erste, was sie sehen. Ein gut gemachter Slider erzählt auf einen Blick von der Kampagne, der neuen Saison oder der meistverkauften Kategorie. Ein schlecht gemachter wird auf dem Smartphone beschnitten, verlangsamt die Seite, führt beim Klick auf eine Fehlerseite und verdirbt den ersten Eindruck.

In diesem Leitfaden finden Sie Antworten auf die Fragen, wie man einen E-Commerce-Slider erstellt, welche Bildgröße nötig ist, warum für Desktop, Tablet und Mobil getrennte Bilder hochgeladen werden, wie man Übergangsdauer und Effekt wählt, wie der Slider die Seitengeschwindigkeit beeinflusst und wie man den Slider in Faprika Schritt für Schritt verwaltet. Dazu gibt es ein Tool, das die Slider-Zykluszeit berechnet, und eine Checkliste.

Was ist ein E-Commerce-Slider?

Ein Slider ist ein dynamischer Showcase-Bereich im oberen Teil der Startseite, in dem mehrere Bilder nacheinander oder beim Wischen des Nutzers angezeigt werden. Jedes Bild stellt eine Kampagne, eine Kategorie, ein Produkt oder eine Ankündigung vor und führt beim Klick zur entsprechenden Seite.

Ein Slider präsentiert mehrere Botschaften auf einer einzigen Bildschirmfläche. Das ist seine Stärke und zugleich sein Risiko: Jede Slide konkurriert mit den anderen um Aufmerksamkeit, und der Besucher sieht möglicherweise nicht alle. Ein guter Slider besteht aus wenigen klaren Slides.

Was ist der Unterschied zwischen Slider und Banner?

Ein Banner ist ein einzelnes festes Bild; ein Slider zeigt mehrere Banner nacheinander. Wenn Sie eine einzelne Kampagne hervorheben möchten, verwenden Sie ein Banner; wenn Sie im selben Bereich mehrere Botschaften vermitteln möchten, einen Slider.

LesetippStartseitengestaltung und Schaufenster-Verwaltung im E-Commerce: Startseiten-Schaufenster einrichten – Bereiche, Reihenfolge, Mobil, Geschwindigkeit und Aktionskalender, Praxisratgeber, Produktübergangs-Rechner und Startseitenprüfung

Warum ist der Slider wichtig?

Der Slider belegt den sichtbarsten Bereich der Startseite; wie Sie ihn nutzen, bestimmt den ersten Eindruck des Shops. Er ist aus vier Gründen wichtig.

• Er prägt den ersten Eindruck: Der Besucher versteht auf den ersten Blick, was der Shop verkauft und was im Vordergrund steht.
• Er macht die Kampagne sichtbar: Rabatte oder die Ankündigung der neuen Saison springen ins Auge, ohne dass man sie suchen muss.
• Er lenkt den Traffic: Jede Slide ist ein Tor, das den Besucher zur Kategorie- oder Produktseite führt.
• Er beeinflusst die Seitengeschwindigkeit: Da hier die größten Bilder liegen, verlangsamt ein falsch erstellter Slider die Seite.

Wie sich die Seitengeschwindigkeit auf den Umsatz auswirkt, können Sie im Beitrag Warum ist die Website-Geschwindigkeit im E-Commerce wichtig? nachlesen.

Aus wie vielen Slides sollte ein Slider bestehen?

Für die meisten Shops genügen drei bis fünf Slides. Je mehr Slides es gibt, desto länger dauert es bis zu den letzten, die meisten Besucher scrollen weiter, ohne alle gesehen zu haben, und das Seitengewicht wächst. Die Grundregel: Die wichtigste Botschaft gehört auf die erste Slide, und jede Slide erfüllt nur eine Aufgabe.

Sie können die Slides in dieser Reihenfolge planen: zuerst die größte Kampagne, dann die meistverkaufte Kategorie, danach Neuheiten und eine vertrauensbildende Botschaft (etwa kostenloser Versand oder einfache Rückgabe, aber nur, wenn Sie das wirklich anbieten). Für jede Slide sollte die Antwort auf die Frage „Was findet der Besucher, wenn er hier klickt?“ klar sein.

LesetippE-Commerce-Kampagnenkalender: So erstellen Sie einen Kampagnenplan, der das ganze Jahr über Umsatz bringt

In welcher Größe sollte das Slider-Bild erstellt werden?

Die Größe des Slider-Bildes hängt vom Gerät ab, auf dem es angezeigt wird, und vom Layout des Sliders. Für einen Vollbild-Slider empfiehlt Faprika 1920×400 Pixel auf dem Desktop, 1200×400 auf dem Tablet und 768×500 auf dem Smartphone; für einen in der Seitenmitte ausgerichteten Slider 1100×550 Pixel. Ein Bild in der richtigen Größe wird weder beschnitten noch unscharf.

Halten Sie beim Erstellen des Bildes in diesen Größen wichtigen Text und das Produkt nahe der Bildmitte. Vollbilder können bei unterschiedlichen Bildschirmbreiten an den Rändern leicht beschnitten werden; Wörter oder Logos nahe am Rand können verloren gehen.

Was gehört in ein gutes Slider-Bild?

Ein gutes Slider-Bild trägt eine einzige Botschaft, ist gut lesbar und enthält eine Handlungsaufforderung. Der Besucher sollte innerhalb einer Sekunde die Fragen „Was wird angeboten, was habe ich davon, was soll ich tun?“ beantworten können.

• Eine Botschaft: Ein Bild, eine Kampagne oder eine Idee.
• Kurzer, großer Text: Schreiben Sie wenige Wörter, die auch verkleinert auf dem Smartphone lesbar bleiben.
• Hoher Kontrast: Der Text muss sich klar vom Hintergrund abheben.
• Klare Handlungsaufforderung: Fügen Sie einen kurzen klickfördernden Ausdruck wie „Jetzt ansehen“ hinzu.
• Hochwertiges Produktbild: Ein unscharfes oder gestrecktes Bild verringert das Vertrauen in den Shop.

LesetippWie fotografiert man Produkte? Leitfaden zur Produktfotografie mit dem Smartphone im E-Commerce

Warum braucht man für jedes Gerät ein eigenes Bild?

Ein einzelnes Querformatbild wird auf dem Smartphone entweder so klein, dass es unlesbar wird, oder so beschnitten, dass die Botschaft abgeschnitten wird. Ein eigenes Bild pro Gerät sorgt dafür, dass das Bild auf jedem Bildschirm unbeschnitten und in der richtigen Größe erscheint. Außerdem sparen Sie Datenverbrauch und Ladezeit, weil dem Smartphone kein unnötig großes Bild geliefert wird.

In Faprika können Sie für jedes Slider-Bild Desktop, Tablet oder Mobilgerät auswählen. Ein Bild, für das Sie nur „Desktop“ wählen, erscheint nur auf dem Desktop; ein Bild nur für „Mobil“ erscheint nur auf Mobilgeräten. So sieht der Besucher jedes Geräts das speziell dafür erstellte Bild.

Warum die Darstellung auf dem Smartphone so wichtig ist, erfahren Sie in diesem Beitrag E-Ticaret Sitesinde Mobil Uyumun Önemi können Sie in diesem Beitrag nachlesen.

Wie gibt man die Slider-Weiterleitungsadresse an?

Die Slider-Adresse bestimmt, zu welcher Seite der Kunde beim Klick auf die Slide gelangt. In Faprika tragen Sie in dieses Feld nicht die vollständige Adresse ein, sondern nur den Teil nach dem Domainnamen (alles nach dem „/“). Dieses Feld darf nicht leer bleiben: Ist keine Adresse definiert, wird der Kunde beim Klick auf die Slide auf eine Fehlerseite weitergeleitet.

Leiten Sie die Slide nicht auf eine allgemeine Seite, sondern dorthin, wo die Botschaft hinführt. Eine Slide mit „Kleiderrabatt“ sollte direkt zur Kategorie Kleider führen, eine Slide mit „neue Schuhe“ zur entsprechenden Kategorie. Sieht der Besucher das versprochene Produkt nicht beim ersten Klick, bringt der Slider zwar Klicks, aber keine Verkäufe.

Wozu dient der Slide-Name?

In Faprika können Sie einer Slide optional einen Namen geben. Das Feld muss nicht ausgefüllt werden, hilft aber, die Slides in der Liste zu unterscheiden. Namen, die die Kampagne beschreiben, wie „Eröffnung der Wintersaison“ oder „Ankündigung kostenloser Versand“, erleichtern es, sich nach einigen Monaten zu erinnern, welche Slide zu welcher Kampagne gehört.

Wie stellt man automatischen Wechsel, Anzeigedauer und Effekt ein?

Die Slider-Einstellungen bestimmen, wie lange die Slides auf dem Bildschirm bleiben, wie gewechselt wird und mit welchem Effekt der Wechsel erfolgt. In Faprika finden Sie diese Einstellungen unter Konfiguration, Einstellungen, Slider-Einstellungen; gespeicherte Änderungen gelten für alle Slider.

Wie lang sollte die Anzeigedauer sein?

Die Anzeigedauer sollte so lang sein, dass die Botschaft im Bild bequem gelesen werden kann. Je länger der Text, desto länger die Dauer; doch je länger die Dauer, desto länger dauert es auch, bis die letzten Slides erreicht sind. Dauer und Anzahl der Slides müssen gemeinsam betrachtet werden.

Das folgende Tool berechnet aus Slide-Anzahl, Anzeige- und Übergangsdauer sowie Bildgröße die Dauer eines Durchlaufs, die Zeit bis zur letzten Slide und das gesamte Bildgewicht. Anzeige- und Übergangsdauer sind wie in Faprika in Millisekunden angegeben (1000 Millisekunden sind eine Sekunde).

Interpretieren Sie das Ergebnis des Tools anhand des Besucherverhaltens Ihres Shops. Wenn Sie wissen, wie lange Besucher auf der Startseite bleiben, stellen Sie keinen Zyklus ein, der länger ist als diese Zeit, damit der gesamte Slider gesehen wird. Wenn Sie es nicht wissen, ist es in jedem Fall richtig, die wichtigste Kampagne auf die erste Slide zu setzen.

Welcher Übergangseffekt sollte gewählt werden?

In Faprika können Sie einen der Effekte Slide, Fade, Cube, Coverflow und Flip wählen. Für die meisten Shops sind schlichte Effekte (Gleiten oder sanftes Überblenden) die beste Wahl: Der Besucher konzentriert sich auf die Botschaft, nicht auf den Effekt selbst. Auffällige Effekte wie Würfel oder Drehung können ablenken und auf langsamen Geräten ruckeln.

Wie beeinflusst der Slider die Seitengeschwindigkeit?

Der Slider enthält die größten Bilder der Startseite; wird er falsch erstellt, ist er das erste Element, das die Seite verlangsamt. Für die Geschwindigkeit gelten zwei Regeln: Laden Sie Bilder nicht größer hoch als nötig und verwenden Sie für jedes Gerät Bilder in passender Größe.

• Halten Sie die Dateigröße klein: Komprimieren Sie das Bild vor dem Hochladen; ein mit bloßem Auge nicht sichtbarer Qualitätsverlust verkleinert die Datei oft erheblich.
• Verwenden Sie gerätespezifische Bilder: Ein Bild in Desktop-Größe auf das Smartphone zu laden verbraucht unnötig Daten; gerätespezifische Bilder verhindern das.
• Begrenzen Sie die Anzahl der Slides: Das Bild jeder Slide erhöht das Gesamtgewicht der Seite.
• Gestalten Sie die erste Slide am besten: Das beim Öffnen der Seite zuerst sichtbare Bild bestimmt den Geschwindigkeitseindruck.

Zu Bildkomprimierung und Formatwahl lesen Sie den Leitfaden Wie optimiert man Produktbilder? Größe, Format (WebP), Dateiname und Alt-Text im E-Commerce – Praxisleitfaden.

Welche Fehler machen einen Slider kaputt?

Slider-Fehler entstehen meist durch kleine Versäumnisse; da der Slider aber an der sichtbarsten Stelle der Startseite sitzt, sind die Folgen groß. Die häufigsten Fehler sind:

• Weiterleitungsadresse leer lassen: Der Kunde, der auf die Slide klickt, landet auf einer Fehlerseite.
• Ein einziges Querformatbild auf jedem Gerät verwenden: Auf dem Smartphone wird die Botschaft beschnitten oder ist nicht lesbar.
• Zu viele Slides hinzufügen: Die letzten Slides werden nie gesehen und die Seite wird schwerer.
• Eine beendete Kampagne online lassen: Das beschädigt das Vertrauen und enttäuscht.
• Zu viel Text ins Bild packen: Auf dem Smartphone ist er nicht lesbar und wirkt überladen.
• Die Botschaft durch einen auffälligen Effekt überlagern: Der Besucher interessiert sich für den Effekt, nicht für das Angebot.

Slider-Checkliste

Gehen Sie vor der Veröffentlichung des Sliders die folgende Liste durch. Wenn jeder Punkt mit „Ja“ beantwortet ist, ist der Slider sowohl für Besucher als auch für die Seitengeschwindigkeit bereit.

Wie verwaltet man den Slider in Faprika?

In Faprika verwalten Sie den Slider im Panel, ohne Code zu schreiben. Die Bilder laden Sie unter Inhaltsverwaltung, Slider-Verwaltung hoch; Darstellungs- und Übergangseinstellungen legen Sie unter Konfiguration, Einstellungen, Slider-Einstellungen fest.

• Upload per Drag-and-drop: Sie können viele Bilder in Sekunden auf einmal hochladen.
• Gerätespezifisches Bild: Für jedes Bild können Sie Desktop, Tablet oder Mobilgerät auswählen.
• Vollbild- oder zentriertes Layout: Je nach Designwunsch wählen Sie einen breiten Slider oder eine schlichte, zentrierte Struktur.
• Slide-Name und Weiterleitungsadresse: Sie geben der Slide optional einen Namen und tragen die Adresse der Kategorie- oder Produktseite ein, die beim Klick geöffnet wird.
• Einstellungen für den automatischen Wechsel: Sie legen Anzeigedauer, Übergangsdauer und Effekt (Slide, Fade, Cube, Coverflow, Flip) fest.
• Breite und Höhe: Sie stellen die vom Slider auf der Website eingenommene Fläche in Pixel ein.

Die Slider-Einstellungen gelten für alle Slider; Anzeigedauer oder Effekt legen Sie also nicht für einzelne Slides, sondern für den gesamten Slider fest. Deshalb sollten Sie die Startseite nach einer Änderung sowohl auf dem Desktop als auch auf dem Smartphone öffnen und testen. Alle Details des Panels finden Sie auf den Schulungsseiten Slider-Verwaltung und Verwaltung der Slider-Einstellungen.

LesetippWas ist Ankündigungsverwaltung? Wie funktionieren Ankündigungen und Kampagnenhinweise auf einer E-Commerce-Website?

Wie verwaltet man das Startseiten-Schaufenster mit Faprika?

Mit Faprika verwalten Sie den Showcase Ihrer Startseite im Panel. Der Slider ist nur ein Teil dieses Showcases; er sollte gemeinsam mit Menü, Ankündigung, Kategorie- und Produktbereichen betrachtet werden. Die wichtigsten Optionen sind:

• Slider-Verwaltung: Sie laden gerätespezifische Slider-Bilder per Drag-and-drop hoch und tragen deren Adressen ein.
• Slider-Einstellungen: Übergang, Anzeigedauer, Effekt und Größe legen Sie an einer Stelle fest.
• Menüverwaltung: Sie bearbeiten Menütitel und Kampagnenbilder.
• Ankündigungsverwaltung: Sie zeigen oben auf der Seite kurze, zeitlich begrenzte Ankündigungen an.
• Medien- und Inhaltsverwaltung: Sie verwalten Bilder und Inhaltsseiten im Panel.

Welche Funktionen in welchem Paket enthalten sind, sehen Sie im Vergleich der E-Commerce-Pakete.

LesetippWie sollte die Menüstruktur einer E-Commerce-Website aussehen? Leitfaden zu Hauptmenü, Mega-Menü und Kategorieaufbau

Häufig gestellte Fragen

Was ist ein E-Commerce-Slider?

Ein Slider ist ein dynamischer Showcase-Bereich im oberen Teil der Startseite, in dem mehrere Bilder nacheinander angezeigt werden. Jedes Bild stellt eine Kampagne, eine Kategorie oder eine Ankündigung vor und führt beim Klick zur entsprechenden Seite.

Welche Größe sollte das Slider-Bild haben?

Für einen Vollbild-Slider empfiehlt Faprika 1920×400 Pixel auf dem Desktop, 1200×400 auf dem Tablet und 768×500 auf dem Smartphone; für einen zentrierten Slider 1100×550 Pixel. Die richtige Größe verhindert, dass das Bild beschnitten wird oder unscharf wirkt.

Warum braucht ein Slider ein eigenes Mobilbild?

Ein Querformatbild wird auf dem Smartphone verkleinert oder beschnitten. Ein separates Mobilbild sorgt dafür, dass die Botschaft auf dem kleinen Bildschirm lesbar bleibt, und senkt den Datenverbrauch, weil dem Smartphone keine unnötig große Datei geliefert wird.

Was passiert, wenn die Slider-Adresse leer bleibt?

In Faprika muss die Slider-Adresse unbedingt angegeben werden. Fehlt sie, wird ein Kunde, der auf die Slide klickt, auf eine Fehlerseite weitergeleitet. Beim Eintragen genügt der Teil nach dem Domainnamen (alles nach dem „/“).

Aus wie vielen Slides sollte ein Slider bestehen?

Für die meisten Shops genügen drei bis fünf Slides. Mit jeder weiteren Slide werden die letzten nicht mehr gesehen und die Seite wird schwerer. Platzieren Sie die wichtigste Botschaft auf der ersten Slide und beschränken Sie jede Slide auf eine einzige Botschaft.

Wie wählt man in Faprika den Slider-Übergangseffekt?

Unter Konfiguration, Einstellungen, Slider-Einstellungen können Sie einen der Effekte Slide, Fade, Cube, Coverflow oder Flip wählen. Anzeige- und Übergangsdauer legen Sie am selben Ort in Millisekunden fest; die Änderung gilt für alle Slider.

Das könnte Sie auch interessieren

• Startseitengestaltung und Vitrinenverwaltung im E-Commerce: Wie ordnen Sie die Startseiten-Vitrine? Bereiche, Reihenfolge, Mobil, Geschwindigkeit und Kampagnenkalender, Praxisleitfaden, Rechner für den Weg zum Produkt und Startseitenprüfung
• E-Commerce-Kampagnenkalender: So erstellen Sie einen Kampagnenplan, der das ganze Jahr über Umsatz bringt
• Wie optimiert man Produktbilder? Praxisleitfaden zu Größe, Format (WebP), Dateiname und Alternativtext im E-Commerce
• E-Ticaret Sitesinde Mobil Uyumun Önemi