WordPress Revolution-Slider Tutorial für Fortgeschrittene: Sprungmarken und Links im Slider setzen

Wer täglichen Umgang mit WordPress gewohnt ist, weiß, dass man ohne HTML-, jQuery- oder CSS-Kenntnisse schnell an seine Grenzen kommt. Abgesehen davon, dass ein gutes Auge für Design unausweichlich ist, schaffen hier Plugins Abhilfe, denn sie erweitern die Funktionalität und somit die Spielwiese von WordPress. Heutzutage sind derartige Erweiterungen nicht mehr wegzudenken.

Der Revolution Slider ist ein solches Plugin, das bereits über 2.500.000 Nutzer (Angabe des Herstellers) begeistert – und das nicht ohne Grund: Unzählige Variationen Slider, Hero Scenes, Front Pages und auch Videos wurden bereits mit dem Revolution Slider eingebunden.

Aber gerade weil der Funktionsumfang so mächtig ist, zieht das Nachteile mit sich: Der starke Anspruch an die Ressourcen der Seiten sollte nicht außer acht gelassen werden, zumal sich die Ladezeiten erhöhen, die Geduldsfäden der User aber verkürzen. Apropos Geduld – die muss vorhanden sein, denn einen Revolution Slider bastelt man nicht mal eben fluffig aus dem Handgelenk.

Wer sich die Bedienung des Tools aneignen möchte, findet im Web bereits einige Tipps und Tricks zu diversen Einstellungen. Diese werden oft oberflächlich angekratzt, was für den Einstieg auch völlig ausreichend ist. In diesem Tutorial findet ihr eine Schritt-für-Schritt-Anleitung, wie man Sprungmarken und Links innerhalb seiner Slides setzt und, als kleinen Zusatz, welche Alternative es zu einem herkömmlichen Button gibt.

Hier bei elsch&fink kommt der Revolution Slider regelmäßig zum Einsatz. Ein Thema hat es mir dabei besonders angetan, denn bei unserem Projekt Gites kamen Sprungmarken und Links ins Spiel, die den Slider zum Leben erwecken und den User nicht nur zur Aktion auffordern, sondern ihn auch schnell zum passenden Thema navigieren.

Wann sind Sprungmarken und Links für mein Projekt sinnvoll?

Bei der Verwendung von Links denkt man zuerst an den Klassiker: der Button. Ziel einer jeden Website ist es, den User so schnell und einfach wie möglich auf eine Seite zu navigieren, die ihn tatsächlich interessiert. Ein Button auf der Startseite fällt im Slider besonders ins Auge – wer kann schon dem Charme einer ästhetischen Komposition von Bildern und grafischen Elementen widerstehen?

Aber wie sieht es mit Sprungmarken aus? Das Plugin bietet die Möglichkeit, innerhalb mehrerer Slides von einem Slide zum anderen zu springen. Das ist nicht immer sinnvoll, aber der Fantasie sind keine Grenzen gesetzt.

Na, dann kann es ja los gehen

Voraussetzung meines Tutorials ist, dass ihr das Plugin installiert und euch bereits mit den wichtigsten Schaltflächen auseinander gesetzt habt. Das Ergebnis wird eher simpel und sinnfrei ausfallen, um den Fokus stark auf die Vorgehensweise zu legen.

 

Slider Einstellungen

In den Slider Einstellungen gibt es keine Besonderheiten zu beachten, jeder kann seinem Slider einen Namen geben und die Größen für die einzelnen Layouts bestimmen.

Bei einem solchen Geschoss handelt es sich um einen Revolution Slider, der aus mehreren Slides bestehen muss, damit auch Sprungmarken von Slide zu Slide gesetzt werden können.

Hinweis: Für eine gute Usability sollten sich alle Schaltflächen aus den Slides auch in der Sitemap befinden.

Als Alternative und für eher internetaverse User können Navigationspfeile eingeblendet werden. Ausweichend können so alle Slides nacheinander betrachtet werden. Für ein optimales Ergebnis empfehle ich aber, den Loop auszuschalten, sodass die Slides nicht automatisch eingeblendet werden.

Slide Editor

Folgendes Beispiel: Eine Webseite, die rund um das Thema Weimaraner informiert. Der Slider soll aus vier Slides bestehen. Zuerst müssen alle Slider angelegt und überlegt werden, welche Inhalte die Slides transportieren sollen.

1. Slide #1: Hier sollte deutlich werden, worum es geht: Eine Überschrift, ein Zweizeiler und Buttons, die zu den drei weiteren Slides führen. Der Hintergrund kann aus einem Bild (Quelle > Haupt / Hintergrund Bild > Media Library) bestehen, der Text (Add Layer > Text / HTML) und die Buttons werden jeweils als Element (Add Layer > Button) eingefügt.

Bevor ich die Buttons mit Aktionen belege, fülle ich zuerst die drei weiteren Slides mit Inhalt und Bildern.

2. Slide #2: An dieser Stelle werden Unterkategorien über die Rasse aufgezeigt. Dies habe ich wieder durch ein Hintergrundbild, Text und Buttons gelöst. Ab diesem Slide verlinken die Elemente nur noch auf Unterseiten der Webseite. Welche Alternativen es zum herkömmlichen Button gibt, zeige ich euch in Slide #3.

3. Slide #3: Hier soll es um Beschäftigungsmöglichkeiten für den Hund gehen. Im Slide #1 habe ich einen Button angelegt, der später hierher verweisen soll. Alternativ zu einem Button bereitet man Bilder mit transparentem Hintergrund vor.

Zu Testzwecken wären das in diesem Fall Silhouetten von Hunden, die als PNG abgespeichert und unter Add Layer > Image eingefügt werden. Der Vorteil liegt klar auf der Hand: keine schnöden Buttons, aber gewohnte Interaktion. So kann die Silhouette als Button dienen. Das funktioniert am besten mit aussagekräftigen oder im Zusammenhang sinnvoll eingesetzten Bildern, außer ihr schreibt eine Benennung dazu.

4. Slide #4: Im letzten Slide sind drei Futtersäcke abgebildet, die auf die entsprechenden Unterseiten führen sollen. Zudem sind die Säcke mit einer Mouseover-Funktion belegt. Das Tutorial, wie man im Revolution Slider eine Animation erstellt, findest du schon bald auf unserem Blog.

Tacheles: Aktionen einsetzen

Nun existieren alle Slides samt Inhalte. Daher kehren wir zurück in Slide #1. Hier klickt man auf den ersten Button. Über “Aktionen” sagt man dem Button, er soll auf Klick (Click) zu einem Slide springen (jump to Slide), und zwar zu dem darauf folgenden (Slide:Slide). Optional kann man bei “Verzögere ms” noch eintragen, dass noch Zeit verstreichen soll, bis die Aktion startet – das macht in diesem Fall aber keinen Sinn.

Genau diese Schritte werden auch mit den anderen beiden Buttons durchgeführt. Bei “Slide:Slide” entspricht das erste “Slide:Slide” dem zweiten Slide, der zweite dem dritten, der dritte dem vierten und so weiter. Etwas verwirrend.

Zwischendurch sollte das Ganze in der Vorschau getestet werden.

Danach öffnen wir Slide #2. Hier wollen wir aber keine Sprungmarken mehr innerhalb der Slides setzen, sondern Links zu den Seiten.

Ich klicke wieder auf den Button und ordne ihm unter “Aktionen” einen Link zu. Mit Klick (Click) auf den Button soll ein Link (simple Link) geöffnet werden, nämlich folgender (Link URL). Danach entscheidet man, ob es sinnvoll ist, den Link in einem neuen Tab zu öffnen und wählt dementsprechend “Gleiches Fenster” oder “Neues Fenster”.

In Slide #3 funktioniert das genauso mit den Silhouetten der Hunde bzw. mit Elementen, die ihr als PNG eingebunden habt.

Zu guter letzt, vergesst nicht, euren Revolution Slider responsiv anzupassen.

Hier könnt ihr den Slider testen:

Fazit: Für ein stimmiges Ergebnis hat das Konzept die höchste Priorität, sprich: Wie gelangt der User schnellstmöglich und bequem zu seinen Informationen? Dementsprechend werden mehrere Slides mit knappen Informationen und Buttons gefüttert und am Ende mit Aktionen belegt. Verbindet man diese Schritte mit einem ansehnlichen Design, wird deine Seite zum absoluten Hingucker.

Wir freuen uns auf eure Anregungen und beantworten gerne eure Fragen. Schreibt uns über info@elschundfink.de oder hinterlasst uns ein Kommentar.

Quelle Hundebilder: freepik.com

Spread the love

Über den Autor

Melissa Unkelbach
Auszubildende zur Mediengestalterin

2 Kommentare

  • Dirk on 26. Juni 2017

    Hi,

    großartiges Tutorial bzgl. unseres Sliders! Wir werden es auf unseren Social-Media-Kanälen verlinken!

    Viele Grüße,

    Dirk @ ThemePunch

    • Melissa Unkelbach on 26. Juni 2017

      Hey Dirk,
      vielen Dank für dein tolles Feedback, das freut uns sehr!

      Liebe Grüße,
      Melissa

Hinterlassen Sie einen Kommentar