So erstellen Sie eine beeindruckende Produkttour mit SlideDeck 2 in WordPress

Content-Slider sind heutzutage in WordPress weit verbreitet, aber sie werden typischerweise nur in einer sehr begrenzten Anzahl von Fällen verwendet – typischerweise befinden sie sich auf Homepages, um aktuelle Beiträge oder Bildergalerien zu präsentieren. Ein neuer Trend entwickelt sich, bei dem WordPress-Websites das Potenzial und die Flexibilität von Content-Slidern nutzen, um überzeugende Geschichten zu erzählen, die Besucher zum Handeln motivieren – das heißt, in Form von Produkttouren.

Die Verwendung eines Content-Sliders für Ihre WordPress-Produkttour kann Ihnen helfen, Produkte besser zu verkaufen, indem Sie Benutzer in ihrem eigenen Tempo durch die wichtigsten Punkte führen – dies ist besser als die reine Verwendung eines Videos, da sie vor- und zurückspringen können, um bestimmte, definierte Punkte anzusteuern, anstatt raten zu müssen, nach welcher Zeitmarke sie suchen sollen. Darüber hinaus nutzt die Verwendung eines Content-Sliders auf diese Weise alle Arten von Webmedien – das bedeutet, Sie können interaktive Inhalte in die Folien einfügen, anstatt Ihren Benutzer zu zwingen, ein Video passiv anzusehen.

Bis vor kurzem musste man programmieren können, um etwas anderes als die einfachsten Content-Slider-Produkt-Touren zu erstellen, aber wir haben ein fantastisches Slider-Plugin namens SlideDeck 2 verwendet, das all das ändert.

Dieses leistungsstarke Plugin macht es super einfach, beeindruckende Slider in wenigen Minuten zu erstellen, ohne eine einzige Zeile Code zu benötigen. Wir haben eine weitere robuste Funktion von SlideDeck 2 in einem früheren Beitrag behandelt, aber ihr neuestes Update ermöglicht es Ihnen, benutzerdefinierte Inhalts-Slider zu erstellen und den Inhalt jeder Folie anzupassen, um überzeugende Präsentationen zu erstellen, die Ihre Besucher zum Handeln motivieren. Wir haben diesen kurzen Leitfaden zusammengestellt, um Ihnen zu zeigen, wie Sie mit SlideDeck 2 eine tolle Produkt-Tour für Ihre WordPress-Website erstellen.

Plugin kaufen & installieren

Zuerst das Wichtigste: Benutzerdefinierte Inhaltsfolien sind eine Premium-Funktion in SlideDeck 2, daher müssen Sie es kaufen, um es auf Ihrer Website zu verwenden. Wir empfehlen Ihnen, die SlideDeck-Website zu besuchen und das Plugin zu kaufen – für die Leistung, die es bietet, ist es ziemlich günstig und Sie können einfach upgraden, um bessere Funktionen zu erhalten und es auf mehr Websites zu nutzen.

Um die Funktion für benutzerdefinierte Inhalte freizuschalten, müssen Sie entweder das Professional- oder das Developer-Paket erwerben, dann das Plugin plus ein „Addon“ installieren, das die zusätzlichen Funktionen freischaltet.

Um das Plugin zu installieren, können Sie unserer hilfreichen Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins folgen.

Terminologie

Bevor wir beginnen, gibt es ein paar Begriffe, die wir erklären sollten:

• Folientyp – Es gibt 4 verschiedene Folientypen, die jeweils für eine bestimmte Art von Inhalt konzipiert sind: Bild, Video, Text und HTML.
• Linsen – Linsen sind wie Themes für Ihren Content-Slider. Sie steuern, wie Ihr Slider aussieht und sich verhält, sowie wie der Inhalt auf der Seite präsentiert wird. Genau wie bei WordPress-Themes dauert das Anwenden einer anderen Linse auf Ihren Inhalt nur wenige Sekunden und kann ein deutlich anderes Aussehen und Gefühl für Ihren Slider ergeben.

Ok, jetzt, da der Fachjargon aus dem Weg ist, aktivieren Sie SlideDeck 2 und legen wir los!

Erstellen eines benutzerdefinierten Inhalts-SlideDecks

Wir zeigen Ihnen, wie Sie einen Produkt-Tour-Content-Slider erstellen, der vier verschiedene Inhaltstypen mischt, indem Sie die Funktion „Benutzerdefinierter Inhalt“ von SlideDeck verwenden. Klicken Sie zunächst auf „Verwalten“, um zum Haupt-Dashboard zu gelangen. Auf diesem Bildschirm können Sie neue SlideDecks erstellen und Ihre vorhandenen SlideDecks sortieren.

Klicken Sie im Abschnitt „Benutzerdefinierter Inhalt“ auf die blaue Schaltfläche „SlideDeck erstellen“. Sie gelangen zum Bildschirm „Benutzerdefinierter Inhalt-Editor“, um Ihre erste Folie zu erstellen. Sobald Sie im benutzerdefinierten Inhalt-Editor sind, beginnen Sie damit, Ihrem SlideDeck einen Namen zu geben. Sie werden feststellen, dass Ihre erste Folie erstellt wurde und Sie je nach verwendetem SlideDeck 2-Paket die Wahl zwischen drei oder vier verschiedenen Folientypen haben – Benutzer des Professional-Pakets haben Zugriff auf die Folientypen Bild, Video und Text; Benutzer des Developer-Pakets können zusätzlich zu diesen drei Typen den Folientyp HTML auswählen.

Unter diesem Flyout-Menü befindet sich eine der einzigartigsten Funktionen von SlideDeck 2 – das Live-Vorschaufenster (es ist einer der Gründe, warum SlideDeck 2 ein empfohlenes WordPress-Plugin in WPBeginner's Blueprint ist). Hier sehen Sie Ihren Slider in Echtzeit aktualisiert, während Sie ihn bearbeiten.

Beginnend mit einer Bildfolie

Beginnen wir mit einer Bildfolie – etwas, das unseren Besuchern einen schnellen & visuell ansprechenden Überblick über die Tour gibt, die sie bald unternehmen werden. Klicken Sie auf den Folientyp „Bildfolie“. Das Flyout-Menü wird aktualisiert und zeigt Ihnen alle Optionen an, die für die Erstellung einer Bildfolie relevant sind:

Bild hochladen | URL angeben – Wählen Sie, ob Sie Ihr Bild in die WordPress-Mediathek hochladen oder einfach eine URL einfügen möchten, wenn es woanders gehostet wird.
Beschriftung | Textkörper | Keine – Legen Sie fest, ob eine Textbeschriftung über dem Bild angezeigt werden soll oder ob begleitender kurzer Textkörper vorhanden sein soll. Alternativ können Sie einfach das gesamte Bild ohne zugehörigen Text anzeigen.
Folienlink – Geben Sie eine URL an, die aufgerufen werden soll, wenn der Benutzer irgendwo auf die Folie klickt.
Titel – Geben Sie der Folie einen Titel, der entweder im Bereich Beschriftung oder Textkörper angezeigt wird.
Beschreibung – Geben Sie den Beschreibungstext für die Folie ein. Sie können hier Rich-Text eingeben!
Position der Beschriftung – Bestimmt die Position der Textüberlagerung auf der Folie. Beschriftungen können oben/unten und Textkörper links/rechts platziert werden.

Sobald Sie Ihre Folie nach Ihren Wünschen eingerichtet haben, klicken Sie einfach auf die Schaltfläche „Übernehmen“, und der Live-Vorschau-Bereich wird aktualisiert, um Ihnen Ihre erste Folie anzuzeigen. In unserem Beispiel haben wir unsere Folie erstellt, indem wir eine URL mit einer Bildunterschrift unten und ohne Folienlink angegeben haben.

Das ist also unsere erste benutzerdefinierte Inhaltsfolie – einfach, oder? Jetzt fügen wir eine zweite hinzu, um ein Video mit der Demo unseres Produkts zu zeigen.

Erstellung der Videofolie

SlideDeck 2 unterstützt Videoinhalte aus drei Quellen – YouTube, Vimeo und Dailymotion – das bedeutet, wir müssen nur unser Produkt-Demo-Video auf einen dieser Dienste hochladen und dann die URL zur Videoseite einfügen & auf „Aktualisieren“ klicken.

Wie beim Bild-Slide-Typ können Sie einen Titel und eine kurze Bildunterschrift oder einen Textabsatz hinzufügen, um Ihren Besuchern eine Vorstellung davon zu geben, was sie im Video sehen werden. Standardmäßig übernimmt SlideDeck 2 den Bildunterschrifteninhalt Ihrer YouTube/Vimeo/Dailymotion-Seite, aber Sie können ihn an Ihre Bedürfnisse für die Produkttour anpassen.

Wie zuvor klicken Sie auf Anwenden und machen einen schnellen Klick durch den Slider – Sie können nun zwischen Ihren Bild- und Videoslides hin und her wechseln.

Erstellen einer Textfolie

Manchmal brauchen Sie einfach Platz für etwas Text – um zum Beispiel eine Liste von Funktionen anzuzeigen oder ein Zitat aus einer begeisterten Produktbewertung zu teilen. In solchen Fällen können wir den Text-Slide-Typ verwenden.

Dies ist ein sehr einfacher Folientyp mit nur wenigen Optionen, die Sie berücksichtigen müssen:

Layout – Das grundlegende Layout platziert einfach den Titel oben auf der Folie, mit dem darunter fließenden Text. Mehrspaltig bietet eher ein Zeitungsformat, indem der Text automatisch in zwei Spalten umgebrochen wird. Blockzitat ermöglicht es Ihnen, einen kurzen Textausschnitt mit großer, fetter Typografie hervorzuheben. Wie zuvor klicken Sie auf Anwenden, um die Folie in Ihr SlideDeck einzufügen.

Folien neu organisieren

An diesem Punkt denken Sie vielleicht, dass Sie lieber mit Ihrer Videoslide anstelle des Bildes beginnen möchten, damit Ihre Benutzer sofort mit der Tour interagieren und sich damit beschäftigen. SlideDeck ermöglicht Ihnen dies sofort – klicken und ziehen Sie im Bereich der Slide-Kopfzeile die Videoslide und legen Sie sie in den leuchtenden Bereich links von der Bildslide. Super einfach!

Weiter geht's – Verwendung des HTML-Folientyps

Der HTML-Folientyp ist eine leistungsstarke Ergänzung des Entwicklerpakets von SlideDeck 2, mit der Sie Ihren eigenen HTML-Code in eine Folie eingeben können. Es ist perfekt für komplexere Layouts Ihrer Inhalte oder für die Hinzufügung leistungsfähigerer Interaktionen zu Ihrem Inhalts-Slider. Sie können zum Beispiel ein Anmeldeformular einbetten, damit Kunden am Ende der Produkt-Tour E-Mails erhalten können – eine leistungsstarke Handlungsaufforderung, wenn es jemals eine gab!

Wählen Sie den HTML-Slide-Typ, um den HTML-Editor im Flyout-Menü anzuzeigen.

In das Feld HTML einfügen können Sie Ihren benutzerdefinierten Code einfügen. Sie werden feststellen, dass die verschiedenen Tags automatisch farblich hervorgehoben werden, um sicherzustellen, dass sie korrekt strukturiert sind. Einige wichtige Punkte, die Sie beachten sollten:

• Sie können CSS-Stilregeln für den Slide-Inhalt zwischen <style></style>-Tags einfügen, und diese gelten für alle Slides im SlideDeck.
• Da die Live-Vorschau von SlideDeck nicht vorhersagen kann, wie die Stile Ihres Themas mit Ihrem Inhalts-Slider interagieren könnten, erhalten Sie für komplexe Stile eine genauere Vorschau, wenn Sie sie auf der Seite anzeigen, auf der Sie Ihr SlideDeck veröffentlichen möchten.

Wenn der Code vorhanden ist, klicken Sie auf Anwenden, und die Folie wird zur Rotation hinzugefügt.

Die Linse konfigurieren

Sie haben jetzt Ihr erstes benutzerdefiniertes Inhalt-SlideDeck erstellt! Nehmen Sie sich ein paar Minuten Zeit, um die Folien in der Live-Vorschau durchzuklicken und sich an der Freude einer gut gemachten Arbeit zu erfreuen.

Jetzt ist es an der Zeit, es mit Ihrer Website nahtlos zu gestalten, indem Sie Ihre Linse konfigurieren. SlideDeck enthält eine riesige Menge an Optionen zur Steuerung des Erscheinungsbilds Ihrer neuen Produkt-Tour durch die Anpassung der Linse.

Speichern & Veröffentlichen Ihres SlideDecks

Toller Inhalt? Check. Süßes Thema ausgewählt und angepasst? Check. Es sieht so aus, als wären Sie bereit, Ihre neue Produkt-Tour zu veröffentlichen und Ihre Besucher in Kunden zu verwandeln!

SlideDeck bietet drei Möglichkeiten, Ihre Slider in Ihre WordPress-Website einzubetten: das Einfügen in den Inhalt einer vorhandenen Seite oder eines Beitrags, das Erstellen einer neuen Seite oder eines neuen Beitrags mit eingebettetem Slider und schließlich das Einfügen in Ihre Seitenvorlage, was wahrscheinlich Ihre beste Wahl ist, wenn Sie die Produkt-Tour auf Ihrer Homepage hinzufügen möchten.

Zusammenfassung

Obwohl Inhalts-Slider normalerweise nur für Bildergalerien oder vorgestellte Beiträge verwendet werden, bietet Ihnen SlideDeck 2 eine Menge Flexibilität, um das Potenzial von Inhalts-Slidern zu erkunden und überzeugende Erlebnisse zu schaffen, die Ihre Besucher fesseln und wiederkommen lassen. Wir bei WPBeginner empfehlen Ihnen dringend, es auszuprobieren! Ein Live-Beispiel dafür, wie wir einen benutzerdefinierten SlideDeck verwenden, finden Sie auf unserer Seite Kostenlose WordPress-Blog-Einrichtung.

Haben Sie ein Beispiel für ein SlideDeck, das Sie teilen möchten? Lassen Sie es uns in den Kommentaren wissen! Schauen Sie sich auch Teil eins dieser Serie an, in dem wir Ihnen zeigen, wie Sie dynamische Quell-SlideDecks erstellen.

Touch-Interface-Schieberegler sind die Zukunft des Webdesigns. Holen Sie sich SlideDeck jetzt. Verwenden Sie den Gutscheincode: WPB-SD2, um 20% Rabatt zu erhalten.