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

Die Arbeit mit WordPress erleichtert die Erstellung und Verwaltung von Webseiten erheblich. Wer täglich mit der Software in Berührung kommt, weiß sicherlich die Erweiterungen durch Plugins sehr zu schätzen. Plugins erleichtern beispielsweise die Einbindung von Inhalten, die man selbst ohne großartige Java-Script-, CSS- oder HTML-Kenntnisse nicht mal so eben erstellen kann.

Der Revolution Slider hat sich in den letzten Jahren als eines der beliebtesten Plugins für WordPress herausgestellt. Kein Wunder, denn mit schnarchlangweiligen Slides hat das Tool nichts am Hut. Neben unzähligen Einstellungsmöglichkeiten bietet das Plugin zusätzliche Erweiterungsmöglichkeiten und Aktionen.

Aber ein so hoher Funktionalitätsumfang zieht auch Nachteile mit sich: Die Ladezeit eurer Seiten erhöht sich mit dem hohen Verbrauch der Ressourcen des mächtigen Tools. Zudem muss viel Zeit in die Entwicklung eines Slides investiert werden, um am Ende ein zufriedenstellendes Ergebnis präsentieren zu können.

In unserem ersten Tutorial über den Revolution Slider haben wir euch erzählt, wie man Sprungmarken und Links setzt (zum Tutorial). Diesmal geht es um das Einspielen von Animationen, um für mehr Interaktion und Abwechslung zu sorgen. Beide Tutorials lassen sich auch hervorragend verknüpfen.

Die folgenden Schritte setzen die Installation des Plugins und ein Grundverständnis über die Funktionen voraus. Zudem handelt es sich um ein banales Beispiel, um den Fokus auf die Einstellungen zu legen.

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

Kontakt


Name (Pflichtfeld)

E-Mail-Adresse (Pflichtfeld)

Anfrage

Postalisch:

elsch&fink GmbH
Von-Vincke-Straße 5-7
48143 Münster

Fernsprechapparat:

0251 66089944

elektronische Briefe:

info@elschundfink.de

elektronische Bewerbung:

bewerbung@elschundfink.de

Find us on

elschundfink facebook Social Media Münsterelschundfink google+ Social Media Münsterelschundfink twitter Social Media Münsterelschundfink instagram Social Media Münsterelschundfink xing Social Media Münsterelschundfink linkedin Social Media Münster