Eine Slideshow für deine Website-Wieso? Weshalb? Warum? 

14. November 2022
Porträt junger lachender Frau mit langen braunen Haaren innerhalb einer Slide Show

Fragst du dich wie du die Aufmerksamkeit deiner Website-Besucher/-innen auf dich ziehen kannst? Und du sie am besten auf deiner Website hältst? Mit den richtigen visuellen Elementen ist einiges möglich. Wir zeigen dir wie du eine Website Slidehow erstellen kannst und damit mehr Besucher/-innen auf deinen Seiten bleiben.

Durch PowerPoint und Diashows übermittelt die Slideshow uns bereits viele Jahrzehnte Erlebtes, Fakten und schöne Dinge und wird deshalb noch weiterhin beliebt bleiben. Auf einer Website verschafft sie einen wundervollen ersten Eindruck.

Was ist eine Slideshow?

Eine Slideshow setzt sich aus aneinandergereihten Bildern, Fotos, Graphiken und anderen Inhalten zusammen die hintereinander in einem festgelegten Zeitraum in einer bestimmten Reihenfolge automatisch abgespielt werden.

Website-Slideshows zeigen ein Bild nach dem anderen in der Unendlich-Schleife. Strategisch über dem sogenannten Fold der Seite platziert wird diese zum Knaller, wenn dessen Inhalt fesselt.

Foto eines vollen Gaderobenständers mit Herbstmode und der Überschrift "40% auf alle Kleider"

ElfSight Slide Show

Weshalb du eine Slideshow haben solltest?

Wie bereits erwähnt, schafft diese Aufmerksamkeit.

Und genau das willst du doch, oder?

Sie macht sich perfekt für dein Fotografie Portfolio. Schmückt das neue Menü deines Restaurants. Sie stellt deinen Best-Seller zur Schau und vieles mehr. Wie zum Beispiel deine Produkte im Online-Shop von allen Seiten zu zeigen. Die Geschichte deiner Firma und deine eigene Geschichte kann sie bildlich erzählen.

Beispiel eines Goldfishfotos hochgeladen in das Powr App

Powr.io SlideShow editor

Was muss ich bei einer Website-Slideshow beachten?

Wenn du die Slideshow-Vorlage auswählst, vergesse folgendes nicht:

Manuelle Übergänge zwischen den Sildes einführen.

Nutze hierzu Pfeile und Buttons. Lasse Besucher/-innen die Option die Show zu pausieren oder zurückzuspringen.

Seitenzahl sollte visuell angezeigt werden

Es ist eindeutiger, wenn du angibst wie viele Slides es insgesamt sind (zum Bsp.: 3/5).

Maximale Seitenzahl

Halte die Anzahl zwischen 5-6 Slides. Nicht mehr. Die Aufmerksamkeitsspanne ist gering, niemand wird sich durch über 60 Seiten wurschteln. Sogar diese Zeilen sind bereits zu lang. Du liest noch? Du bist großartig!

Mobile-freundliche Slider

Stell sicher, dass die Show auf allen mobilen Geräten angesehen werden kann. Außer vermutlich deiner Urgroßmutter wird sich jeder deine Website auf dem Handy ansehen wollen.

Optimierte Bilder

Bilder, die weniger Speicher einnehmen, laden schneller. Passe diese an, damit das Durchklicken reibungslos läuft.

Animationen

Sie geben dir zwei Möglichkeiten. Erstens, die Besucher/-innen zu erschrecken oder zweitens, dazu bewegen weiter zu klicken. Je nach Inhalt natürlich. Überlege dir also genau, was du animierst und automatisch ablaufen lässt.

Wie lädst du die Slideshow in deine Website?

Es bestehen folgende Optionen:

  • Die bestehende Slideshow einer Bildergalerie oder Produktliste zu nutzen
  • Ein externes Programm, wie einen Slideshow Maker zu verwenden
  • HTML-Codes einzubetten, die von einem/einer Programmierer/-in geschrieben wurden

Wie die Slideshow mit Webnode einbauen?

Slideshow mit rechts links Pfeilen

Screenshot einer Slideshow im Webnode Editor

Im Webnode Editor geht dies ganz schnell. Füge eine Fotogalerie hinzu, indem du auf das große schwarze Plus-Zeichen klickst, das erscheint wenn du mit der Maus über den Seitenbereich fährst. Wähle Galerie aus und lade deine Bilder hoch.

In der Ansicht gehe dann auf Diashow und Schieber (oder alternativ Karussell). Eine detaillierte Anleitung hierzu findest du im Handbuch.

Abbildung eines weißen Beutels einer E-Shop Produkt-Seite als Teil einer Slideshow.

Einer Seite einer Produktliste als Form einer Slide –Show (erkennbar an den unteren Punkten und den Pfeilen rechts und links)

Für eine Produkt-Liste sind die Schritte ähnlich. Füge diese hinzu und wähle Slideshow im Dropdownmenü des Layouts.

Programme zum Erstellen der Slideshow

Nein, wir nennen nicht nochmal PowerPoint. 😉 Mit Cincopa kannst du deine Slideshow gratis kreieren, um diese zu testen.

Bild eines Sonnerunterganges auf einem goldenen Kronfeld als Startbild einer Video-Slideshow

Cincopa Slider

Weitere Programme zur Erstellung von Diashows sind Canva oder auch Kizoa mit denen du auch Videos erstellen und editieren kannst. Die Slideshow lädst du anschließend als HTML-Code in deine Website.

Den Code zu Show selbst schreiben

Sollten dir Computersprachen liegen, kannst du mit w3schools deinen eigenen Code zur Slideshow schreiben. Wir wünschen dir viel Erfolg dabei.

Und eine Video Slideshow?

Um ein Video aus einer Slideshow zu machen, ist Canva sinnvoll. Es hat einige Extras wie Vorlagen und andere Elemente. Stickers und Graphiken kannst du leicht einbauen. Lade dein fertiges Video als Code in deine Website, indem du auf deinem Canva-Projekt auf teilen, mehr und embed gehst.

Die Slideshow rutscht nicht so schnell in die Vergessenheit

Zeitgemäße Diashows mit optimierten Bildern, durchdachten Texten und auffälligen Designelementen, wecken Interesse. Schaffe etwas, das nicht so allgemein klingt wie genau dieser Satz.

Das Kreieren einer Slideshow ist ein komplexer kreativer Prozess. Folgender Artikel zum Webdesign, wird dir hier weitere Anregungen geben.