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

In WordPressvon Melissa Unkelbach4 Kommentare

Wer den 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. Derartige Erweiterungen sind nicht mehr wegzudenken – so wie der Revolution Slider.

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

Sprungmarken und Links auf Ihrer Webseite

Sprungmarken und Links finden Sie überall. Und überall haben sie eines gemeinsam: Sie sind gut durchdacht und ergeben im Zusammenspiel eine strukturierte Nutzerführung. Mit Blick auf Ihre Sitemap und besonderem Augenmerk auf die interessanten Features Ihrer Webseite können Sie jeden Nutzer durch gezielte Links und Sprungmarken an die gewünschte Stelle führen. Erhält der User nämlich genau die Information, die er gesucht hat, bedeutet das eine längere Verweildauer auf Ihrer Webseite. Und genau das ist Ihr Ziel.

Kleiner Tipp, große Wirkung

Einen Tipp reiben wir Ihnen gleich vorweg unter die Nase: Wählen Sie die Einstellungen so, dass interne Links immer in demselben Fenster und externe Links in einem neuen Tab geöffnet werden. So unscheinbar und doch so wirkungsvoll, denn klickt der User auf einen solchen externen Link, der sich im neuen Tab öffnet, bleibt Ihre Webseite geöffnet und der User kommt gegebenenfalls auf Sie zurück. Schließt sich aber Ihre Webseite mit dem Öffnen eines externen Links, ist die Chance viel geringer, dass der Nutzer über den Zurück-Button wieder auf Ihre Seite gelangt.

WordPress Revolution Slider: Von einem Slide zum nächsten

Wir haben auf WordPress-Basis einen unaufgeregten Revolution Slider gebastelt, an dem wir Ihnen die Funktion der Sprungmarken- und Linksetzung näherbringen. Das Ergebnis sieht so aus:

Unser Beispiel besteht aus zwei Slides. Im ersten Slide kann der Nutzer sich zwischen zwei Buttons entscheiden: Der linke führt ihn per Sprungmarke auf den nächsten Slide, der rechte öffnet einen neuen Link.

Voraussetzung dieses Revolution Slider 6 Tutorials ist, dass Sie das Plugin installiert haben und die Grundeinstellungen kennen.

Hinweis: Eine Sprungmarke zu setzen bedeutet nicht nur, wie in unserem Beispiel, auf einen anderen Slide zu verweisen. Klassischerweise bedeutet es, dass sie den User auf Inhalte weiter unten (oder oben) auf derselben Seite führt. In diesem Zusammenhang ist es wichtig zu wissen, dass der Klick auf eine Sprungmarke die Seite nicht neu lädt, sie scrollt lediglich automatisch zum gewünschten Inhalt. Wie das geht, können Sie an dieser Sprungmarke sehen.

Legen Sie zwei Slides an und überlegen Sie sich passende Inhalte. Verfassen Sie für jeden Slide eine knackige Überschrift und ergänzen Sie, falls nötig, einen oder zwei Sätze. Noch zwei schicke Buttons dazu und fertig ist die Kiste.

Unser Tipp: Achten Sie bei der Benennung der Buttons auf eine aussagekräftige Wortwahl. Die mächtige Suchmaschine Google mag am liebsten das, was wir alle mögen: Drauf steht, was drin ist. Also bitte keinen Button mit “Mehr”, “Weiter” oder “Hier klicken”.

Um in Ihrem Revolution Slider eine Sprungmarke auf Ihren Button zu legen, klicken Sie diesen an, gehen dann oben rechts auf “Layer Options” und dort auf “Actions”.

Diese Maske öffnet sich:

Dort finden Sie unter “Slide Actions” > “Jump to Slide” und “Next Slide”. “Jump to Slide” bietet sich an, wenn Sie mehrere Slides erstellt haben und einen davon verlinken möchten. “Next Slide” dagegen ergibt Sinn, wenn der User über diesen Button zum darauffolgenden Slide geschickt werden soll.

In unserem Fall haben wir nur zwei Slides insgesamt und klicken daher auf “Next Slide”. Rechts wählen Sie unter “Interaction” aus, ob die Aktion per Click (Klicken), per Mouse Enter (Mauszeiger auf Button halten) oder aber per Mouse Leave (Mauszeiger über Button fahren und verlassen) starten soll. Unter “Action Type” gelangen Sie zurück zur bekannten Übersicht, wo Sie die Aktion ersetzen können. Zu guter Letzt können Sie unter “Action Delay” eine Verzögerung festlegen, nach der die Aktion starten soll. Wir belassen die Einstellungen so, wie sie sind.

Beachten Sie, dass bei der Aktion “Next Slide” kein fester Slide definiert wird, sondern immer auf den nächsten Slide verwiesen wird. Das ist besonders wichtig, wenn Sie im Nachhinein neue Slides generieren und die Reihenfolge ändern.

Schließen Sie das Fenster und klicken Sie auf den nächsten Button, um ihn mit einer URL zu versehen. Das funktioniert im Grunde genau wie die vorherige Aktion: Klicken Sie wieder auf “Actions” und wählen Sie diesmal unter “Link Actions” > “Simple Link” aus. Es gibt nun ein paar Einstellungen, die Sie tätigen müssen: Tragen Sie unter “Link URL” Ihre vollständige URL ein, auf die der Button verweisen soll. Möchten Sie unseren oben aufgeführten Tipp befolgen, wählen Sie unter “Link Target” > “Same Window” aus, wenn es sich um einen internen Link handelt und “New Window”, wenn es um einen externen Link geht. Unter “Follow” haben wir noch “Follow Link” eingetragen. Das empfehlen wir Ihnen, damit der Crawler dem Link folgt und Linkkraft weiter gibt. Alle anderen Einstellungen haben wir so gelassen.

Speichern Sie Ihr Ergebnis und testen Sie den Revolution Slider.

Haben Sie passende Inhalte für diese Anwendungsmöglichkeiten gefunden, trägt dieser Schritt wesentlich dazu bei, Ihre Nutzer durch Ihre Webseite zu führen. Deshalb erweitern wir das Thema noch ein wenig und zeigen Ihnen, wie man im Revolution Slider 6 einen Anker auf die Seite setzt.

Sprungmarken bei WordPress: Wir lichten den Anker

Wenn Sie bereits oben auf unsere Sprungmarke geklickt haben, wissen Sie schon mal, was sie gemacht hat: Nämlich automatisch von A nach B gescrollt, ohne die Seite neu zu laden oder gar einen neuen Tab zu öffnen.

Auch mit einer solchen Aktion können Sie Ihren Button im Revolution Slider 6 belegen.
Dazu muss der Revolution Slider sich auf derselben Seite wie der Ankerpunkt befinden. Im ersten Schritt überlegen Sie sich daher, an welche Stelle der Button den Nutzer führen soll. Es ergibt Sinn, dafür eine Überschrift eines Absatzes auszuwählen.

In unserem Beispiel möchten wir, dass die Seite automatisch bis zu den Sprechzeiten scrollt, sobald der User im Revolution Slider 6 auf den Button “Ich bin eine Sprungmarke” klickt.

Um das zu realisieren, sind nur drei Schritte notwendig:

Schritt 1: Revolution Slider 6 anpassen

Im Slide klicken Sie dazu Ihren gewünschten Button an, wählen unter “Layer Options” > “Actions” aus und klicken unter “Link Actions” auf “Scroll To ID”.

In dieser Maske tragen Sie unter “Scroll to ID” bitte eine aussagekräftige Benennung für Ihren Anker ein. Wir nehmen meistens einen Begriff, der den Abschnitt gut thematisiert, zu dem wir scrollen möchten. In diesem Fall sind das die Sprechzeiten, also nennen wir unsere ID auch so. Alle anderen Felder lassen wir so stehen.

Tipp: Vermeiden Sie Umlaute und Großschreibung, wenn Sie eine ID vergeben.

Speichern Sie Ihren Revolution Slider.

Schritt 2: Abschnitt mit ID versehen

Navigieren Sie ins Backend Ihrer Seite, wo der Revolution Slider platziert werden soll. Binden Sie diesen dort ein. Geben Sie der entsprechenden Sektion oder der Überschrift dieselbe ID, die Sie im Slider vergeben haben. Diese muss eins zu eins übereinstimmen.

Da wir bei elsch&fink mit dem PRO Theme arbeiten, sieht das bei uns im WordPress-Backend so aus:

Wenn Sie Ihre ID nicht einfach in ein Feld eintragen können oder nicht wissen, wie man diese im umgebenden div einbindet, können Sie der Überschrift folgenden Code mitgeben:

<h2 id=“sprechzeiten“>Sprechzeiten</h2>

Speichern Sie Ihre Änderungen ab.

Schritt 3: Testen und korrigieren

Schauen Sie sich Ihr Ergebnis an und testen Sie den Button.

In unserem Beispiel sind wir mit dem Ergebnis noch nicht ganz zufrieden. Hier schiebt sich die Überschrift hinter unseren Header, sodass die Überschrift von dem Logo verdeckt wird.

Das wird nicht bei jedem von Ihnen vorkommen, aber für den Fall, dass die Darstellung bei Ihnen ebenfalls nicht korrekt ist, zeigen wir Ihnen, wie Sie diese ganz einfach anpassen können: Navigieren Sie zurück in Ihren Revolution Slider, wählen Sie Ihre zuvor angelegte Aktion an und tippen Sie bei “Scroll Offset” probehalber eine negative Pixelzahl ein. Nach zwei fixen Tests ist für uns ein Wert von -100 px ideal.

Kurz zum Verständnis: Durch den Wert, den wir bei “Scroll Offset” eintragen, verschiebt sich der Ankerpunkt um genau diesen Pixelwert. Bei Null fängt er ganz oben am Bildschirmrand an, also klebt auch die Überschrift oben am Rand. Durch den Wert von -100px haben wir den Punkt 100 Pixel über unsere Überschrift geschoben, wodurch diese nach unten rutscht.

Testen Sie ruhig auch mal verschiedene negative als auch positive Werte aus, dann zeigt sich, was bei dem Vorgang passiert.

Der Sprung ins Ziel

Fazit: Mit wenigen Handgriffen belegen Sie Buttons im Revolution Slider 6 mit einfachen Aktionen. Sprungmarken und Links führen Ihre Nutzer an gewünschte Ziele und erhöhen damit die Verweildauer – vorausgesetzt Ihr Textkonzept, der Revolution Slider und Ihre Inhalte spielen Hand in Hand.

Hinweis: Aufgrund des großen Revolution Slider 6 Updates, haben wir den Artikel aus 2017 überarbeitet.

Das könnte Sie auch interssieren: WordPress Revolution-Slider 6 Tutorial für Fortgeschrittene: Animationen einspielen

Über den Autor
Melissa Unkelbach

Melissa Unkelbach

ist ausgebildete gestaltungstechnische Assistentin und Mediengestalterin und designt mit Maus und Hirnschmalz individuelle Webseiten. Melissa ist durch ein Praktikum 2014 bei elsch&fink gelandet und hat ihre Ausbildung gleich hinterher geschoben. Seit dem gehört sie mit ihrem Husky Rusty fest zum fünfköpfigen Team. Ihr digitaler Zauberstab pustet rostigen Webseiten den Staub von der Seele, um Neues zu schaffen.

Jetzt kontaktieren

Kommentare

  1. Avatar

    Vielen Dank für die tolle Anleitung. Gibt es auch eine Möglichkeit, von der WordPress-Navigation direkt zu einer ID im Slider zu springen? Also zum Beispiel zu Slide 3 und nicht auf die erste Seite des Sliders?
    Grüße
    Axel

    1. Melissa Unkelbach Autor

      Hallo Axel,
      ja, das geht auch. Klicke dazu den Button, der darauf verlinken soll an, dann auf „Actions“ und dort unter „Slide Actions“ auf „Jump to Slide“. Wenn du vorher bereits alle Slides angelegt hast, solltest du dort im DropDown deinen gewünschten Slide auswählen können. Vielleicht hilft es dir, wenn du sie schon vorher sprechend benennst. Die Benennung sollte dort auch auftauchen.

      Liebe Grüße
      Melissa

  2. Avatar

    Hi,

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

    Viele Grüße,

    Dirk @ ThemePunch

    1. Melissa Unkelbach Autor

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

      Liebe Grüße,
      Melissa

Hinterlasse einen Kommentar