Inhalts-Schieberegler sind heutzutage in WordPress alltäglich, aber sie werden normalerweise nur in sehr begrenzten Fällen verwendet – normalerweise befinden sie sich auf Homepages, um aktuelle Beiträge oder Bildergalerien zu präsentieren. Es entwickelt sich ein neuer Trend, bei dem WordPress-Websites das Potenzial und die Flexibilität von Content-Slidern nutzen, um fesselnde Geschichten zu erzählen, die Besucher zum Handeln motivieren – also in Form von Produkttouren.
Die Verwendung eines Inhalts-Schiebereglers für Ihre WordPress-Produkttour kann Ihnen helfen, Produkte besser zu verkaufen, indem Sie die Benutzer in ihrem eigenen Tempo durch die Schlüsselpunkte führen – das ist besser als die einfache Verwendung eines Videos, da sie stattdessen zu bestimmten, definierten Punkten vor- und zurückspringen können einen Timecode erraten zu müssen. Darüber hinaus nutzt die Verwendung eines Inhalts-Schiebereglers auf diese Weise alle Arten von Webmedien – das heißt, Sie können interaktive Inhalte in die Folien einfügen, anstatt Ihren Benutzer zu zwingen, passiv ein Video anzusehen.
Bis vor kurzem mussten Sie wissen, wie man codiert, um etwas anderes als die einfachsten Inhalts-Slider-Produkttouren zu erstellen, aber wir haben ein fantastisches Slider-Plugin namens SlideDeck 2 verwendet, das all das ändert.
Dieses leistungsstarke Plugin macht es supereinfach, in wenigen Minuten tolle Slider zu erstellen, ohne dass eine einzige Codezeile erforderlich ist. Wir haben eine der anderen robusten Funktionen von SlideDeck 2 in einem früheren Beitrag behandelt, aber ihr neuestes Update ermöglicht es Ihnen, benutzerdefinierte Inhaltsschieberegler zu erstellen und den Inhalt jeder Folie anzupassen, um überzeugende Präsentationen zu erstellen, die Ihre Besucher zum Handeln motivieren. Wir haben diese Kurzanleitung zusammengestellt, um Ihnen zu zeigen, wie Sie mit SlideDeck 2 eine süße Produkttour für Ihre WordPress-Site erstellen können.
Kauf und Installation des Plugins
Das Wichtigste zuerst: Benutzerdefinierte Inhaltsfolien sind eine Premium-Funktion in SlideDeck 2, also müssen Sie sie kaufen, um sie auf Ihrer Website zu verwenden. Wir empfehlen Ihnen, zu gehen SlideDeck Website & kaufen Sie das Plugin – für die Leistung, die es enthält, ist es ziemlich billig und Sie können leicht upgraden, um bessere Funktionen zu erhalten und es auf mehr Websites zu verwenden.
Um die Funktion für benutzerdefinierte Inhalte freizuschalten, müssen Sie entweder das Professional- oder das Developer-Paket erwerben und dann das Plug-in sowie ein „Add-on“ installieren, das die zusätzlichen Funktionen freischaltet.
Um das Plugin zu installieren, kannst du unserer praktischen 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 Arten von Folien, die jeweils für eine bestimmte Art von Inhalten ausgelegt sind: Bild, Video, Text und HTML.
- Linse – Objektive sind wie Themen für Ihren Content-Slider. Sie steuern, wie Ihr Schieberegler aussieht und sich verhält, sowie wie der Inhalt auf der Seite dargestellt wird. Genau wie bei WordPress-Designs dauert das Anwenden einer anderen Linse auf Ihre Inhalte nur wenige Sekunden und kann zu einem deutlich anderen Erscheinungsbild Ihres Schiebereglers führen.
Ok, jetzt, wo der Jargon aus dem Weg ist, fahren Sie fort und aktivieren Sie SlideDeck 2, und los geht’s!
Erstellen eines benutzerdefinierten Inhalts-SlideDecks
Wir zeigen Ihnen, wie Sie mithilfe der benutzerdefinierten Inhaltsfunktion von SlideDeck einen Inhalts-Slider für eine Produkttour erstellen, der vier verschiedene Arten von Inhalten mischt. Klicken Sie zunächst auf „Verwalten“, um zum Haupt-Dashboard zu gelangen. In 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 werden zum Bildschirm Custom Content Editor weitergeleitet, um Ihre erste Folie zu erstellen. Sobald Sie im Editor für benutzerdefinierte Inhalte gelandet sind, beginnen Sie damit, Ihr SlideDeck zu benennen. Sie werden feststellen, dass Ihre erste Folie erstellt wurde, und Sie haben die Wahl zwischen drei oder vier verschiedenen Folientypen, je nachdem, welches Paket von SlideDeck 2 Sie verwenden – Benutzer des Professional-Pakets haben Zugriff auf Bild-, Video- und Textfolie Typen; Benutzer des Entwicklerpakets können zusätzlich zu diesen drei den HTML-Folientyp 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 Themelocals Blueprint ist). Hier sehen Sie Ihre Slider-Aktualisierung in Echtzeit, während Sie sie bearbeiten.
Beginnen Sie mit einer Bildfolie
Beginnen wir mit einer Bildfolie – etwas, das unseren Besuchern einen schnellen und visuell ansprechenden Überblick über die bevorstehende Tour gibt. Klicken Sie auf den Folientyp „Bildfolie“. Das Flyout-Menü wird aktualisiert und zeigt Ihnen alle Optionen zum Erstellen einer Bildfolie:
Bild hochladen | Geben Sie eine URL an – Wählen Sie, ob Sie Ihr Bild in die WordPress-Mediengalerie hochladen oder einfach eine URL einfügen möchten, wenn es woanders gehostet wird.
Bildunterschrift | Haupttext | Keiner – Sagen Sie SlideDeck, ob Sie möchten, dass eine Textbeschriftung das Bild überlagert, oder ob Sie einen kurzen Haupttext haben möchten, der es begleitet. Alternativ können Sie einfach das gesamte Bild ohne zugehörigen Text anzeigen.
Slide-Link – Geben Sie eine URL an, die besucht werden soll, wenn der Benutzer irgendwo auf die Folie klickt.
Titel – Geben Sie der Folie einen Titel, der entweder im Beschriftungs- oder im Fließtextbereich angezeigt wird.
Beschreibung – Geben Sie die Beschreibungskopie für die Folie ein. Hier können Sie Rich-Text eingeben!
Beschriftungsposition – Bestimmt die Position der Texteinblendung auf der Folie. Bildunterschriften können oben/unten stehen und Textkörper links/rechts.
Sobald Sie Ihre Folie nach Ihren Wünschen eingerichtet haben, klicken Sie einfach auf die Schaltfläche „Übernehmen“, und der Bereich „Live-Vorschau“ wird aktualisiert, um Ihnen Ihre erste Folie zu zeigen. In unserem Beispiel haben wir unsere Folie erstellt, indem wir eine URL mit einer Beschriftung unten und ohne Folienlink angegeben haben.
Das ist also unsere erste benutzerdefinierte Inhaltsfolie, die erstellt wurde – ganz einfach, oder? Jetzt fügen wir ein zweites hinzu, um ein Video hinzuzufügen, das die Demo unseres Produkts zeigt.
Erstellen der Videofolie
SlideDeck 2 unterstützt Videoinhalte aus drei Quellen – YouTube, Vimeo und Dailymotion – was bedeutet, dass wir lediglich das Demovideo unseres Produkts auf einen dieser Dienste hochladen und dann die URL zur Seite des Videos einfügen und auf „Aktualisieren“ klicken müssen.
Wie beim Bildfolientyp können Sie einen Titel und eine kurze Bildunterschrift oder einen Textabschnitt hinzufügen, um Ihren Besuchern eine Vorstellung davon zu geben, was sie im Video sehen werden. Standardmäßig zieht SlideDeck 2 den Untertitelinhalt, den Sie auf Ihrer YouTube-/Vimeo-/Dailymotion-Seite haben, aber Sie können ihn an Ihre Bedürfnisse für die Produkttour anpassen.
Klicken Sie wie zuvor auf Übernehmen und klicken Sie schnell durch den Schieberegler – Sie können jetzt zwischen Ihren Bild- und Videofolien hin und her wechseln.
Erstellen einer Textfolie
Manchmal brauchen Sie nur Platz für etwas Text – um beispielsweise eine Funktionsliste anzuzeigen oder ein Zitat aus einer begeisterten Produktbewertung zu teilen. In solchen Fällen können wir den Textfolientyp verwenden.
Dies ist ein sehr unkomplizierter Folientyp, bei dem nur wenige Optionen zu berücksichtigen sind:
Layout – Das Grundlayout platziert den Titel einfach oben auf der Folie, während der Text darunter fließt. Mehrspaltig bietet eher ein zeitungsähnliches Format, indem der Text automatisch in zwei Spalten umbrochen wird. Blockquote ermöglicht es Ihnen, einen kurzen Textausschnitt mit großer, fetter Typografie hervorzuheben. Klicken Sie wie zuvor auf Übernehmen, um die Folie zu Ihrem SlideDeck hinzuzufügen.
Folien neu organisieren
An diesem Punkt denken Sie vielleicht, dass Sie mit Ihrer Videofolie anstelle des Bildes führen möchten, damit Ihre Benutzer sofort mit der Tour interagieren und sich daran beteiligen können. Mit SlideDeck können Sie dies sofort tun – klicken Sie im Kopfzeilenbereich der Folie auf die Videofolie und ziehen Sie sie in den leuchtenden Bereich links neben der Bildfolie. Supereinfach!
Weiter geht es – mit dem HTML Slide Type
Der HTML-Folientyp ist eine leistungsstarke Ergänzung zum Entwicklerpaket von SlideDeck 2, mit der Sie Ihren eigenen HTML-Code in eine Folie eingeben können. Es eignet sich perfekt für komplexere Layouts Ihrer Inhalte oder zum Hinzufügen leistungsfähigerer Interaktionen zu Ihrem Inhalts-Schieberegler. Sie können beispielsweise ein Anmeldeformular einbetten, damit Kunden am Ende der Produkttour einen E-Mail-Newsletter erhalten können – ein starker Call-to-Action, falls es jemals einen gab!
Wählen Sie den HTML-Folientyp aus, 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 farbcodiert werden, damit Sie sicherstellen können, dass sie korrekt strukturiert sind. Ein paar wichtige Punkte zu beachten:
- Sie können CSS-Stilregeln für den Folieninhalt zwischen
-Tags einfügen, und sie gelten für alle Folien im SlideDeck
- Da die Live-Vorschau von SlideDeck nicht vorhersagen kann, wie die Stile Ihres Themas mit Ihrem Inhalts-Schieberegler interagieren könnten, erhalten Sie bei komplexen Stilen 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 Übernehmen, und die Folie wird der Rotation hinzugefügt.
Konfigurieren des Objektivs
Sie haben jetzt Ihr erstes benutzerdefiniertes Inhalts-SlideDeck erstellt! Fahren Sie fort und nehmen Sie sich ein paar Minuten Zeit, um durch die Folien in der Live-Vorschau zu klicken und sich im Glanz einer gut gemachten Arbeit zu sonnen.
Jetzt ist es an der Zeit, dass es nahtlos mit Ihrer Website aussieht, indem Sie Ihr Lens konfigurieren. SlideDeck enthält eine Vielzahl von Optionen zum Steuern des Erscheinungsbilds Ihrer neuen Produkttour durch Anpassen des Objektivs.
Speichern und veröffentlichen Sie Ihr SlideDeck
Toller Inhalt? Überprüfen. Süßes Thema ausgewählt und angepasst? Überprüfen. Klingt, als wären Sie bereit, Ihre neue Produkttour zu veröffentlichen und Ihre Besucher in Kunden umzuwandeln!
SlideDeck bietet drei Möglichkeiten, Ihre Schieberegler in Ihre WordPress-Site einzubetten – Einfügen in den Inhalt einer vorhandenen Seite oder eines Beitrags, Erstellen einer neuen Seite oder eines neuen Beitrags mit eingebettetem Schieberegler und schließlich Einfügen in Ihre Seitenvorlage, was höchstwahrscheinlich die beste Wahl ist wenn Sie die Produkttour zu Ihrer Homepage hinzufügen möchten.
Einpacken
Obwohl Inhalts-Schieberegler normalerweise nur für Bildergalerien oder hervorgehobene Beiträge verwendet werden, bietet Ihnen SlideDeck 2 eine Menge Flexibilität, um das Potenzial von Inhalts-Schiebereglern zu erkunden, um überzeugende Erlebnisse zu schaffen, die Ihre Besucher beschäftigen und wiederkehren lassen. Wir von Themelocal empfehlen Ihnen dringend, es sich anzusehen! Ein Live-Beispiel dafür, wie wir ein benutzerdefiniertes SlideDeck verwenden, finden Sie auf unserer kostenlosen WordPress-Blog-Setup-Seite.
Haben Sie ein Beispiel für SlideDeck, das Sie teilen möchten? Lass es uns in den Kommentaren wissen! Sehen Sie sich auch den ersten Teil dieser Serie an, in dem wir Ihnen zeigen, wie Sie Dynamic Source SlideDecks erstellen.
Touch-Interface-Schieberegler sind die Zukunft des Webdesigns. Holen Sie sich jetzt SlideDeck. Verwenden Sie den Gutscheincode: WPB-SD2 um 20% Rabatt zu bekommen.