Der Revolution Slider wird auf der Website von IMAREAL als großformatiger Slider verwendet. Sein Aufbau erinnert in vielen Bereichen an PowerPoint: Ein Slider besteht aus einzelnen Slides, auf denen wiederum verschiedene Layer (Ebenen) wie Texte, Bilder oder Buttons angeordnet werden können.

Revolution Slider bietet sehr umfangreiche Möglichkeiten. Diese Dokumentation ist daher keine vollständige Einführung in Revolution Slider, sondern beschreibt ausschließlich die für die redaktionelle Arbeit auf die Website von IMAREAL  notwendigen Schritte.

Die vorhandenen Slider wurden bereits für die Websites eingerichtet und insbesondere für unterschiedliche Bildschirmgrößen optimiert. Bestehende Einstellungen sollten deshalb möglichst nicht verändert werden.

Wichtig: Neue Slides sollten immer durch Duplizieren einer geeigneten vorhandenen Slide erstellt werden. Anschließend werden lediglich die benötigten Inhalte ausgetauscht. Slides nicht von Grund auf neu aufbauen.

Responsive Darstellung#

Die größte Herausforderung bei einem Slider ist die Darstellung auf unterschiedlichen Bildschirmgrößen. Ein Slider benötigt hier wesentlich mehr Vorbereitung als beispielsweise ein gewöhnlicher Text- oder Bildbereich einer Website. Die vorhandenen Slides sind bereits so aufgebaut, dass sie auf Desktop-Computern, Tablets und Smartphones funktionieren. Voraussetzung dafür ist allerdings, dass die vorgegebene Struktur und die entsprechenden Einstellungen beibehalten werden.

Nach Änderungen sollte der Slider deshalb immer auch im Frontend kontrolliert werden – nach Möglichkeit nicht nur am Desktop, sondern zusätzlich auf Smartphone und Tablet.

Deutscher und englischer Slider#

Für die deutsch- und englischsprachige Website existieren zwei getrennte Slider. Früher war es üblich, einen deutschen Slide zu erstellen und anschließend in den englischen Slider zu importieren. Diese Möglichkeit ist derzeit bewusst gesperrt.

Für eine englische Slide wird stattdessen ein passender vorhandener Slide direkt im englischen Slider dupliziert. Anschließend werden Hintergrundbild, Texte und Verlinkung ausgetauscht. Der zusätzliche Arbeitsaufwand gegenüber einem Import ist gering und verhindert Probleme, die durch die Übernahme ungeeigneter oder veralteter Einstellungen entstehen könnten.

Slide auswählen#

Nach dem Öffnen eines Sliders kann über das Menü Slides am oberen Rand der gewünschte Slide ausgewählt werden. Dort können Slides außerdem unter anderem:

• dupliziert,
• sichtbar bzw. unsichtbar geschaltet und
• gelöscht werden.

Empfehlung: Nicht mehr benötigte Slides sollten gelöscht werden! Es sollte vermieden werden, im Slider langfristig eine große Zahl alter, unsichtbarer Slides zu sammeln.

Für eine neue Slide am besten eine aktuelle, funktionierende Slide duplizieren und diese als Vorlage verwenden.

Vorgeschriebener Aufbau eines Slides#

Für die aktuellen Slider ist folgende Layer-Struktur vorgesehen:

Slider Hintergrundanimation

• Zeile
  • Spalte
    • Subtext
    • Headline
    • Button

Diese Struktur ist für die responsive Darstellung vorbereitet und sollte nicht verändert werden.

In den Slidern können sich noch ältere Slides befinden, die einen anderen Aufbau verwenden. Diese stammen aus früheren Versionen und dürfen nicht als Vorlage für neue Slides verwendet werden.

Für die redaktionelle Bearbeitung gilt: Bearbeitet werden grundsätzlich nur Subtext, Headline und Button sowie bei Bedarf das Hintergrundbild. Zeile, Spalte und andere Einstellungen bleiben unverändert.

Subtext und Headline bearbeiten#

Zum Ändern eines Textes den entsprechenden Layer Subtext oder Headline auswählen. Rechts unter Inhalt kann anschließend der vorhandene Text ersetzt werden.

Schriftart, Schriftgröße und sonstige Formatierungen sind bereits für den Slider definiert und sollten nicht verändert werden. Eine Ausnahme kann die Textfarbe sein. Abhängig vom verwendeten Hintergrundbild kann beispielsweise heller oder dunkler Text notwendig sein, um eine ausreichende Lesbarkeit zu gewährleisten. Die Textfarbe befindet sich beim ausgewählten Layer unter Stil. Falls eine Anpassung notwendig ist, nur die Textfarbe ändern. Die übrigen Einstellungen unter „Stil“ unverändert lassen.

Mehrzeilige Texte#

Subtext, Headline und Button wurden so angelegt, dass Subtext und Headline auch mehrzeilig sein können. Die Abstände der Elemente zueinander und insbesondere zum Button bleiben dabei erhalten. Trotzdem sollten die Texte möglichst kurz bleiben. Ein Slider ist kein Platz für längere Textpassagen: Die Inhalte müssen innerhalb einer begrenzten Darstellungszeit schnell erfasst werden können.

Hintergrundbild ändern#

Um das Hintergrundbild einer Slide auszutauschen:

1. Rechts oben Slide Optionen öffnen.
2. Hintergrund auswählen.
3. Das gewünschte Bild aus der Medienbibliothek auswählen oder ein neues Bild hochladen.

Für die Slider sollte das Hintergrundbild eine Größe von 2000 × 1000 Pixel haben.

Bei der Bildauswahl muss berücksichtigt werden, dass sich das Seitenverhältnis je nach Bildschirm verändert. Dadurch können links und rechts Teile des Bildes abgeschnitten werden. Wichtige Motivbestandteile sollten deshalb nicht zu nahe am linken oder rechten Bildrand liegen.

Button bearbeiten und verlinken#

Der Text des Buttons kann wie bei Subtext und Headline über den entsprechenden Layer bearbeitet werden. Soll das Linkziel des Buttons geändert werden:

1. Den Layer Button auswählen.
2. Rechts Actions öffnen.
3. Die vorhandene Action Klicken auswählen.
4. Unter URL verknüpfen die gewünschte Zieladresse eintragen.

Am sichersten wird die Zielseite zuvor im Browser geöffnet und die vollständige URL aus der Adresszeile kopiert.

Die übrigen Einstellungen der Action sollten nicht verändert werden.

Änderungen speichern und kontrollieren#

Nach Abschluss aller Änderungen unten rechts auf Speichern klicken.

Anschließend die Startseite der jeweiligen Website im Browser öffnen und den Slider dort kontrollieren. Die Vorschau innerhalb von Revolution Slider allein reicht für die abschließende Kontrolle nicht aus.

Dabei insbesondere prüfen:

• Ist das richtige Hintergrundbild sichtbar?
• Sind Subtext und Headline vollständig und gut lesbar?
• Funktioniert der Button und führt er zur richtigen Seite?
• Ist das Motiv trotz unterschiedlicher Bildschirmbreiten sinnvoll beschnitten?
• Funktioniert die Slide auch auf kleineren Bildschirmen?

Wenn möglich, sollte ein neuer oder wesentlich geänderter Slide zusätzlich auf einem Smartphone und einem Tablet getestet werden.

Grundregel: Bei Revolution Slider so wenig wie möglich an der bestehenden Struktur verändern. Vorhandene aktuelle Slides duplizieren, Inhalte austauschen und anschließend die Darstellung im Frontend kontrollieren. Das ist insbesondere für eine zuverlässige responsive Darstellung entscheidend.