Slider-Revolution: Der ultimative Leitfaden

Slider Revolution ist heute buchstäblich eines der beliebtesten WordPress-Plugins. Mit über 400.000 Verkäufen und einer durchschnittlichen Bewertung von 4,75 hat das Plugin seine Effektivität und Größe bewiesen.

Revolution Slider: Was das Plugin so toll macht

Slider Revolution wurde von Themepunch entwickelt. Dieses Plugin ist ein Builder zum Erstellen reichhaltiger, dynamischer Inhalte für Webseiten. Die Betonung liegt auf „dynamisch“, da Sie damit aufregende Folien erstellen können, die den Seiten Bewegung verleihen.

Das Plugin wird mit einem benutzerfreundlichen Builder und unzähligen Optionen geliefert. Gut ausgearbeitete Einstellungspakete lassen den Benutzer jedes einzelne Detail des Schiebereglers anpassen und ermöglichen die Arbeit mit absolut unterschiedlichen Arten von Inhalten. Slider können für separate Posts, für ganze Seiten und ihre kleinen Teile erstellt werden. Um genauer zu sein, können Sie mit dem Plugin Folgendes erstellen:

• Bildschieber und Karussells
• Schieberegler für hervorgehobene Beiträge
• Social-Media-Feeds
• Mediengalerien
• Heldenblöcke und Titelseiten

Gründe, warum Sie Slider Revolution mit Ihrer Website verwenden sollten

Mit Slider Revolution können Sie nichts falsch machen. Ein umfassendes Plugin mit benutzerfreundlichen Tools ist eine perfekte Lösung, um schöne Slider zu erstellen, und hier sind die Gründe dafür.

Gebündeltes Plugin

Heutzutage enthält fast jedes WordPress-Theme ein Slider Revolution-Plugin. Normalerweise enthält das Themenpaket die kostenlose Version des Plugins. Das gebündelte Plugin ist auf sehr grundlegende Funktionen beschränkt, aber es ist dennoch sehr praktisch, das Thema zusammen mit dem Slider-Builder zu erhalten.

Wenn Sie jedoch auf viele Funktionen des Plugins zugreifen möchten, haben Sie die Möglichkeit, das unabhängige Plugin zu erwerben. Die reguläre Lizenz kostet 29 US-Dollar und ist auf dem Codecanyon-Marktplatz erhältlich.

Für die erweiterte Lizenz müssen Sie etwa 150 US-Dollar bezahlen und erhalten ein Jahr technischen Support für nur 9 US-Dollar.

Ja, das Plugin kann dich etwas Geld kosten, aber du kannst auch mit der regulären Lizenz des Plugins tolle Slider erstellen.

Vorlagen

Das erstaunliche Plugin wird Sie nicht nur mit den Tools und Funktionen beeindrucken, sondern verfügt auch über eine Sammlung gut aussehender vorgefertigter Layouts. Eine wunderbare Sammlung vorgefertigter Vorlagen und die Bibliothek mit kostenlosen Medienobjekten, die Sie auf Ihrer Folie verwenden können, vereinfachen und beschleunigen die Folienerstellung. Sie können die Vorlage für jedes Ihrer Projekte auswählen und anstatt einen Slider von Grund auf neu zu erstellen, können Sie sich die Zeit sparen und mit dem vorgefertigten Layout fortfahren.

Importieren Sie einfach die von Ihnen gewählte Vorlage und beginnen Sie sofort mit der Erstellung.

Außerdem erhalten Sie Zugriff auf die große kostenlose Bibliothek mit verschiedenen Objekten wie Schriftsymbolen, Hintergrundbildern, transparenten PNG-Objekten, SVG und anderen. Sie können sie verwenden und einfach in Ihre Folien einfügen.

Visueller Editor

Slider Revolution wird mit einem erstaunlichen WYSIWYG-Editor geliefert, der es sehr einfach macht, Slider-Vorlagen zu erstellen und zu ändern. Viele Websitebesitzer finden es schwierig, komplexe Codes zu schreiben oder ein separates Team für diese Aufgabe einzustellen. Dank des Slider-Editors können Sie Zeit sparen und die Drag-and-Drop-Funktion nutzen, um hervorragende Slides zu erstellen.

Mit dem Slider-Plug-in können Sie kreativer mit den von Ihnen erstellten Slidern umgehen und sie einfach auf Ihrer Website präsentieren. Sie haben unzählige benutzerdefinierte Optionen wie das Erstellen einer benutzerdefinierten Schiebereglerposition, das Auswählen der Schiebereglerverzögerung, das Hinzufügen von Übergängen, das Hinzufügen von Medienebenen und so weiter. Über die Dropdown-Liste ist dies im Handumdrehen erledigt. Darüber hinaus verfügt das Plugin über viele Navigationsfunktionen, mit denen Sie den Navigationsstil ändern und Pfeile, Aufzählungszeichen, Registerkarten und Miniaturansichten hinzufügen können.

High-Speed-Leistung

Slider Revolution ist gut codiert, um schnell zu laden. Alle Aspekte der Schieberegler sind optimiert, und es verwendet erweiterte Debugging-Optionen, um Probleme zu beheben, Kerndateien automatisch zu laden und mit den verwendeten Funktionen zu skalieren. Es verwendet auch intelligentes Lazy Loading und ist SEO-optimiert.

Responsive Layouts

Eines der größten Probleme, auf das viele Webentwickler stoßen, ist, dass Schieberegler nicht reagieren. Infolgedessen funktionieren diese Schieberegler auf kleinen Geräten nicht gut oder werden überhaupt nicht angezeigt. Reaktionsfähigkeit ist ein wesentlicher Bestandteil der Benutzererfahrung. Bei der enormen Menge an Verkehr, der von Mobiltelefonen kommt, wird es eine Schande für Ihre Slider sein, wenn sie auf anderen Geräten nicht gut funktionieren.

Slider Revolution ist nicht nur ein einfacher Slider. Das Plugin ist reaktionsfähig, sodass Sie sicher sein können, dass alle Folien, die Sie erstellen, für jedes Gerät optimiert sind, auf dem sie verwendet werden.

Slider Revolution hat dafür gesorgt, dass die reaktionsschnellen Haltepunkte für jeden Schieberegler festgelegt werden, sodass jedes Design auf verschiedenen Geräten und kleinen Bildschirmen großartig aussieht. Welche Option Sie auch wählen – Einzel-, Karussell- oder Standard-Schieberegler, Sie können sicher sein, dass es auf jedem Gerät einfach perfekt aussieht.

Anpassungsoptionen

Ein weiterer Vorteil des Slider Revolution Plugins sind seine vielfältigen Anpassungsmöglichkeiten. Sie können Folienverzögerungen festlegen, Navigationspfeile auswählen, Hintergründe parallaxieren, Medienebenen hinzufügen, Schaltflächen einfügen, benutzerdefinierte Schriftarten festlegen, Ränder hinzufügen und vieles mehr.

Mit dem Slider Revolution-Plugin können Sie alles anpassen. Um Zeit zu sparen, können Sie Voreinstellungen speichern, um sie später in den Folienübergängen, Schriftstilen und Ebenenanimationen zu verwenden.

Slider Revolution-Addons

Möchten Sie Ihre Schieberegler mit Übergangseffekten und Animationen komplexer und vielfältiger gestalten?

Du bist startklar! Slider unterstützt verschiedene Inhaltstypen, wie Blogbeiträge und aktuelle Beiträge, und ermöglicht Ihnen die Verwendung von Feeds von sozialen Plattformen wie Twitter, Facebook, Vimeo, YouTube und Instagram. Sie können im Handumdrehen Links, Videos, Bilder und Text hinzufügen. Mit Hilfe der Variationsfunktion können Sie eine funktionsreiche und mit Informationen übersäte Folie erstellen, die Besucher verwenden können.

Sicherheit

Sicherheit ist einer der wichtigsten Aspekte, wenn es um Websites geht. Sie könnten hören, dass es vor einigen Jahren eine Kriegsanfälligkeit gab, die von Slider Revolution betroffen war. Seitdem hat Themepunch den Schutz der Software erhöht und nutzt nun eine Drittorganisation, um die Plugin-Probleme regelmäßig zu prüfen. Sie können also sicher sein, dass das Plugin hochsicher ist.

Technischer Support

Das Plugin wird mit einer ausführlichen Dokumentation und einem großen FAQ-Bereich mit den häufigsten Fragen zum Plugin geliefert. Deshalb ist es sehr einfach, mit der Slider-Revolution zu beginnen, auch wenn Sie keine Erfahrung damit haben. Die Verfügbarkeit der detaillierten Tutorials macht es einfach, die Folie für die Website für alle zu erstellen.

Inhaltsquellen

Das Plugin verarbeitet erfolgreich die Erstellung von Schiebereglern für verschiedene Inhaltsquellen. Egal, ob es sich um ein WooCommerce-Produkt oder einen gewöhnlichen Post handelt, Slider Revolution hat die Tools.

Leistungsstarke Funktionen machen dieses Plugin zur ersten Wahl für alle. Sein Hauptvorteil besteht darin, dass es die Kategorie einer All-in-One-Lösung darstellt. Sie benötigen keine zusätzlichen Plugins, alles ist im Plugin enthalten.

Wir sollten auch erwähnen, dass es erschwinglich ist. Die reguläre Lizenz kostet 26 $. In Anbetracht der Anzahl der Funktionen, die Sie für den Preis erhalten, ist Slider Revolution das günstigste Slider-Plugin der Branche.

In dieser ultimativen Anleitung behandeln wir alles von der Installation des Plugins bis zum Hinzufügen einer neuen Folie und deren Platzierung auf der Website.

Installation des Plugins und Ersteinrichtung

Viele der Theme-Entwickler schließen Slider Revolution in das Paket der Themes ein.

Wenn Sie eines der Premium-WordPress-Themes von StylemixThemes gekauft haben, müssen Sie das Plugin nicht manuell installieren. Slider Revolution wird automatisch mit dem Demo-Import installiert.

Wenn das Paket des von Ihnen verwendeten Designs das Plugin nicht enthält, müssen Sie es herunterladen und manuell installieren. Um eine Kopie von Slider Revolution zu erhalten, folgen Sie diesem Link .

Sie müssen das Plugin kaufen. Melden Sie sich bei Ihrem Envato-Konto an und tätigen Sie Ihren Einkauf. Laden Sie danach die Datei herunter – wählen Sie die Download-Option für „Nur installierbare WordPress-Datei“.

Jetzt müssen Sie Ihrer Website ein neues Plugin hinzufügen. Gehen Sie zu Ihrem Dashboard — Plugins > Neu hinzufügen . Sobald die Installation abgeschlossen ist, aktivieren Sie das Plugin.

Herzlichen Glückwunsch, Sie sind fertig und können mit der Erstellung Ihres ersten Sliders beginnen!

So aktualisieren Sie Slider Revolution

Themepunch veröffentlicht regelmäßig Updates des Slider-Plugins. Um es zu aktualisieren, öffnen Sie Slider Revolution von Ihrem Dashboard und folgen Sie der Registerkarte Updates. Auf dieser Seite finden Sie einen kleinen Bereich mit dem Titel „Plugin-Updates“. Hier wird angegeben, welche Version des Plugins derzeit auf Ihrer Website installiert ist und welche Version für Updates verfügbar ist.

Sie können auch den Standardweg verwenden und zu Dashboard > Updates gehen und von dort aus die neue Version des Plugins installieren.

Slider-Revolution: Erste Schritte

Wenn Sie den Schieberegler zum ersten Mal verwenden, ist er mit der darin verwendeten Terminologie möglicherweise nicht klar genug. Es gibt drei Hauptelemente, mit denen Sie verwechselt werden können. Sie sind Module, Folien und Ebenen. Jeder von ihnen kann Teil eines anderen sein und auch einzeln arbeiten.

Sie können beispielsweise ein Modul erstellen, das als Schieberegler fungiert und Folien enthält. Außerdem können Sie Module wie Navigationsmenüs oder Kopfzeilen erstellen, die überhaupt keine Schieberegler sind, aber dennoch Folien enthalten. Der Grund dafür ist, dass Slider Revolution ursprünglich als Slider-Builder erstellt wurde, aber jetzt auch als vollständiger Website-Editor verwendet wird. Mit seiner Hilfe können Sie also viel mehr als nur einfache Folien bauen.

Beziehung zwischen Modulen, Folien und Ebenen

Module sind Container für Folien, die wiederum Container für Ebenen sind.

Module existieren, um Folien zu enthalten. Jedes Modul muss mindestens eine Folie haben. Wenn Sie ein leeres Modul erstellen, wird automatisch eine leere Folie hinzugefügt. Sie können zusätzliche Folien erstellen oder alles nur zu einer einzigen Folie hinzufügen. Es hängt vollständig von der Art des Inhalts ab, den Sie erstellen.

Die Folie ist ein Container für Ebenen. Jede Folie muss mindestens eine Ebene haben. Wenn eine neue Folie erstellt wird, wird automatisch eine Hintergrundebene hinzugefügt. Diese Ebene ist immer vorhanden, sie kann umbenannt und unsichtbar gemacht, aber nicht entfernt werden. Dieser Hintergrundbereich kann mit Ebenen gefüllt werden.

Ebenen enthalten visuelle, Audio- oder Layoutelemente und werden Folien hinzugefügt. Text, Schaltfläche, Bild, Audio, Video, Gruppe und Zeile sind alle Arten von Ebenen. Jede Ebene repräsentiert ein einzelnes Medium. Ebenen können so animiert werden, dass Ihre Idee am besten zur Geltung kommt.

So verwenden Sie Slider Revolution: Globale Einstellungen

Wie wir bereits erwähnt haben, bietet Slider Revolution unzählige Optionen, und das ist keine Übertreibung. Aus diesem Grund empfehlen wir Ihnen, bevor Sie mit dem Erstellen des Schiebereglers beginnen, zuerst die globalen Einstellungen durchzusehen und sich mit den Hauptprinzipien der Arbeit mit dem Plugin vertraut zu machen.

Wenn Sie in Ihrem Dashboard auf den Slider Revolution klicken, können Sie den Setup-Bildschirm des Plugins öffnen.

Setup-Bildschirm

Am oberen Rand des Bildschirms finden Sie die Registerkarte mit den folgenden Optionen:

Module, Updates, Aktivierung, News, Globals, FAQs, Support.

In dieser Phase werden wir nur mit den beiden arbeiten: Modules – um ein neues zu erstellen, und Globals – um sich die globalen Plugin-Einstellungen anzusehen.

Globale Einstellungen

Wir beginnen mit den Globals . Die globalen Einstellungen sind hauptsächlich in mehrere Abschnitte unterteilt:

• Allgemein
• Haltepunkte des Standard-Layoutrasters
• Schriftarten
• Sonstig

Diese Einstellungen sind für standardmäßige reaktionsschnelle Rasteroptionen verantwortlich, die beim Erstellen eines neuen Schiebereglers, beim Laden benutzerdefinierter Schriftarten, beim Erstellen von Datenbanken und mehr gelten.

Es gibt nur einige Optionen, auf die Sie sich konzentrieren müssen. Erstens ist die Reaktionsfähigkeit, um sicherzustellen, dass Ihre zukünftigen Slider auf allen Geräten gut aussehen. Hier finden Sie eine Kurzanleitung zu Geräten und ihren Größen.

Im Abschnitt Haltepunkt des Standardlayoutrasters können Sie die Breite in Pixeln für verschiedene Gerätetypen festlegen: Desktop, Notebook, Tablet und Mobilgerät.

Solange jedes Gerät seine eigene Größe hat, geben Sie die genaue Breite für jeden Typ ein, um die korrekte Anzeige eines Schiebereglers zu gewährleisten.

• Standard-Desktop-Monitore haben eine Breite von 1920 Pixel.
• Notebook-Geräte, zu denen alle Laptops, MacBooks und horizontal ausgerichteten Tablets gehören, sind etwa 1600 Pixel breit.
• Vertikal ausgerichtete Tablets haben eine Breite von nicht mehr als 778 Pixel (bezogen auf das iPad).
• Und Mobilgeräte. Dies ist ein wichtiger Teil, da heutzutage mehr als die Hälfte des gesamten Internetverkehrs über mobile Geräte generiert wird und es nicht befriedigend ist, wenn Benutzer die Schieberegler auf Ihrer Website nicht richtig sehen können. Dies kann jedoch verwirrend sein, und der Grund dafür ist, dass moderne Smartphones absolut unterschiedliche Größen haben. Wir empfehlen Ihnen, die Nummer zu verwenden, nicht über 500 Pixel.

Die zweite Sache, die Sie vielleicht steuern möchten, ist der Zugriff auf den Schieberegler. Die Option Berechtigung ermöglicht es Ihnen, anderen Benutzern außer Administratoren und Redakteuren den Zugriff auf das Plugin zu verweigern.

Jetzt können Sie mit dem Bau Ihrer Slider beginnen! Es gibt drei Optionen, die Sie verwenden können. Sie können von Grund auf neu beginnen und einen neuen Slider erstellen, Sie können eine Datei aus den Slider Revolution-Vorlagen exportieren oder Beispiel-Slider importieren, die in Ihrem Design enthalten sind.

In unserem Artikel werden wir die erste Option überprüfen und einen neuen Slider von Grund auf neu erstellen. Auf diese Weise können wir weitere Möglichkeiten des Plugins erkunden.

Erstellen eines neuen Schiebereglers

Wenn wir nun mit einigen primären Einstellungen fertig sind, können wir mit der Erstellung einer neuen Folie fortfahren. Öffnen Sie die Slider Revolution-Einstellungen und klicken Sie auf das neue leere Modul.

Es wird Ihnen angeboten, die Kurzanleitung durchzugehen. Klicken Sie auf Start Guide, wenn Sie an einer kurzen Lektion teilnehmen möchten. Oder beenden Sie die Anleitung, um diesen Schritt zu überspringen.

Ihr Bildschirm wird in mehrere Bereiche unterteilt: Links von Ihnen befindet sich ein Rahmen, in dem alle Inhalte angezeigt werden, rechts ein Arbeitsbereich mit Abschnitten und Einstellungen.

Allgemeine Optionen

Beginnen wir mit den allgemeinen Optionen . Klicken Sie auf das Zahnradsymbol , um die Einstellungen zu öffnen. Zuerst müssen wir unser Modul benennen. Geben Sie im Abschnitt Titel den Namen ein und duplizieren Sie ihn für den Alias ​​in Kleinbuchstaben und mit Bindestrichen zwischen den Wörtern anstelle von Leerzeichen.

Alias ​​wird benötigt, um den Slider zu einer Seite hinzuzufügen. Sie können auch den bereitgestellten Shortcode verwenden, indem Sie ihn kopieren und auf der Seite oder dem Post platzieren, auf der Sie Ihren Slider anzeigen möchten.

Danach können wir den Typ und die Höhe und Breite des Desktop-Ebenenbereichs anpassen. Diese Einstellungen befinden sich auf der Registerkarte Layout.

Für den Typ haben Sie drei Möglichkeiten zur Auswahl:

• Slider – mehrere animierte Folien, die sich drehen, um eine nach der anderen anzuzeigen.
• Szene – eine einzelne Folie, die als Inhaltsmodul verwendet werden kann.
• Karussell – viele Folien mit mehreren gleichzeitig sichtbar.

Die nächste Einstellung, die wir angeben müssen, ist die Größe. Außerdem stehen drei Optionen zur Verfügung:

Auto – dies ist der Standardparameter, der Ihren Schieberegler auf die Breite des Hauptcontainers ausdehnt, wie von Ihrem WordPress-Design definiert.

Volle Breite – eine Schieberegleroption in voller Breite erstreckt sich von links nach rechts (Sie müssen noch die Höhe definieren)

Vollbild – für große Schieberegler, die den gesamten Bildschirm ausfüllen, unabhängig von der Größe Ihres Browsers oder Geräts.

Mit dem Slider Revolution-Plugin können Sie jeden Teil der Seite auf der Website animieren. Bitte bedenken Sie, dass dadurch das Gewicht Ihrer Seite erhöht wird und somit das Laden Ihrer Seite länger dauert. Infolgedessen kann es sich negativ auf das SEO-Ranking auswirken.

Größeneinstellungen ändern

Die klassische oder lineare Größenanpassung stellt sicher, dass Ihr Schieberegler nach der Konfiguration Ihrer Einstellungen für die Hauptbildschirmgröße entsprechend komprimiert wird (z. B. wird ein 1000 x 400 Pixel großer Schieberegler mit den Schriftarten, Bildern und anderen Schiebereglerelementen auf einen 500 x 200 Pixel großen Schieberegler komprimiert).

Intelligente Vererbung ermöglicht die automatische Erstellung von Gerätegrößen basierend auf den von Ihnen gewählten Desktop-Einstellungen mit der Option zur Anpassung.

Mit der benutzerdefinierten oder manuellen Einrichtung können Sie Ihre Schiebereglergröße mit exakten Pixeln festlegen, mit der Möglichkeit, die Schiebereglergrößen auf unterschiedliche Bildschirmbreiten einzustellen – Desktop, Laptop, Tablet und Telefon.

Reaktionsfähigkeit der Folien

Weiter gehts. Wir sind mit der Reaktionsfähigkeit noch nicht fertig. Es gibt eine Ebenenbereichsgröße, in der Sie die Browserbreite angeben können.

Normalerweise sind die Optionen standardmäßig auf Automatische Größen eingestellt, und es werden nur die Desktop-Parameter angegeben. Sie können dasselbe für andere Optionen tun, indem Sie sie einschalten.

Auch wenn Sie das spezifische Gerät einschalten, wird Ihr Arbeitsbereich (Foliencontainer) an die Parameter des ausgewählten Geräts angepasst, dh Sie können die Anzeige des Schiebereglers für das konkrete Gerät steuern.

Für jedes Gerät gibt es festgelegte Rastergrößen aus globalen Einstellungen. Das Raster ist der Bereich, in dem sich Ihre Slider-Ebenen befinden. Es gibt keine strengen Zahlen, die Sie eingeben sollten. Sie werden herausfinden, was für Sie am besten funktioniert, nachdem Sie verschiedene Optionen ausprobiert und untersucht haben.  

Dies war nur der Anfang, einige allgemeine Optionen, die Ihnen die weitere Arbeit mit dem Schieberegler erleichtern werden. Und sobald Sie mit diesem Teil fertig sind, können Sie zum nächsten Schritt wechseln.

Ein genauerer Blick auf die Optionen

Neben den allgemeinen Optionen gibt es drei weitere Registerkarten, mit denen Sie viel interagieren werden. Wir möchten Sie durch die wichtigsten Einstellungen führen, mit denen Sie arbeiten werden. Grundsätzlich berücksichtigt die Erstellung der Folien mehrere Komponenten, die am Prozess beteiligt sind. Dies sind allgemeine Optionen, Navigationseinstellungen, Folienoptionen und Ebenen.

Wir haben nicht gescherzt, als wir sagten, dass Slider Revolution tonnenweise Optionen hat. Es gibt zu viele Elemente, um sie abzudecken, lassen Sie uns alle kurz beschreiben und dann die wichtigsten detaillierter betrachten.

1. Allgemeine Optionen

Wir haben bereits einige Elemente aus den allgemeinen Optionen wie Titel und Layout angesprochen. Abgesehen davon gibt es jedoch noch andere Dinge, die Sie anpassen müssen.

Alles in allem können Sie mit den allgemeinen Optionen Folgendes einrichten:

Titel — um den Namen des Schiebereglers anzugeben.
Layout – Wählen Sie den Schiebereglertyp (Schieberegler, Szene oder Karussell) und die Größe (Auto, Vollbild oder Vollbild) aus. Dies hilft, die Breiten und Höhen für den Ebenenbereich, die Position Ihres Moduls, eine Standardhintergrundfarbe oder ein Standardbild und mehr zu bearbeiten.
Inhalt – gibt an, wie der Inhalt zum Schieberegler hinzugefügt wird. Sie können aus 9 Inhaltsquellen wählen.

• Standardeinstellungen – hier empfehlen wir, sich auf einen wichtigen Parameter zu konzentrieren – Foliendauer (wie lange jede Folie dauert).
• Allgemein – Dieser Abschnitt enthält Diashow-Einstellungen für automatisches Drehen, Stoppen beim Schweben, Schleifen von Folien und Auswählen einer bestimmten ersten Folie. Hier können Sie Ihren Schieberegler auch auf Mobilgeräten oder unter bestimmten Pixelbreiten ausblenden oder deaktivieren.
• Beim Scrollen – hier können Benutzer Scroll-Effekte wie Parallaxe, 3D-Tiefen, Zeitachse, Überblendung, Unschärfe, Graustufen und mehr auswählen. Alle Effekte gehen mit anpassbaren Einstellungen.
• Spinner – oder Preloader, und das Plugin hat 15 Spinner-Optionen zur Auswahl.
• Mit erweiterten Optionen können Sie Lazy Loading aktivieren, ein Fallback-Bild auswählen oder Ihren Slider in alten Browsern vereinfachen.
• CSS/jQuery – hier können Sie Ihren eigenen benutzerdefinierten Code zu Schiebereglern hinzufügen. Beachten Sie, dass dies besser von Fachleuten oder Benutzern verwendet werden sollte, die mit dem Konzept der Programmierung und Codierung vertraut sind.
• Als Modal – diese spezielle Option wird benötigt, wenn Sie einen Schieberegler erstellen möchten, der als Popup oder Lightbox angezeigt wird, und bietet Ihnen die Optionen für Schiebereglerposition, Coverfarbe und den Shortcode, der beim Einfügen Ihres modalen Schiebereglers in Seiten verwendet werden soll.
• Skin – Skin stellt die Voreinstellung dar, die Sie erstellen und Textebenen zuweisen können (gibt die Farbe der Hervorhebung, Überschrift, des Inhaltstextes an).

Addons – hier finden Sie Addons (Hinweis – Addons sind nur verfügbar, wenn Sie Ihre eigene Slider-Lizenz erworben haben).

2. Navigationsoptionen

Wenn Sie mehr als eine Folie einfügen möchten, helfen Ihnen die Navigationsoptionen dabei, dem Schieberegler Navigationswerkzeuge wie Aufzählungszeichen, Pfeile und Schaltflächen hinzuzufügen.

Alle Optionen umfassen einfach anpassbare Einstellungen für Position/Ausrichtung, Größe, Sichtbarkeit und globale Gestaltung/Voreinstellungen.

Zu den Navigationselementen gehören:

• Fortschritt – Fortschrittsbalken oder Kreis, der den aktuellen Folienfortschritt visualisiert.
• Pfeile – Erleichtern Sie Besuchern das Klicken durch Ihre Folien.
• Aufzählungszeichen – 14 Arten von Navigationspunkten, die Sie Ihrer Folie hinzufügen können.
• Tabs – sehr nützlich für Inhalts-Schieberegler, bei denen die Tab-Navigation benötigt wird.
• Thumbs – ist erforderlich, um ein Miniaturbild als Navigationsoption anzuzeigen. Es stehen 5 Optionen zur Verfügung.
• Vorschaugröße: Legt die Größe des Vorschaubilds fest.
• Touch – enthält Optionen für Block-Scrolling, Geschwindigkeit und Richtung.
• Tastatur – Sie können die Tastaturnavigation aktivieren (empfohlen für Barrierefreiheit).
• Maus – aktiviert die Maussteuerung, z. B. eine Karussellfunktion oder Rückwärtsblättern.
• Nav-Editor – Dieser Abschnitt dient zum Anpassen von Pfeilen, Aufzählungszeichen, Registerkarten oder Daumen mit Ihrem eigenen benutzerdefinierten Code.

3. Folienoptionen

Der nächste Teil der Einstellungen bezieht sich auf die Folienoptionen.

• Hintergrund: Wählen Sie den Hintergrund für Ihre Folie aus. Wählen Sie zwischen transparent, farbig (Sie können einen Farbverlauf hinzufügen), Bild, externem Bild oder einem Video (YouTube, Video oder HTML5).
• Miniaturbild: Definieren Sie das für den Administrator sichtbare Miniaturbild und das für die Navigation verwendete Miniaturbild.
• Animation: Wählen Sie die Übergangsanimation für Ihre Folien.
• Filter – 22 verschiedene Filter, die Sie Ihren Folien hinzufügen können.
• Fortschritt – Ermöglicht das Anpassen der Folienlänge, Pause und Sichtbarkeit auf einer Folie.
• Veröffentlichungsregeln – Steuern Sie, ob Ihre Folie veröffentlicht oder nicht veröffentlicht wird.
• Tags & Link – hilft beim Hinzufügen benutzerdefinierter Klassen-, ID- und HTML-Daten für Ihre Folie sowie eines Links.
• Parameter – fügen Sie bis zu 10 benutzerdefinierte Parameter hinzu, die Sie in Ihren Folien und Ihrer Navigation verwenden können.
• Loop-Ebenen – Verwalten Sie die Loop-Einstellungen, wenn Ihr Schieberegler nur eine Folie hat.
• Beim Scrollen – Passen Sie Ihre Parallaxe- und Scroll-Effekte pro Folie an.

Hinzufügen neuer Folien

Nachdem Sie den Schieberegler eingestellt und alle Optionen angepasst haben, ist es an der Zeit, dem Projekt eine neue Folie hinzuzufügen. Sie können den Rahmen sehen, der den Folieninhalt anzeigt, wenn Sie ihn hinzufügen. Jetzt ist es durchsichtig. Sie können die Hintergrundoption ändern und ein Bild hinzufügen oder die Farbe festlegen.

Sie können ein Bild von Ihrem Computer hochladen oder eine externe Quelle verwenden (indem Sie einen Link hinzufügen). Außerdem können Sie die Farbe als Hintergrund anstelle eines Bildes festlegen. Es kann ziemlich einfach gemacht werden.

Wählen Sie einfach die Option „Farbig“ aus der Dropdown-Liste „Typ“ im Bedienfeld „Quelle“ und klicken Sie dann auf die Schaltfläche „Hintergrundfarbe“, um Ihre Farbe auszuwählen. Wenn Sie das Video verwenden möchten, fügen Sie einfach die Quelle hinzu.

Hinzufügen einer neuen Ebene zur Folie

Oben auf dem Bildschirm finden Sie die Option +Ebene hinzufügen. Verwenden Sie es, um der Folie eine neue Ebene hinzuzufügen. Es gibt 8 verschiedene Optionen.

Die beliebtesten Optionen sind jedoch Bilder und Texte mit Unterstützung von Schaltflächen, wenn Sie dem Schieberegler einige Navigationswerkzeuge hinzufügen müssen.

Ebenenoptionen: Verwendung

Die Flexibilität von Slider Revolution basiert auf der Verfügbarkeit mehrerer Optionen und der Möglichkeit, jedes Detail separat einzurichten sowie das gesamte Slider-Projekt anzupassen. Schichten sind keine Ausnahme. Jedes Mal, wenn Sie der Folie eine neue Ebene hinzufügen, können Sie jede Option dafür steuern. Im Beispiel des Hinzufügens eines neuen Bildes zur Folie werden wir alle Parameter überprüfen, die Sie mit den Ebenenoptionen ändern können.

Wenn Sie Ihrer Folie eine Bildebene hinzufügen möchten, klicken Sie einfach auf Bild im Dropdown-Menü Ebene hinzufügen. Laden Sie dann das gewünschte Bild hoch.

Neben dem Rahmen finden Sie verschiedene Ebenenoptionen (Inhalt, Stil, Größe & Pos usw.).

Ebeneninhalt zeigt einige grundlegende Informationen über die Ebene an. Sie können verzögertes Laden einstellen und den Quelltyp ändern.

Mit den Ebenenstiloptionen können Sie einen farbigen Hintergrund hinzufügen.

Die nächste Option ist der Abstand . Der Abstand hilft uns, die Ebene von oben nach unten, von links nach rechts, von unten nach oben und von links nach rechts zu verschieben. Sie sind mit dem Buchstaben „M“ gekennzeichnet.

Pos und Größe. Legen Sie die Ausrichtung sowie die Position und Größe der Bildebene fest. Sowohl die vertikale als auch die horizontale Ausrichtung können einfach geändert werden, klicken Sie einfach auf eines der Ausrichtungssymbole.

Danach können Sie die Position mit den Optionen Vertical Offset from Aligned Position festlegen. Spielen Sie mit den X- und Y-Parametern, um Ihre Ebene auf der Folie zu verschieben.

Erweiterte Layer-Optionen

Mit den erweiterten Stiloptionen können Sie eine Ebene horizontal, vertikal und zentral drehen und den Ebenen Schatten hinzufügen .

Layer-Animationsoptionen

Animation ist die Hauptoption in der Slider Revolution. Die Hauptidee des Plugins besteht darin, Ihrer Website animierte Elemente anstelle von statischen Standard-Visuals hinzuzufügen.

Animationsoptionen fügen Ihren Folien Bewegung hinzu. Mit dieser Aktion können Sie die Folien animieren und Animationen zum Erscheinen und Beenden festlegen.

Es gibt zwei Zeilen für Erscheinungs- und Ausgangsoptionen: IN und OUT.

Jede Zeile ist mit einem Dropdown-Menü mit verschiedenen Arten von Animationen versehen. Standardmäßig ist die Fade-In-Option für alle Ebenen eingestellt. Probieren Sie einige Animationen aus, um zu sehen, wie sie auf Ihrer Folie aussehen, und wählen Sie die beste aus.

Der folgende Abschnitt wird für Animationsdauer, Animationsverlangsamung und zum Definieren von Animationsstart verwendet . Die Dauer definiert, wie lange es dauert, bis die Animation beendet ist, die Option Start definiert die Zeitdauer, nach der die Animation gestartet wird, sobald die Folie geladen ist. Easing definiert die Geschwindigkeit, mit der die Animation fortschreitet.

Animationszeitachse

Wenn Sie Ihrer Folie mehrere Ebenen hinzugefügt haben, möchten Sie wahrscheinlich nicht, dass sie alle gleichzeitig angezeigt werden. Die Slider Revolution Animation Timeline kann Ihnen helfen, dieses Problem zu lösen. Es befindet sich direkt unter unserem Arbeitsrahmen.

Der Standard-Frame-Start für jede Ebene ist auf 0 Millisekunden eingestellt, was bedeutet, dass Ebenen nach 0 Millisekunden nach dem Laden auf dem Bildschirm erscheinen. Die Erscheinungsdauer ist normalerweise auf 3 Sekunden eingestellt, was bedeutet, dass eine Ebene in 3 Sekunden vollständig sichtbar wird. Um die Optionen zu ändern, wählen Sie die Ebene aus und bearbeiten Sie sie, indem Sie einen anderen Wert angeben.  

Stellen Sie sicher, dass Sie unterschiedliche Werte für verschiedene Ebenen festlegen, damit sie nicht sofort angezeigt werden und unordentlich aussehen.

Lassen Sie uns nun einen genaueren Blick auf die Optionen von Timeline werfen

1. Listenansicht

Diese Symbole können verwendet werden, um die Ebenen auszublenden oder anzuzeigen und die Zeilen basierend auf der vertikalen Ausrichtung auszublenden oder anzuzeigen. Nur der Administrator der Website hat Zugriff auf diese Optionen.

2. Timeline-Dauer
Die Gesamtdauer der Timeline wird im Modul General Options > Defaults definiert. Es kann auch individuell unter Folienoptionen > Fortschritt eingestellt werden.

Durch Ziehen des Blocks in der Timeline nach links und rechts können Sie die Folienlänge einfach anpassen. Eine weitere Option, die Sie tun können, besteht darin, auf das Uhrensymbol zu klicken und es in Prozent zu bearbeiten.

3. Vorschau der Zeitleiste

Um eine Vorschau der Timeline anzuzeigen, müssen Sie auf das Wiedergabesymbol klicken oder einfach den Leerlaufblock ziehen.

4. Ebenen umbenennen

Um die Ebene umzubenennen, doppelklicken Sie auf den Text der Ebene in der Zeitachse und benennen Sie ihn um. Außerdem können Sie den Titel der Ebene oben in der Mitte des Editors bearbeiten.

5. Ebenen-Z-Index / Stapelreihenfolge

Um den Z-Index/die Stapelreihenfolge einzustellen, müssen Sie nur Ebenen in die Zeitachse ziehen.

6. Animationen

Für jede Ebene gibt es eine In- und Out-Animation und zusätzliche Keyframe-Animationen. Alle Animationen werden in der Timeline dargestellt.

Ziehen Sie einen Animationsblock, um den Startpunkt der Animation in der Timeline anzupassen. Und bearbeiten Sie die Dauer der Animation, indem Sie den Endpunkt des Blocks ziehen

Layer-Loop-Optionen

Auf der Registerkarte Schleife können Sie Schleifenanimationen erstellen. Sie können einen Animationstyp auswählen, die Schleifengeschwindigkeit und -beschleunigung definieren und eine Start- und Endzeit für die Schleife festlegen.

Es gibt 8 Typen, aus denen Sie wählen können: Benutzerdefiniert, Pendelschleifen, Effektschleifen, Welle, Wackeln, Rotieren, Gleiten und Schweben und Pulsieren. Jede Loop-Animation hat ihre eigenen Optionen.

Das Pendel lässt Ihre Ebene von einer Seite zur anderen schwingen. Zu den Optionen, die Sie einrichten können, gehören der End- und der Startgrad – dies identifiziert die Grade, zwischen denen die Animation stattfinden wird, und der X- und Y-Ursprungspunkt – dieser Parameter bestimmt den Achsenpunkt, von dem aus sich die Ebene dreht, Sie können ihn angeben Prozente.

Bei Effect Loops können Sie aus mehreren Optionen wählen – Graustufen, Blinken, Flattern und Lithing. Alle Effekte sehen unterschiedlich aus, daher empfehlen wir Ihnen, sich jede Option anzusehen, um die für Sie am besten geeignete auszuwählen.

Die Wellenanimation lässt Ihre Ebene in einer Bewegung ähnlich der Welle rotieren . Es dreht sich um eine Achse außerhalb der Schicht. Sie können einen Rotations-X- und -Y-Punkt festlegen, um die Position der Achse zu bestimmen, um die sich die Ebene dreht, einen Startwinkel, um die Startposition der Animation zu identifizieren, und einen Radius für die Umlaufbahn der Rotation.

Die Wiggle-Schleife lässt Ihre Ebene von Seite zu Seite wackeln – von oben nach unten, von links nach rechts und umgekehrt. Verwenden Sie das Dropdown-Menü, um die gewünschte Option auszuwählen.

Die Rotationsschleife lässt Ihre Ebene um den festgelegten Achsenpunkt rotieren. Die Ebene dreht sich und bildet einen vollständigen Kreis, wenn Sie das erste Element aus der Dropdown-Liste Drehen auswählen – das Element Drehen.

Um Ihre Ebene von links nach rechts, von rechts nach links, von oben nach unten und diagonal zu bewegen, können Sie die Slide-and-Hover-Animation verwenden. Sie können eine Start- und Endposition für die Animation festlegen.

Die Pulse- Animation lässt Ihre Ebene kontinuierlich ein- und auszoomen. Geben Sie den Zoom-Start und das Zoom-Ende an. Die Standardwerte hier sind 1 für Start und Ende. Das bedeutet, dass die Ebene bei 100 % ihrer Größe bleibt. Mit anderen Worten, es wird nicht animiert. Wenn Sie 0,5 für Zoom Start eingeben, beginnt Ihre Ebene bei 50 % ihrer Größe und zoomt auf 100 % ihrer Größe, dann zurück auf 50 % usw.

Ebenen-Hover-Optionen

Hover-Effekte sind die Grundpfeiler guter UX. Hover-Effekte zeigen in der Regel an, dass die Aktion erforderlich ist oder ausgeführt wird, zumal diese Methode aktiv mit den Schiebereglern verwendet wird. Mit der Slider-Revolution können Sie Ebenen, Texte und Bilder beim Schweben ändern.

Hinzufügen von Hover-Effekten in Slider Revolution

Zuerst müssen Sie den Layer-Hover aktivieren. Wählen Sie die Ebene aus, der Sie den Effekt hinzufügen möchten, und klicken Sie unter Ebenenoptionen auf Hover. Klicken Sie auf Aktiviert, um es einzuschalten.

Darunter finden Sie alle Optionen, die Sie zum Festlegen Ihres Ebenenverhaltens beim Hovern benötigen. Wenn Sie alles so lassen, wie es ist, zeigt die Ebene keine Änderungen.

Hover-Einstellungen

Das erste, was Sie hier einstellen können, ist der Cursor. Im Dropdown-Menü finden Sie verschiedene Optionen für den Cursor. Auto und Standard führen die gleichen Funktionen aus und zeigen keinen Unterschied. Das Fadenkreuz und der Zeiger definieren die Form Ihres Mauszeigers auf dem Bildschirm.

Hier gibt es noch mehr Cursorstile. Einige von ihnen sind ziemlich ungewöhnlich, die meisten zeigen jedoch die Aktion an, die die Ebene hat, wenn sie ausgelöst wird. Wenn Sie beispielsweise den Layer mit dem Support-Center verknüpfen, können Sie den Hilfe-Cursor auswählen.

Pointer Event ist standardmäßig auf Auto eingestellt. Die Option „Keine“ wird verwendet, wenn kein verknüpfter Inhalt vorhanden ist. In diesem Abschnitt können Sie das Aussehen des Cursors beim Schweben auf der Ebene auswählen, die Animation aktivieren und einrichten.

Hover-Animation

Als nächstes gibt es eine Hover-Animation, die Sie je nach Ihren Vorlieben einstellen können. Es gibt mehrere Dinge, die Sie beachten sollten. Erstens sieht es nicht gut aus, wenn sich die Ebene beim Bewegen ändert und der Übergang in einem Moment erfolgt. Immer besser, wenn der Übergang mit Verzögerung erfolgt. . Standardmäßig ist die Verzögerung auf 300 ms eingestellt, lassen Sie es so, wenn es Ihnen passt, oder ändern Sie den Wert.

Außerdem können Sie die Beschleunigung für den Übergang festlegen. Sie haben mehrere Optionen zur Auswahl.

Filter

Zu Ihrer Ebene können Sie Filter hinzufügen. Mit anderen Worten, Sie können die Leier bis zu einem gewissen Grad verwischen. Die Option wird in Pixel ausgedrückt. Je höher der Wert, desto „dicker“ ist die Unschärfe.

Stil

Es gibt auch einen Stilteil, in dem Sie die Hintergrundfarbe einrichten und den Rahmen anpassen können, nämlich ihre Farbe ändern und den Rahmenstil auswählen.

Auf Scroll-Layer-Optionen

Optionen beim Scrollen ermöglichen es, dass sich die Folie beim Scrollen mit der Maus bewegt. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

So erzeugen Sie mit Slider Revolution einen Parallax-Effekt

Parallaxe ist einer der beliebtesten Effekte, der die Website eindrucksvoller und dynamischer macht. Sie haben wahrscheinlich viele Websites und Themen gesehen, die mit diesem speziellen Effekt integriert sind. Und jetzt zeigen wir Ihnen, wie Sie mit dem Slider Revolution-Plugin selbst eines erstellen können.

Was ist Parallaxe?

Der Parallax-Effekt kann als ein Effekt definiert werden, bei dem sich Elemente im Hintergrund und Elemente im Vordergrund mit unterschiedlichen Geschwindigkeiten bewegen und die Illusion von Tiefe erzeugen. Normalerweise bewegen sich die Elemente des Hintergrunds langsamer

Es gibt verschiedene Möglichkeiten, wie Sie diesen Effekt auf Ihrer Website erzielen können. Zu unserem Glück verfügt der Slider Revolution über alle Funktionen, die Ihnen helfen, den Parallax-Effekt zu erzielen.

Erstellen von Parallaxe in Slider Revolution

Schalten Sie zuerst die Parallaxe ein . Gehen Sie zu Module General Options > On Scroll > Scroll Based Features > Parallax und schalten Sie den Schalter Parallax Enabled auf On .

Es gibt viele verschiedene Tiefenwerte, die das Plugin bietet. Wählen Sie diejenige aus, die für Sie am besten geeignet ist. Sie können auch eigene Werte eingeben.

Hinzufügen von Parallaxe zu Hintergrundbildern

Um den Parallax-Effekt zu Ihrem Hintergrundbild hinzuzufügen, gehen Sie zu Folienoptionen > Beim Scrollen > Parallaxe- und 3D-Einstellungen und wählen Sie die bevorzugte Tiefe aus der Dropdown-Liste aus.

Bei der Auswahl der Tiefe gibt es strenge Regeln. Es ist besser, wenn Sie verschiedene Werte ausprobieren und sehen, welcher mit Ihrem Schieberegler besser funktioniert. Unterschiedliche Tiefen wirken sich direkt aus und erzeugen unterschiedliche Effekte. Aus diesem Grund empfehlen wir Ihnen, sie auszuprobieren, um das Ergebnis zu sehen.

Hinzufügen von Parallaxe zu den Ebenen

Im Slider Revolution kann der Parallax-Effekt nicht nur den Hintergrundbildern, sondern auch den einzelnen Ebenen hinzugefügt werden. Das Tolle an diesem Effekt ist, dass er den Benutzern eine Illusion vermittelt, wenn sie die Teile des Schiebereglers auf der Seite nur durch Bewegen der Maus steuern. Das sieht auf der Website wirklich gut aus und ist außerdem sehr einfach einzurichten.

Wählen Sie Ihre Ebene aus, gehen Sie zur Registerkarte Ebenenoptionen > Beim Scrollen > Parallaxe & 3D und wählen Sie die gewünschte Tiefe aus.

Als Ergebnis erhalten Sie die Ebene mit Parallaxe, die bei der Mausbewegung aktiviert wird.

Egal, ob es sich um ein Hintergrundbild oder eine einzelne Ebene handelt, das Hinzufügen des Parallax-Effekts von Slider Revolution ist extrem einfach. Allerdings braucht nicht jeder Slider Parallaxe. Verwenden Sie es hauptsächlich für einfache Schieberegler, da die dynamischen mit vielen Animationen ohne diesen Effekt wahrscheinlich besser funktionieren.

Hinzufügen einer Schaltflächenebene

Mit der Slider Revolution können Sie die Schaltfläche erstellen und gestalten, die Sie Ihrem Slider für die Navigation hinzufügen können. Dazu müssen wir zunächst eine Schaltflächenebene zum Arbeitsrahmen des Schiebereglers hinzufügen.

Wenn Sie die Schaltfläche hinzufügen, wird sie in der Textform angezeigt, Sie müssen sie nur anpassen. Auf der rechten Seite des Bildschirms finden Sie viele Optionen für vorgefertigte Schaltflächen. Sie können eine davon für Ihre Schaltfläche auswählen.

Darüber hinaus können Sie sich für etwas Originelles entscheiden, da es Variationen von Wiedergabetasten, Umschaltern und anderen gibt. Außerdem ist es möglich, einen Schatteneffekt hinzuzufügen und die Schaltfläche interessanter aussehen zu lassen.

Sobald Sie den Stil ausgewählt haben, können Sie die erweiterten Einstellungen ändern und das Aussehen anpassen. Alle Einstellungen finden Sie auf der Registerkarte Layer-Optionen.

Sie können das anfängliche Aussehen der Schaltfläche ändern, den Text ändern, die Anzeige beim Hover ändern und Animationen einrichten.

Wie man Slider responsiv macht

Ganz am Anfang haben wir bereits einige Parameter eingerichtet, um unsere Folien responsive zu machen. Das ist nicht genug. Dazu müssen Sie auch sicherstellen, dass sich jede Ebene in jeder Ihrer Folien nahtlos an alle Geräte und Bildschirmgrößen anpasst.

Sobald Sie also alle Ihre Folien und Ebenen zu Ihrem Schieberegler hinzugefügt haben, ist es an der Zeit, sie für alle anderen verfügbaren Geräte zu optimieren.

Wenn Sie Folien im Arbeitsrahmen bearbeiten, richten Sie sie in erster Linie so ein, dass sie auf Desktop-Geräten gut aussehen. Wenn Sie sicher sind, dass auf dem Desktop alles perfekt aussieht, können Sie mit Layouts für andere Geräte herumspielen.

Jetzt können Sie das Gerät, das Sie emulieren möchten, aus der Dropdown-Liste auswählen. Schalten Sie das Gerät ein, auf dem Sie die Anzeige des Schiebereglers überprüfen möchten. Verfügbare Geräte sind: Desktop, Notebook, Tablet, Handy.

Sie können alles für jedes einzelne Gerät ändern. Für Textebenen können Sie beispielsweise unterschiedliche Schriftgröße, Zeilenhöhe, Schriftstärke und Farbe festlegen, je nachdem, auf welchem ​​Gerät Ihr Schieberegler angezeigt wird. Um die Größe der Bildebene zu ändern, müssen Sie eine andere Breite hinzufügen und die Höhe des Bildes wird automatisch entsprechend der Breite angepasst.

Achten Sie auf die blauen Gitterränder. Diese definieren die Kanten des Geräts, mit dem Sie gerade arbeiten. Wenn sich also eine Ihrer Ebenen über die Grenzen hinaus erstreckt, stellen Sie sicher, dass Sie die Einstellungen für diese Ebenen ändern.

Speichern Sie schließlich Ihren Schieberegler und sehen Sie sich an, wie er live aussieht.

Hinzufügen des Sliders zur Seite

Sie haben gute Arbeit geleistet und jetzt ist es an der Zeit zu sehen, wie Ihr Schieberegler auf der Seite aussieht. Verwenden Sie dazu den Shortcode Slider Revolution, den Sie zuvor erstellt haben. Dieser Shortcode befindet sich auf der Registerkarte „Titel“ im Abschnitt „Allgemeine Optionen“.

Oder wenn Sie Slider Revolution von Ihrem Dashboard aus öffnen. Suchen Sie das aktuelle Modul und wählen Sie die Option Einbetten.

Wählen Sie im Popup-Fenster die Option Für die Seiten und Beiträge und kopieren Sie den Shortcode.

Der Shortcode sollte wie folgt aussehen : [rev_slider alias=“title“][/rev_slider], wobei der „title“ auf dem Alias ​​basiert, das Sie dem Slider gegeben haben.

Slider mit Elementor anzeigen

Die Verwendung der Shortcode-Methode zum Anzeigen des Schiebereglers auf der Seite ist einfach genug. Es gibt jedoch einen Weg, der noch einfacher sein könnte. Alle Slider, die Sie mit dem Slider Revolution-Plugin erstellen, können mit dem Elementor-Widget auf der Seite eingefügt werden. Wählen Sie die Seite aus, auf der Sie den Schieberegler anzeigen möchten, und öffnen Sie sie über den Elementor-Editor. Anschließend ziehen Sie das Element einfach per Drag & Drop auf den Arbeitsrahmen. Suchen Sie im Widgets-Bereich nach dem Slider Revolution 6-Widget und fügen Sie es der Seite hinzu. Wenn Sie das Widget ziehen, müssen Sie den Schieberegler auswählen, den Sie verwenden möchten.

Verwenden Sie diese Methode als Alternative zum Shortcode, da einige Websitebesitzer es einfacher finden, mit Seitenerstellungs-Widgets zu arbeiten.

So exportieren Sie Schieberegler

Um den Slider zu exportieren, gehen Sie zu Slider Revolution, indem Sie auf die entsprechende Registerkarte in Ihrem Dashboard-Menü klicken. Dort werden alle Slider angezeigt, die Sie importiert oder erstellt haben.

Bewegen Sie den Mauszeiger über die Miniaturansicht des Moduls, das Sie exportieren möchten. Klicken Sie auf den kleinen Pfeil in der unteren rechten Ecke. Wählen Sie unter allen angezeigten Optionen den Export aus und klicken Sie darauf.

Sie sehen den Bestätigungsdialog, der Sie darüber informiert, dass der Export einige Zeit dauern kann. Klicken Sie auf „Ja, Slider exportieren“ und der Download beginnt. Wenn der Download abgeschlossen ist, haben Sie eine .ZIP-Datei Ihres Sliders.

Schlussfolgern

Fast alle von StylemixThemes entwickelten Themen enthalten das Slider Revolution-Plugin im Paket. Wir lieben diese leistungsstarke Software, die uns die Möglichkeit gibt, Websites ansprechender, attraktiver und interaktiver zu gestalten.

Wir hoffen, dass unser Leitfaden dazu beigetragen hat, den Prozess der Erstellung des Schiebereglers mit diesem erstaunlichen Plugin besser zu verstehen. Wenn Sie nach weiteren Informationen suchen, folgen Sie bitte der Hauptseite von Slider Revolution.