WordPress Revolution-Slider Tutorial für Fortgeschrittene: Animationen einspielen

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 von Themepunch 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 habe ich 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.

Schritt 1: Erstelle einen Slide und befülle ihn mit dem zu animierenden Inhalt. Wir haben bereits einen Slider vorbereitet, der den Usern die neuesten Produkte aufzeigt. Dieser beinhaltet ein Hintergrundbild (Quelle > Haupt / Hintergrund Bild > Media Library), eine Überschrift mit einem Dreizeiler (Add Layer > Text / HTML) und drei freigestellte Futtersäcke (Add Layer > Bild). Das Ganze sieht dann so aus:

Revolution-Slider elsch&fink Münster Design WordPress

Schritt 2: Was soll mit unseren Elementen passieren? Wir dürfen bei dieser Überlegung niemals die intuitive Bedienung eines Users vergessen. Sobald die Produkte das Interesse des Users erweckt haben, wird er versuchen, das Produkt, das für ihn infrage kommt, anzuwählen. Um ihn jedoch auch auf die anderen Produkte aufmerksam zu machen, soll vorerst bei Mouseover über die Produkte ein Feld mit knackigen Informationen erscheinen. Ziel ist es schließlich, den User für mehrere Produkte zu begeistern.

Dazu legen wir unter Add Layer > Shape drei Flächen an, die uns später als Hintergrund für unsere kurze Informationstexte dienen. Über Add Layer > Text / HTML tippen wir unsere Texte ins Feld und zu guter letzt erstellen wir mit Add Layer > Button pro Produkt einen Button. Werden diese Elemente an die richtige Stelle gerückt, sollte unsere Vorschau wie folgt aussehen:

Revolution-Slider elsch&fink Münster Design WordPress

Bei der Anordnung kommt es stark auf die Reihenfolge der Ebenen an, welche sich unter der Vorschau links neben den Zeitleisten befinden.

Revolution-Slider elsch&fink Münster Design WordPress

Für einen besseren Überblick sollten die Ebenen übersichtlich benannt werden, um sie gut unterscheiden zu können. Das geht, indem man einen Doppelklick auf den Text der Ebene tätigt und dann seine Benennung eintippt.

Die Reihenfolge der Ebenen bestimmt, ob sich ein Objekt im Vordergrund, im Hintergrund oder zwischen mehreren Objekten befindet.

In diesem Beispiel befindet sich die Ebene “Button blau”, welche ganz unten gelistet ist, im Vordergrund und “Shape orange” im Hintergrund.

Das schwarze Hintergrundbild mit der Hundeschnute taucht an dieser Stelle nicht auf, da es sich um ein fixiertes Sliderbild handelt. Es wurde auf derselben Seite weiter oben unter Quelle > Haupt / Hintergrund Bild > Media Library eingefügt.

Schritt 3: Nachdem alle Boxen und Texte an der richtigen Stelle sitzen, kann mit der Animation begonnen werden. Wenn der User auf unser Banner stößt, soll er nur die Überschrift mit dem Text, die Hundeschnute und die drei Futtersäcke sehen. Erst bei Mouseover soll die dazugehörige Info-Box erscheinen.

Außerdem wollen wir, dass sich der Futtersack beim Hovern leicht vergrößert, um den Effekt zusätzlich zu visualisieren. Am Ende bekommt noch jeder Button einen Link zugeteilt, der den User dann auf die tatsächliche Produktunterseite führt.

 

So viel zur Planung. Kommen wir zur Umsetzung:

Das erste Produkt – der blaue Futtersack – wird angewählt und unter “Aktionen” mit den Ebenen für die Info-Box verknüpft. Zur Info-Box gehören hier drei Elemente: Der Text, der Button und der blaue Hintergrund. Damit sich diese Elemente bei Mouseover einblenden, muss es auch drei Aktionen dafür geben:

Revolution-Slider elsch&fink Münster Design WordPress

Mouse Enter – Start Layer “in” Animation – text blau – Wait for Trigger
Mouse Enter – Start Layer “in” Animation – Button blau – Wait for Trigger
Mouse Enter – Start Layer “in” Animation – shape blau – Wait for Trigger

Sobald der User seine Maus auf ein anderes Produkt bewegt, soll sich die Info-Box vom vorherigen Produkt schließen.

Revolution-Slider elsch&fink Münster Design WordPress

Damit dies einwandfrei funktioniert, müssen sich die Produkte gegenseitig bedingen. Der blaue Futtersack benötigt also noch weitere Aktionen, nämlich

Mouse Enter – Start Layer “out” Animation – text rot – Wait for Trigger
Mouse Enter – Start Layer “out” Animation – Button rot – Wait for Trigger
Mouse Enter – Start Layer “out” Animation – shape rot – Wait for Trigger
Mouse Enter – Start Layer “out” Animation – text orange  – Wait for Trigger
Mouse Enter – Start Layer “out” Animation – shape orange – Wait for Trigger
Mouse Enter – Start Layer “out” Animation – Button orange – Wait for Trigger

Da die Info-Box noch einen “Click here-Button” beinhaltet, sind diese Aktionen notwendig, damit der User die Chance hat, auf den Button zu klicken. All diese Eigenschaften müssen auch auf die anderen Futtersäcke übertragen werden. Bei dem roten Sack soll sich die dazugehörige Info-Box öffnen, die der anderen beiden Säcke jedoch schließen. Bei dem orangenen Futtersack soll sich die orangene Info-Box öffnen, die des blauen und roten aber schließen. Ich hoffe, das Prinzip erschließt sich euch.

Revolution-Slider elsch&fink Münster Design WordPress

(Wenn ihr ein ähnliches Modell bauen möchtet, das aber keinen Button beinhaltet, müsstet ihr stattdessen folgende Aktionen hinzufügen:

Mouse Leave – Start Layer “out” Animation – text blau – Wait for Trigger
Mouse Leave – Start Layer “out” Animation – Button blau – Wait for Trigger
Mouse Leave – Start Layer “out” Animation – shape blau – Wait for Trigger)

Begriffe begreifen

Wer nun dem Tutorial gefolgt ist, aber nur noch Bahnhof versteht, dem möchten wir die letzten Begrifflichkeiten gerne erläutern:

  • Click: Mauszeiger klickt auf ausgewähltes Objekt
  • Mouse Enter: Mauszeiger zeigt auf angewähltes Objekt
  • Mouse Leave: Mauszeiger verlässt angewähltes Objekt
  • Start Layer “in” Animation: Starte die Animation der Ebene…
  • Start Layer “out” Animation: Beende die Animation der Ebene…
  • Wait for Trigger: Warte auf Aktion des Users

Schritt 4: Damit die Info-Box nicht so abrupt aufploppt, belegen wir sie mit einer Animation. Dazu klicken wir auf das blaue Rechteck und wählen über “Animation” einen geeigneten Effekt für die Start- und Ausgangsanimation aus.

Revolution-Slider elsch&fink Münster Design WordPress

Für den jeweiligen Effekt startet auch direkt eine Vorschau. Zudem kann bei dem Uhr-Icon angegeben werden, wie lange ein Effekt dauern soll. In unserem Beispiel soll der Einstiegseffekt 600 und der Ausgangseffekt 300 Millisekunden dauern.

Die Schritte 1-4 sollten folgend auch für den Info-Text und Button festgelegt werden, bestenfalls mit denselben Animationen, um eine gewisse Ruhe reinzubringen.

Übrigens: Wenn man bei Text im Dropdown “No Split” und “Forward” jeweils etwas anderes auswählt, passieren ganz verrückte Dinge. Try it 😉

Schritt 5: Nachdem wir mit unseren Animationen zufrieden sind, möchten wir, dass sich die Futtersäcke bei Mouseover leicht vergrößern. Dazu klicken wir auf unseren Futtersack und dann auf Styles. Der Pfeil neben Styles öffnet weitere Einstellungsmöglichkeiten. Hier wählen wir unter “Transform” den “Hover” an, der ganz rechts zu finden ist. An der Stelle kann der Wert 1 im zweiten und dritten Feld leicht erhöht werden. In unserem Beispiel erhöhen wir ihn gleichmäßig  auf 1.1. Die Vorschau hilft euch bei der Einschätzung. So sollte euer Fenster nun aussehen:

Revolution-Slider elsch&fink Münster Design WordPress

Schritt 6: Als nächstes belegen wir die Buttons mit Links zu den Produktseiten. Dazu klickt man einen der Buttons an und wählt wieder “Aktionen” aus. Hier wird über das blaue Plus-Zeichen folgende Aktion angelegt:

Click – Simple Link – www.beispiellink.de/futter-blau – Gleiches Fenster

Revolution-Slider elsch&fink Münster Design WordPress

Schritt 7: Um zu visualisieren, dass es sich um Links handelt, belegen wir die Buttons noch mit einem anderen Mauszeiger. In der Regel sollte dies bereits bei Buttons voreingestellt sein, aber ich möchte euch noch zeigen, an welcher Stelle die Einstellung zu finden ist.

Das Objekt wird angeklickt und “Style” ausgewählt. Der Pfeil neben “Style” ruft weitere Einstellungen hervor. Hier wird das “Hover” neben “Fortgeschrittenes CSS” ausgewählt und darunter dann “Layer Hover” auf ON geschaltet. Im Dropdown des Mouse Cursors können dann einige Mauszeiger-Varianten ausgesucht werden.

Revolution-Slider elsch&fink Münster Design WordPress

Mit diesem Tutorial konnten wir euch hoffentlich die Grundeinstellungen von Animationen näher bringen. Abseits von dem hier genannten Beispiel gibt es natürlich unzählige Möglichkeiten eine Animation zu integrieren. Ein Slider mit Animationen ist nicht mit wenigen handgriffen verbunden, jedoch sollte man die nötige Zeit investieren, um seinen Kunde am Ende zufrieden zu stellen.

 

Hier könnt ihr euch die Animation anschauen:

Fazit: Mit sieben Schritten zur designerischen Meisterleistung? Das vielleicht nicht, aber wer die Grundlagen versteht und dem Tutorial konzentriert folgt, kann ansprechende Animationen gestalten und wird stetig herausfinden, was mit dem Plugin alles möglich ist.

Bei Fragen und Anregungen helfen wir euch gerne weiter. Schreibt uns gerne unter info@elschundfink.de oder hinterlasst und ein Kommentar.

Quelle Hundebilder: freepik.com

Spread the love

Über den Autor

Melissa Unkelbach
Auszubildende zur Mediengestalterin

keine Kommentare

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