Viele moderne Websites empfangen ihre Besucher mit einem Slider auf der Startseite. Eine der beliebtesten Slider Lösungen für WordPress ist das kommerzielle Plug-in Revolution Slider. In der neuesten 5. Version bietet die Erweiterung viele Neuerungen, die die Erstellung hochwertiger Slider vereinfacht. Lesen Sie in einem zweiteiligem Beitrag, wie Sie schnell zu einem professionellen Slider für Ihre eigene Website gelangen.
Inhalt
Worum geht es?
Der Revolution Slider (eigentlich Slider Revolution) wurde erstmals 2012 veröffentlicht und ist mittlerweile in der fünften Version auf über einer Millionen Websites anzutreffen (Angabe des Entwicklers). Die große Verbreitung des Plug-ins liegt nicht nur an den direkten Verkäufen, sondern ist auch dem Umstand geschuldet, dass viele kommerzielle Theme-Autoren den Revolution Slider in Ihre Webdesigns integrieren.
Die große Beliebtheit des Revolution Sliders basiert auf der leichten Bedienung und der vielen Vorlagen (Templates), die mit ein wenig Übung schnell zu professionellen Ergebnissen führen.
Auf einer speziellen Website können sie sich einen Überblick anhand vieler verschiedener Slider-Beispiele über die Möglichkeiten des Revolution Slider Plug-ins verschaffen.
Der Weg zum eigenen Slider führt über zwei Einstellungsebenen. Unter „Slider Einstellungen“ nehmen Sie die grundsätzlichen Konfigurationen des Sliders vor. Die zweite Ebene „Slide Editor“ betrifft alle Einstellungen der einzelnen Slides. In diesem Beitrag erfahren Sie die wichtigsten Slider Einstellungen. In einem zweiten Beitrag beschreiben wir die Möglichkeiten des Slide Editors.
Die grundsätzlichen Slider Einstellungen
Unter Slider Einstellungen werden alle grundsätzlichen Anpassungen Ihres Sliders vorgenommen, um zum Beispiel das Aussehen nach Ihren Wünschen zu konfigurieren. Mit wenigen Einstellungen erhalten Sie zum Beispiel einen solchen Slider:
[rev_slider alias=”beitragsslider”]
Wer sich nun fragt, wie man einen Slider anlegt, bekommt hier die Antwort: Es gibt drei Möglichkeiten. Nachdem Sie das Plug-in installiert und aktiviert haben, begeben Sie sich im Admin-Bereich zuerst zu dem Menüpunkt „Revolution Slider“. Von hier aus haben Sie folgende Optionen:
- Ihren Slider komplett selber erstellen (Neuer Slider)
- Ein Template, das Ihnen gefällt, wählen und verwenden (Add Slider Template)
- Einen Slider importieren, den Sie von einer Ihrer anderen WordPress Seiten exportiert haben (Slider importieren)
Um einen Slider wie den im ersten Bild zu erstellen, reicht die Option „Neuer Slider“ allerdings vollkommen aus. Klicken Sie auf diese Option, gelangen Sie automatisch zu den „Slider Einstellungen“, mit denen wir uns in diesem Beitrag beschäftigen wollen.
Content Source
Hier geben Sie zunächst an, welchen Inhalt Ihr Slider wiedergeben wird. Zur Auswahl stehen verschiedenste Slider, vom WooCommerce-, über den Twitter-, bis hin zum Beitrags-Slider. Um einen Slider rein für Bilder zu erstellen, empfehlen wir den Default Slider.
Slider Title & ShortCode
An dieser Stelle wird festgehalten, wie Ihr Slider heißt und welches Alias er bekommt. Der Alias wird zum erstellen des Shortcodes genutzt. Der Shortcode dient zum späteren Einbinden des Sliders in Ihre Website. Geben Sie Ihren Slidern aussagekräftige Namen und Alias, damit Sie diese später anhand dieser unterscheiden können.
Select a Slider Type
Standard Slider, Hero Scene und Carousel Slider sind die Slider, zwischen denen Sie wählen können. Das bedeutet aber nicht, dass damit alles entschieden ist. Es stehen Ihnen eine Reihe von Presets (vorgefertigte Slider) zur Auswahl. Wählen Sie hier den Slider aus, der Ihren Vorstellungen am nächsten kommt.
Slide Layout
Unter dem Slide Layout wird festgelegt, ob der Slider, den Sie erstellen wollen, automatisch angepasst wird, über die ganze Seite geht oder den ganzen Bildschirm einnimmt. Darunter erhalten Sie Beispiele, wie es auf den entsprechenden Geräten aussehen wird. Außerdem können Sie Einstellungen für die verschiedenen Geräte vornehmen.
Customize, Build & Implement
Als letzten Hauptpunkt der groben Einstellungen finden Sie nun erneut drei Möglichkeiten vor, wie Sie weitermachen können.
1. Zu den erweiterten Optionen (Scroll to Options)
2. Zum Slide Editor und Bilder einfügen etc. (Slides Bearbeiten)
3. Erklärung, wie Sie den Slider in Seiten/Beiträge/Widgets einbinden (Embed Slider)
An dieser Stelle wählen Sie, ob Sie mit Ihrem Slider zufrieden seid, oder ob Sie lieber noch mehr Optionen haben wollen. Außerdem haben Sie die Möglichkeit, Ihren Slider zu speichern, was an dieser Stelle durchaus Sinnvoll ist, wenn Sie mit allem zufrieden sind.
Unter den erweiterten Optionen wiederum können Sie Änderungen an den Pfeiltasten, den Bullets und vielem mehr vornehmen. Die Einstellungen werden grob in einem kleinen Vorschaufenster neben den Tabs angezeigt, um Ihnen eine Idee zu geben, wie Ihr Slider aussehen wird.
So, geschafft! Ihr neuer Slider hat seine Grundkonfigurationen erhalten. Im nächsten Schritt geht es darum, Ihre neue Slideshow mit Leben zu füllen. Wie Sie nun Bilder und Texte in Ihren Slider bekommen, erfahren Sie in folgendem Beitrag über den Slide Editor.
Quelle Bilder: Eigene Screenshots und http://fotografie.elbnetz.com/
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!
49 Kommentare. Wir freuen uns über Ihren Kommentar
Hallo,
Ich habe eben entdeckt, dass meine Galerien plötzlich als Slider auftauchen und ich will das gar nicht. Wie bekomme ich diese Einstellung wieder weg?
Ganz herzlichen Dank für Tips
Hello, das wichtigste haben sie leider nicht erwähnt und zwar bremst dieser Slider den pagespeed extrem aus, es ist die reinste Bremse mit seinen aufgeblassenen Funktionen, schriften usw.
Wer auf die neuen Web Vital Cores achtet, sollte sich von diesem Zeug verhalten. ich habe es überall rausgeschmissen.
Moin Michael,
wir geben Dir recht und setzen auch nur noch in ganz seltenen Projekten diesen oder andere Slider ein. Untersuchen haben sowieso gezeigt, dass kaum jemand auf Slide zwei, geschweige denn Slide drei wartet. Fatal, wenn sich dort wichtige Informationen verbergen.
Ahoi!
Thorsten
Hallo,
sehr anschauliche Erläuterung. Danke. Ich würde gerne etwa drei verschiedene Slider in meine Webseite einbinden. Also slider1, slider2, slider3. Die Slider sollen sich von selbst alle paar Tage austauschen.
Der bisherige Code für die Darstellung eines Sliders auf der Homepage lautet:
[rev_slider alias=”Home”][/rev_slider]
Wie sähe die Befehlszeile für die alternierende Darstellung der slider1, slider2, slider3 aus?
Dank vorab und viele Grüße
Guten Tag ,
können sie mir bitte sagen wie ich die Bilder in der Größe anpassen kann ?
Momentan kommt das Bild im Slider wie gezoomt rüber und hätte dies gern im Orginal . Habe schon die Größe in Paint usw angepasst aber die Zoom optik bleibt nur das Bild wir Verpixelter. Wie kann ich das Bild genau in den Slider anpassen damit alles normal angezeigt wird ? Danke für die Hilfe
Moin Benni,
Vorrausgesetzt, du meinst das Hintergrundbild vom Slide, dann kannst du, wenn du den Slide bearbeitest, in dem Reiter “Main Background” den Unterreiter “Source Setting” aufsuchen. In dem lässt sich das Hintergrundbild in seiner Größe, seinem Verhalten und seiner Position beeinflussen.
Viele liebe Grüße,
Kim
Hi Kim !
Top Genau das hab ich gesucht ;) Hier kann ich in Prozent
die Größe genau angeben
Merci
HALLO
UND ZWAR HABE ICH ÜBER DEN SLIDER EIN SUCHFELD ERSTELLT FÜR DIE STARTSEITE VERKAUFE REIFEN UND ES FUNKTIONIERT ABER WENN ICH EINEN ANDEREN SLIDER ERSTELLEN WILL FÜR FELGEN AUF EINER ANDEREN SEITE FINDET ER DIE KATEGORIEN NICHT MEHR
WARUM ?
Hallo, wie kann ich den Facebook Butten verschieben und verlinken??
Hey, danke für den tollen Bericht!
Ich bin momentan dabei, meine Website komplett neu aufzubauen und habe dort nun auch den Revolution Slider eingebunden.
Bei der ersten Slide für die Startseite hat alles noch einigermaßen Funktioniert – aber je mehr ich auf die Slide eingefügt habe, desto “falscher” ist die letzt-endliche Darstellung auf der Website bzw. in der Vorschau geworden. Wenn ich z.B einen Buchstaben bzw. Textllayer einfüge, erscheinen sie in der Vorschau oder dem Slider in der Website stark versetzt. Bei Buttons ist es noch extremer. Woran kann das liegen?
Lieben Gruß!
Habe das Plugin installiert, am Rechner wird es richtig angezeigt, mobil am Handy erscheint nur eine weiße Fläche. Was mache ich falsch?
Ich würde gerne beim Aufrufen einer Website einen Intro-Slide über den ganzen Bildschirm laufen lassen. 1x ein vollflächiges Bild einblenden ca. 1sec und dann erscheint erst die “normale” Website. Wie kann ich so einen Slider quasi vor die Website integrieren?
Hallo Kim
Mein Slider wechselt nach einer Weile plötzlich in schwarz-weiss (Bilder). Woran kann das liegen, kannst du mir helfen?
ich bin auf der suche im Netz hier auf den Beitrag gestossen, ich habe vor einiger Zeit eine affilate Seite https:/gartenmoebel-kaufen.de übernommen und musste mich erstmal in wordpress einarbeiten.
jetzt steht erst mal an das die Seite komplett überarbeitet wird und auf der Startseite wollte ich diese erstmal mobiletauglich machen, das war ein Anfang. Ichhabe mir den revolution Slider besorgt um hier einzelne Kategorien anzuzeigen, das habe ich mit dem Carousel gemacht, das funktioniert ganz gut, aber ich möchte gerne auf dem Desktop direkt 3 Kategorien gleichzeitig sichtbar haben, mobile nur eine, wie kriege ich das hin?
Hallo,
hab mal nach ami Tutorial den REVSLIDER verwendet. Eigentlich ne tolle Sache
und easy to handle auch für mich als Beginner. Jetzt gehts aber um die Darstellung vom PC bis runter zum Ipad welche Handlungspielraum im Bild plazieren und Text Buttons plazieren gut vertragen. Nur beim Mobilephone werden die Bild schon sehr arg beschnitten. Verwendet man Plugins dafür und ist das ratsam für eine schnelle Präsenz. http://ja-wort-stories.com/xsrt/. Würdest du so nett sein und dazu Empfehlungen aussprechen können. Oder sind Joomla oder andere besser aufgestellt. NOch was Fusionslider ist ja auch ne Option aber da kann man gar nix auf mobiledevices zeigen. Stimmt das?
Schönen Tag Andre
Hallo,
ich hoffe du kannst mir weiterhelfen bzw. einen Tipp geben. Ich benutze auf meiner Webseite verschiedene Slider. Ist es möglich, auf mobilen Endgeräten Loops und Animationen zu deaktivieren? Das heißt ich möchte das lediglich der Slider als Header Grafik dargestellt wird – ohne Animationen, Loops etc.
Vielen Dank für deine Hilfe.
Beste Grüße
Mario
Hallo :) Ich möchte auf einer Webseite einen Slider einbauen und habe nun das Problem, dass ich nicht weiß, wie ich den Slider auf Full Width stellen kann und das Hintergrundbild trotzdem auf allen Devices (Smartphone, Tablet, Laptop) automatisch verkleinert und der Displaygröße angepasst wird. Habt ihr da einen Tipp für mich? Vielen Dank!
Viele Grüße,
Ester
Hallo Elbnetz-Team,
ich habe eine kleine Frage, und hoffe Ihr könnt mir auf diesem Wege weiterhelfen. Ich verwende den Slider Revolution v 5.4.6.3.1
Unter “Slider Bearbeiten / 4. Sliede Layout” wechselte ich von ‘Auto’ auf ‘Full Screen’. Nach der Umstellung erscheint nun am unteren Rand des Sliders ein animierter BUTTON. Grundsätzlich gefällt er mir ja. Vor der Umstellung hatte ich keinen Button – anscheind ist er standartmäßig bei der Umstellung aktiv.
Ich weiß mittlerweile wie man Pfeile und andere Elemente (auch mit Aktionen) global einbindet.
Mir ist allerdings ein Rätsel, wie ich nun an diesen BUTTON herankomme, bearbeiten und eine Aktion hinterlegen kann.
Wisst Ihr wie ich diesen BUTTON bearbeiten kann?
Ich hoffe, Ihr könnt mir weiterhelfen, und bedanke mich rechtherzlich für Eure Hilfe.
Mit besten Grüßen aus HH-Winterhude – Nicolaus.
Hallo
Bitte um Hilfe, mein zweiter Slider wechselt plötzlich das von Farbe auf Schwarz-weiss? Wo kann ich das umstellen? Danke
Hallo Zusammen, ich soll von jemanden die Webseite ändern der möchte gerne andere Wechselbilder aber irgendwie bekomme ich das nicht hin. Auf der Webseite wird Unite Revolution Slider 2 verwenden. Ich finde keine Einstellung wo ich diese Wechselbilder änderen kann. Wenn ich auf Komponente gehe bekomme ich dann nur die Meldung.
Es ist ein Fehler aufgetreten!
0 [] operator not supported for strings
Hallo,
kann mir jemand erklären warum sich bei meinem ersten Slider das Bild nach hinten bewegt. Das Bild sollte sich nach vorne bewegen. Hab schon alles versucht aber nichts ändert sich, auch bei der Slider Animation. ….
Vielen Dank jetzt schon für eure Hilfe.
LG Susanna
Hallo
Kann mir jemand erklären warum sich mein 1. Slider nach hinten bewegt? Würde es gerne so einstellen das sich der Slider nach vorne bewegt. Wo kann ich das einstellen? Habe schon einiges probiert, jedoch verändert sich nichts auch nicht wenn ich die Slider animation anwende und verändere.
Liebe Grüsse S.G.
Hallo Kim
Vielleicht kannst du mir helfen. Ich habe ein Template gekauft, da war schon ein Slider eingestellt der mir gut gefällt. Nun mein Problem: wie kann ich den Slider einstellen das sich das Bild nicht nach Hinten bewegt scaliert, sondern das Bild sollte sich nach vorne zu mir bewegen gross scalieren. Eigentlich nur die Richtung ändern. Ich finde nichts im Web., gibt nicht viel über Slider Revolution. (Es geht um den ersten Slide auf der Webseite)
Danke für Feedback. Grüsse
Hallo Susanna,
Ich denke, du bist unter “Slide Animation” bereits richtig. Hier klickst du in die linken Spalte, auf “Zoom Transitions”. Dort siehst du in der zweiten Spalte die Animation “Zoom in”, die du anhaken kannst (wenn das die ist, die du wolltest). In der dritten Spalte sind alle Animationen aufgelistet, die angehakt sind und in dieser Reihenfolge werden Sie auf die Slides angewendet. Vielleicht steht hier ebenfalls “Zoom out”? In dem Fall einfach entfernen, sodass nur noch “Zoom in” als Animation gewählt ist.
Falls das nicht die Lösung ist, melde dich gerne wieder!
Hallo!
Wir sind neu was das Thema Slider Revolution angeht…
Wir haben das Problem dass wir auf unserer Seite nicht mehr scrollen können wenn sich die Maus auf dem Slider befindet. Es wird nur der Slider “durchgescrollt” gibt es dazu eine Einstellung? Wenn ja welche?
Hallo,
ich habe eine kurze Frage: Ich habe auf meiner Startseite einen Slider erstellt. Ich möchte die Ecken der Bilder gerne abrunden. Wenn ich den Border-Radius auf 20 px einstelle, sehe ich zwar die abgerundeten Ecken im Revolutions Slider Menü wenn ich direkt auf den Layer klicke, auf der Startseite selbst tut sich nichts. Hast du vielleicht eine Idee woran das liegen könnte bzw. wo ich die Ecken im Slider-Menü abrunden kann?
Vielen Dank im Voraus.
Mario
Moin Mario,
versuche mal den Code mit
!Importantzu erzwingen.Zum Beispiel:
border-radius: 0px!Important;Ahoi!
Thorsten
Hallo Thorsten,
vielen Dank für den Tipp. Habe ich schon versucht, funktioniert leider nicht. Kannst du dir das vielleicht kurz mal ansehen? Das wäre super!
Vielen Dank im Voraus.
Mfg
Mario
Hallo liebes Elbnetz-Team!
Ich erstelle derzeit eine Homepage und möchte gleich auf der Startseite mit einem Fullscreen-Video starten. Das Einbinden ist grundsätzlich kein Problem. Für mich stellt sich die Frage, welche Dateigröße ich hier am besten einbinde, ohne dass es zu langen Ladezeiten kommt??; Das Video dauert ca. 30 Sekunden und ich habe es in den Größen 426×240 mit 7,5 MB oder 852×489 mit 24 MB oder sogar 1920×1080 mit 344 MB zur Verfügung. Welche Empfehlung habt ihr hier für mich? Genügt die kleinste Dateigröße, um es dennoch als Fullscreen darzustellen?
Wirkt es sich positiv auf die Ladezeit aus, wenn ich das Video über youtube einbinde und nicht direkt in das Mediacenter lade?
Viele liebe Grüße
Soleado
Moin Soleado,
es gilt immer: Je geringer die Datenmenge, desto besser. Da es unwahrscheinlich ist, dass sich viele Besucher der Website ein so langes Video anschauen, sollte darauf verzichtet werden. Denn die genannten Datenmengen sind allesamt sehr hoch. Sie sollten Sie sich genau überlegen, ob Sie tatsächlich ein solches Video als Hintergrund einbinden, das ja sicherlich automatisch starten soll. Vielleicht ist eine Schleife einer Kurzversion eine Alternative.
Grundsätzlich ist zu empfehlen, Videos lieber über Dienste wie YouTube einzubinden. Hier ist eine Erklärung dazu: Warum Sie in WordPress keine Videos hochladen sollten.
Beste Grüße,
Die Elbnetz-Redaktion
Hallo Kim,
kannst du mir eventuell einen Tipp geben, wie ich das nervige hüpfende Mouse-Icon über “Scroll Down” aus dem Slider verschwinden lassen kann?
Schönen Dank schon mal im Voraus!
Nicola
Moin Nicola,
Ich schätze, dass es ein Element in deinem Slide ist. Versuche im Slide Editor den Layer ausfindig zu machen, auf dem sich das Icon befindet und lösche diesen.
Viele liebe Grüße,
Kim
hallo zusammen ich hab einen slider aber ich will das die nur auf der Startseite gezeigt wird und nicht nur auf anderen Seiten. wo kann ich das abstellen?
Moin,
grundsätzlich solltest Du den Shortcode des Sliders in die Seite einfügen, in der der Slider angezeigt werden soll.
Es kann aber auch spezielle Einstellungen im Theme geben. Hier musst Du den Theme-Autor bei Bedarf kontaktieren.
Besten Gruß,
Die Elbnetz-Redaktion
Vielen Dank erst einmal für diesen informativen Blogbeitrag. Wirklich top!!! Jetzt habe auch ich einen Slider genommen und diesen ein wenig abgeändert. Egal mit welchem Slider ich das mache, in der Preview ist alles gut und auf der Website im Betrieb durchläuft der Slider einen Lauf um sich dann komplett auszublenden. Ich komm nicht dahinter. Wissen Sie eine Lösung?
Ich hätte erst eure Kommentare lesen sollen… ^^
Euer Link https://www.themepunch.com/faq/prevent-layers-from-disappearing/ hat geholfen!
Vielen vielen Dank!!!!!
Hallo, brächte mal ++Hilfe++
Auf meiner Wbseite http://www.oldtimer-mieten.events habe ich mehrere Slider eingebaut. Diese haben Problemlos monatelang funktioniert. Plötzlich verschwinden die beim Scrollen exakt nach 9 Sekunden. Bisher waren alle Bekannten und Freunde ratlos.
Hmm,
kann es sein, dass du WordPress aktualisiert hast, den Revolution Slider aber nicht auf den neusten Stand gebracht hast?
Beste Grüße,
Die Elbnetz-Redaktion
Beide getan. Erst Slider im letzten Monat und danach WordPress. Und damit fing alles an. Ich bekomm das Problem einfach nicht gelöst.
Dann bleibt dir noch das Support-Forum des Plug-ins.
Hallo Kim,
ich habe folgendes Problem: Im Slider auf der Startseite verschwindet nach ein paar Sekunden der Text, ich finde die Einstellung leider nicht wie ich das verhindern kann. Kannst du mir da weiterhelfen? Url -> happy-nutrition.com
Danke
Liebe Grüße, Sebastian
Lieber Sebastian,
wir haben für dich folgende Anleitung (in englischer Sprache gefunden: Prevent Layers from Disappearing.
Sonnige Grüße,
Die Elbnetz-Redaktion
Danke das hat mir sehr geholfen. Works
Hallo Kim,
ich würde gerne zwei Infos zum Rev Slider haben:
1. Wie kann ich Elemente so einstellen, dass sie nicht mehr ausgeblendet werden?
2. Es gab mal die Möglichkeit im Slide die responsive Darstellung zu prüfen. Das ist in der Version zur Zeit scheinbar nicht voreingestellt. Wie kann ich diese Einstellungen sichtbar machen?
Moin Sebastian,
1. Normaler Weise kannst du bei den einzelnen Elementen in deinem Slider unter dem Tab „Sichtbarkeit“ einstellen, auf welchen Geräten diese anzeigt werden. Darunter kannst du auch einstellen, ob das Element ab einer gewissen Breite ausgeblendet werden soll oder nur beim rüberfahren der Maus über den Slider angezeigt werden soll.
2. In der Vorschau (grauer Button mit Lupe) gibt es die Option, zwischen den einzelnen Bildschirmgrößen zu wechseln. Bei mir wird alles dementsprechend angezeigt, falls dem bei dir nicht so ist rate ich, dich am besten an den Support vom Revolution Slider zu wenden. Die können dir da sicher am besten weiterhelfen.
Liebe Grüße, Kim
Hallo und ein gesundes neues Jahr.
Wie füge ich einen Slider in einen Blog ein ?
Allerdings nicht fullscreen wie normal sondern sagen wir mal 600×800 pixel.
Wie funktioniert das ?
Grüße aus Hannover
Hallo, auch ich versuche gerade einen Revolution Slider auf der Statseite einzubinden. Doch das will nicht so richtig funktionieren. In der Preview wird der Slider angezeigt, doch auf der Startseite selber erscheint nur ein graues inhaltsloses Feld. So langsam bin ich am verzweifeln. Habt Ihr vielleicht einen Tipp für mich?
Moin Ronny,
leider können wir anhand Deiner Information nicht nachvollziehen, woran das Problem liegen kann.
Hast Du denn schon Kontakt mit dem Entwickler aufgenommen?
Besten Gruß,
Das Elbnetz-team
hallo wenn du es noch nicht geschafft hast , einfach jedens Bild ( Slider) anklicken und dann im festern oben auf das auge klicken, damit machst du das bild sichtbar