Beitrag

 
Das Revolution Slider Plug-in - Teil 2- Slide Editor

Das Revolution Slider Plug-in – Teil 2: Slide Editor

In einem ersten Beitrag über den Revolution Slider haben wir bereits angesprochen, dass viele Websites ihre Besucher mit Slidern auf ihren Startseiten begrüßen. Außerdem haben Sie die grundlegenden Einstellungen in den Slider Einstellungen kennengelernt. Damit aber nicht genug. Ihr Slider sorgt mit einer gelungenen Bild- und Textauswahl für viel Eindruck bei Ihren Besuchern. Deshalb ist es wichtig zu wissen, wie Sie diese einfügen und anpassen.

Das Revolution Slider (eigentlich Slide Revolution) Plug-in wurde erstmals 2012 veröffentlicht und befindet sich seither in der fünften Version. Seine große Beliebtheit (laut Entwickler auf rund eine Millionen Websites zu finden) kommt nicht zuletzt von seiner leichten Bedienung. Zum einen lassen sich neue Slider in den „Slider Einstellungen“ einfach erstellen, was wir im ersten Teil unseres zweiteiligen Beitrags erklärt haben. Zum anderen benötigt das einfügen von Bild und Text wenige Klicks. Hiermit wollen wir uns im Folgenden beschäftigen.

Slides hinzufügen

Nach dem Speichern in Punkt 5 des letzten Beitrags werden Sie automatisch zur Oberfläche des Revolution Sliders zurückgeführt. Im Nächsten Schritt sollen nun Bilder und Texte in den Slider eingefügt werden. Um zum Slide Editor zu gelangen muss lediglich auf den neuen Slider oder auf das Bearbeiten-Symbol geklickt werden.

Zum Slide Editor

Nun sehen Sie die Slide Editor Benutzeroberfläche, die sich in drei Bereiche unterteilen lässt.

Bereich 1: Elemente (Slides) im Slider
Bereich 2: Grundeinstellungen für das Ausgewählte Element (Hintergrund, Animation, etc.)
Bereich 3: Der Editor, zum Hinzufügen von Texten, Animationen etc.

Die Slide Editor Oberfläche

Zu Beginn sollten Sie Ihren Slider mit sogenannten Slides/Bildern füllen, die in Ihrem Slider abgespielt werden sollen. Um die Bilder in den Slider zu bekommen, wählen Sie den ersten, leeren Slide aus und wenden Ihren Blick dem zweiten Bereich zu.

Bild zum Slider hinzufügen

Hier wählen Sie das Hintergrundbild aus, indem Sie den Radiobutton auf Haupt-/Hintergrundbild setzt und anschließend Bild ändern wählen. Dann können Sie per „Bild Ändern“ ganz einfach ein Bild hochladen, welches im Slider auftauchen wird. Achten Sie außerdem darauf, ein Thumbnail (Vorschaubild) einzufügen, sollte Ihr Slider diese benutzen. Den Button für den Thumbnail-Upload finden Sie unter den Generellen Einstellungen.

Thumbnail hinzufügen

Wenn Sie all Ihre Bilder im Slider haben, können Sie zusätzlich noch Texte, Icons und Buttons hinzufügen. Dafür scrollen Sie in den Dritten Bereich, in welchem das Hintergrundbild des ausgewählten Slides groß zu sehen ist.

Hier können Sie über „Add a New Layer“ wählen, was auf dem Sliderbild erscheinen soll. Text/Html sorgt für einen Textkasten, in den Sie Ihre Texte einfügen können. Auch Icons lassen sich dort über das blaue Kästchen am oberen rechten Rand des Textkastens hinzufügen. Im oberen Bereich des Editors ist es Ihnen erlaubt, Schriftart, Schriftfarbe usw. auszuwählen.

Einen Text in den Slider einfuegen

Ein Tipp: Positionieren Sie Ihre Textkästen über die Positionsoptionen (eingekreister Bereich, rechts). Geben Sie den Textkästen auch eine Breite (W) und Höhe (H). Ansonsten kann es vorkommen, dass Texte im Slider zu klein dargestellt werden.

In dem Tab „Animation“ können Sie jedem Textkasten eine Animation zuweisen. Dies sorgt z.B. dafür, dass Texte verzögert erscheinen, ins Bild fahren oder wieder verblassen. Außerdem bleiben Texte, die auf dem Globalen Layer im ersten Abschnitt eingetragen werden, bei allen Bildern bestehen, sollten Sie einen Slogan eintragen wollen, der sich nicht verändert.

Zum Schluss, sobald Sie gespeichert haben, können Sie den Slider in eine Seite, Beitragsseite oder den Widgetbereich Ihrer Website einfügen. In all diesen Bereichen finden Sie einen Abschnitt mit dem Titel „Revolution Slider“, unter dem Sie Ihren Slider auswählen könnt. Alternativ können Sie sich auch einfach den ShortCode aus den Slider Einstellungen kopieren.

Das war es auch schon. Das Revolution Slider Plug-in bietet noch viel mehr Möglichkeiten. Durch Ausprobieren kommen Sie sicher zu Ihrem Wunschergebnis und erschaffen nach ein wenig Einarbeitungszeit selbst eindrucksvolle Slider.


Quelle Bilder: Eigene Screenshots
Anmerkung: Einige der Links in diesem Beitrag sind „Affiliate-Links“. Wenn Sie auf den Link klicken und einen Artikel kaufen, erhalten wir eine Provision. Auf Ihren Kaufpreis hat es keine Auswirkung. Vielen Dank für Ihre Unterstützung!

Autor:

Seit August 2015 bei Elbnetz und ein großer WordPress-Fan. Ich habe eine Ausbildung zur Assistentin für Screen Design und programmiere/zeichne in meiner Freizeit rund um die Uhr.

  • Andreas

    Ich bräuche mal einen Tipp wie ich die höhe des Sliders ändrn kann. Egal welche Bilder ich einfüe, werden die einer Standardgröße angepasst. Könnte auch am Theme liegen. Ich nutze das Kallyas. Hat da jemand vllt eine Idee?

    Antworten
    • Elbnetz Redaktion

      Hallo Andreas,
      schauen Sie mal im Bereich 4. Slide Layout nach. In dem Bereich müssten die passenden Einstellungen zu finden sein.

      Beste Grüße,
      Die Elbnetz-Redaktion

      Antworten
  • Andreas

    Super, Danke :)! So könnt ihr mir jetzt noch sagen, ob ich die Layer aus dem 1. Slide iwie automatisch auf die anderen Slides übertrgen kann, inklusive der einzelnen Einstellungen von den Layern?

    Antworten
    • Elbnetz Redaktion

      Wenn Du den Mauszeiger über eine Slide bewegst erscheint dort ein Link „Duplizieren“

      Antworten
  • Wagdi

    Hallo zusammen, erstmal danke für diesen tollen Service!! Mein Problem beim Revolution Slider ist, dass es innerhalb der Textfelder nicht möglich ist einzelne Wörter als „fett“ zu formatieren bzw. dies nicht umgesetzt wird. In der Vorschau sieht alles perfekt aus, auf der Homepage nicht. Das ist auf mehreren Domains der Fall. Beipiel: Ein Wort im Text soll fett dargestellt werden….

    Antworten
    • Elbnetz Redaktion

      Moin Wagdi,

      versuche mal statt .
      Letzterer Code ist nicht mehr aktuell und von einigen Entwicklern nicht mehr unterstützt.

      Beste Grüße,
      Das Elbnetz-Team

      Antworten
  • Wagdi

    Moin und danke. Habe bereits strong versucht. Klappt leider auch nicht…

    Viele Grüße
    Wagdi

    Antworten
  • joe

    Hallo zusammen,

    Ich wollte mal wissen, wie man es schafft den slider im gesamten kleiner zumachen?

    Sprich die Höhe vom Slider möchte ich nur auf 200 px setzen nicht standartmäßig auf die 800 …

    bin echt am verzeifeln

    Antworten
    • Kim Salewski

      Hallo Joe,
      Die Höhe des Sliders kannst du unter „Slider Einstellungen“ – „4. Slide Layout“ für die verschiedenen Bildschirmgrößen einstellen.

      Viele liebe Grüße,
      Kim

      Antworten
  • Marvin

    Hallo, vielleicht kann mir jemand helfen. Habe gerade eine Link in meine Slider eingebaut. Aber der Mauszeiger wird nicht angezeigt, wenn ich über den Link gehe. Was muss ich denn da ändern?
    Vorab vielen Dank
    Gruß Marvin

    Antworten
    • Kim Salewski

      Moin Marvin,
      Einen Link kann man im Revolution Slider auf zwei Arten einfügen:
      1. Über den Tab „Aktionen“, während man das Textfeld gewählt hat, das verlinkt sein soll,
      2. Indem man einen a-tag um das Word einfügt, das verlinkt sein soll.
      Bei der ersten Variante habe ich ebenfalls einen Fehler erhalten, der Link war nicht klickbar, solange der Link Typ auf „jQuery Link“ gestellt war. Versuche es einmal mit der Option „a Tag Link“. Es kann sein, dass nach dem neusten Update von WordPress jQuery Fehler auftauchen, das hier sollte einer davon sein und ggf. vom Plug-in Team bald behoben werden.
      Liebe Grüße,
      Kim

      Antworten
  • Jan

    Guten Tag,

    Wie kann man man geweils für smartphone und PC extra einen Slider erstellen?
    So dass man einen passenden Slider hat der nur fürs smartphone sichtbar ist und einen weiteren der nur für Pc/Laptop sichtbar ist?

    Vielen Dank und schönen Feiertag!

    LG Jan

    Antworten
    • Kim Salewski

      Hallo Jan,

      für den Revolution Slider sind uns bisher folgende Funktionen bekannt:

      1. Unter „Slider Einstellungen“ kannst du deinen Slider im Seitenmenü unter dem Punkt „Layout & Visual“ für Mobile Geräte allgemein ausschalten.

      2. Im Slide Editor lassen sich auf den Folien deines Sliders die einzelne Elemente anklicken und unter dem Reiter „Sichtbarkeit“ für die jeweiligen Bildschirm-Variationen sichtbar oder unsichtbar stellen.

      Einen ganzen Slider nur für das Smartphone sichtbar zu machen, lässt sich so einfach nicht in den Grundeinstellungen des Sliders regeln. Dazu solltest du den Support des Revolution Sliders direkt anfragen.

      Viele liebe Grüße,
      Kim

      Antworten
  • Manuela

    Hallo, wie kann ich das Vorschaubild des Sliders, also dort wo ich die Layer einfüge kleiner machen, so dass ich den gesamten Slider sehen kann?

    vielen Dank im vorraus

    Antworten
    • Kim Salewski

      Hallo Manuela,

      Ich kenne soweit keine Möglichkeit, das zu erreichen.
      Frag ggf. beim Team des Revolution Sliders direkt nach, ob so etwas möglich ist.

      Viele liebe Grüße,
      Kim

      Antworten
  • Manuela

    Hallo zum zweiten, ich möchte den slider stoppen und erst nach einem klick auf einem eingefügten Button weiterlaufen lassen. Wo stelle ich das ein?

    Danke

    Antworten
    • Kim Salewski

      Hallo Manuela,

      Du musst zunächst deaktivieren, dass der Slider automatisch abspielt. Das tust du in den Slider Einstellungen, hier die Anleitung.
      Danach wählst du einen Button auf dem ersten Slide (der ersten Folie) und suchst oben den Tab „Aktionen“. Hier wählst du aus, was mit dem Button passieren soll, in deinem Fall müssen „Click“ und „Nächster Slide“ eingestellt sein.

      Viele liebe Grüße,
      Kim

      Antworten
  • Nicolaus ´Herrmann

    Hallo, ich arbeite an einer Diashow mit insgesamt 20 Slidern (die erstmal fertig sind). Jetzt möchte eine Ergänzung für alle 20 Slider erstellen. Bisher bin so vorgegangen: Ich öffne den ersten Slider und arbeite mit einem Layer die Ergänzung ein.
    Jetzt möchte diese Ergänzung (Layer) mit all ihren Eigenschaften und Einstellung auf die restlichen 19 Slider übertragen.

    Gibt es eine Möglichkeit den erstellten Layer zu kopieren und in die restlichen Slider zu einzufügen? Oder muß ich tatsächlich den Layer jeweils 19x (!!!) für jeden Slider neu bauen?

    Vielen Dank für Eure Antwort und Hilfe.

    Antworten
    • Kim Salewski

      Hallo Nicolaus,

      Zunächst müssen wir zwischen Slide und Slider unterscheiden. Ein Slide ist das, was im Slider abgespielt wird, also quasi die Bilder, die mit Buttons, Texten etc. versehen wurden. Ich gehe davon aus, dass du 20 Slides (Bilder im Slider) meinst. Hier also mein Tipp:

      Es gibt einen „Globalen Slide“, der noch vor deinem ersten Slide im Slide Editor zu finden ist. Sagen wir, du willst immer den selben Text angezeigt haben, aber die Bilder im Hintergrund ändern sich, dann fügst du den Text auf dem Globalen Slide ein, denn dessen Inhalte sind auf jedem Slide sichtbar. Wenn sich deine Slides zu sehr unterscheiden, musst du wohl oder übel alles einzeln einfügen, ich sehe da momentan keinen anderen Weg.

      Viele liebe Grüße,
      Kim

      Antworten
  • Uwe

    Hi Kim,

    ist eine tolle Site von Dir ;-).
    Wenn ich den Slider in einer bestimmten Größe haben möchte, also auf einer Website eine Slider Gallery, wo die Fotos 800px x 600px ergeben, oder umgekehrt 600px x 800px.
    Ist das möglich.
    Danke für Deine Hilfe

    Viele Grüße
    Uwe

    Antworten
  • Martin

    Hallo Elbnetzer,

    habe eine Frage, vielleicht habt ihr einen Tipp für mich.

    Mein Slider läuft als „Hero Scene“ das ganze ist auf 9 Sekunden eingestellt.
    Ich möchte gerne ein Element – das Wort „START“ für 4,5 Sekunden sichtbar machen
    und die nächsten 4,5 Sekunden „STOP“ an der selben Stelle einblenden.
    Grundsätzlich funktioniert es schon, jedoch sehe ich Start, danach Stop und es gibt keine (undendliche) Wiederholung dieser Umschaltung. STOP bleibt sichbar und START erscheint nie wieder. Wahrscheinlich irgendeine Loop Funktion, aber ich weiß leider nicht wo und wie!

    Gruß
    Martin

    Antworten
  • Anna

    Hallo liebes Team von elbnetz,
    der Umgang ist für mich noch ganz neu und ich habe aus einer Vorlage heraus einen Slide umgebaut. Kann ich die Geschwindigkeit, in der ein Text mit der Animation eingeblendet wird einstellen. Der Text rast so schnell ins Bild, sodass es mehr Hektik verbreitet als elegant auszusehen.
    Ich wäre auch für eine Antwort dankbar.
    Viele Grüße
    Anna

    Antworten
    • Kim Salewski

      Moin Anna,

      wenn du dich im Slide Editor befindest, klick auf den Text, der zu schnell ist.
      Neben dem Reiter „Style“ (über dem Editor) findest du den Reiter „Animation“. Hier kannst du die Art der Animation (Faden, Sliden, Popup usw.) sowie die Millisekunden angeben, die der Text für die Animation brauchen soll.
      Wahrscheinlich steht bei dir 300, versuch es mit 1000 oder mehr, je nach dem, wie langsam deine Animation werden soll.

      Viele liebe Grüße,
      Kim

      Antworten
  • Tobias

    Hallo liebes Team,

    ich versuche gerade mit dem Revolution Slider ein One Page Layout zu erstellen. Kann ich dort ein Portfolio also eine voll funktionsfähige foto Galerie einfügen?

    Vielen Dank

    Tobias

    Antworten
  • Thomas

    Hallo liebes Team,
    ich habe ein Problem, zwischen meiner Navigation und dem Slider ist ein weißer Bereich. Ich arbeite mit dem Visual Composer Plugin. und hab schon viel versucht aber und in diversen Foren nach antworten gesucht. Habt ihr eine Hammermäßige Idee, was ich tun kann? ;))

    Grüsse Thomas

    Antworten
  • Marko

    Toller Beitrag! Kannst du mir eventuell erklären, wie man ein mehrstufiges Menü (Menü mit Untermenü) hinbekommt, dass sich beim drüberfahren mit der Maus öffnet? Leider bekomme ich das nur für die erste Ebene hin (benthos.eu)

    Antworten
    • Elbnetz Redaktion

      Moin Marko,

      vielen Dank für Dein Kommentar. leider können wir Dir in so einem speziellen Problem hier nicht weiterhelfen.

      Beste Grüße,
      Die Elbnetz-Redaktion

      Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?