Springe zum Hauptinhalt

So erstellen Sie eine Diashow mit Slider Revolution unter WordPress

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wir können jetzt ernsthafte Dinge beginnen. Die Erstellung von Slider auf Slider Revolution kann anfangs ziemlich langweilig sein. Sie verlieren die Orientierung, weil Sie wissen möchten, wo sich dieses oder jenes Element befindet.

Sie werden Slider Revolution los, indem Sie mit Gewohnheit üben und dieses Tutorial lesen.

In unseren vorherigen Tutorials haben wir festgestellt, wie:

Und jetzt, da wir unseren Schieberegler eingerichtet haben, werden wir den erstellen Dias "Von" Schieber ".

So übernehmen Sie die Kontrolle über den "Folien" -Editor

Im Prinzip greifen Sie nach dem Speichern der Konfigurationen eines Schiebereglers darauf zu zu einer neuen Oberfläche, die Sie in den Editor von " Dias ".

Editor-in-Dia-Revolution-Schieber

Ganz oben sehen Sie dieselbe Symbolleiste, mit der Sie unter anderem zur Liste der "Schieberegler oder Folien", zu den Parametern des Schiebereglers und zur Vorschau des Schiebereglers zurückkehren können.

Entdecken Sie auch unsere 10 WordPress-Plugins, mit denen Sie Artikel in Ihrem Blog bewerten können

Revolution-Slider-Bar doutil-edition-of-Schlitten

Unten haben wir einen neuen Abschnitt, in dem wir die globalen Ebenen, die verschiedenen "Folien" und die Schaltfläche zum Hinzufügen einer neuen "sehen können. Schlitten ".

Schaffung-of-Dia-Knopf-Schieber-Revolution

Wenn Sie mit der Maus über die Schaltfläche einer Folie fahren, werden Sie feststellen, dass neue Optionen angezeigt werden. Diese Optionen sind ziemlich klar und leicht zu verstehen (duplizieren, zur Vorlage hinzufügen, um sie später wiederzuverwenden und die Folie zu löschen).

Optionen-creation-Dia-Revolution-Schieber

Wenn Sie den Mauszeiger über die Schaltfläche zum Hinzufügen von Folien bewegen, werden Sie andere Optionen bemerken, mit denen Sie eine leere Folie hinzufügen, mehrere Folien hinzufügen und eine Folie aus einer Vorlage hinzufügen können (Modell).

Schaffung-of-Dia-Option-Revolution-Schieber

Derzeit befinden Sie sich auf der 1-Folie, weshalb sie in der Folienliste hervorgehoben ist. Wenn Sie eine neue Folie erstellen, wird diese anstelle der ersten Folie hervorgehoben.

Second-Dia-creation-dun-Schieber-Schieber-Revolution

Slider Revolution auf diesem Level ist ein echtes Dashboard. Wenn ich Ihnen alles erkläre, werden Sie nicht viel verstehen, und ich werde es vermeiden, über Funktionen zu sprechen, die verwirrend und nicht unbedingt erforderlich sein können.

Lesen Sie unseren Artikel auf 6 WordPress-Bildkomprimierungs-Plugins für Ihr Blog

Wenn Sie eine Folie ausgewählt haben, können Sie im folgenden Abschnitt mit der Bearbeitung beginnen. Dieser Abschnitt besteht aus mehreren Registerkarten (7), über die Sie auf verschiedene Funktionen zugreifen können.

So fügen Sie ein Hintergrundbild in eine Szene ein

Als Erstes möchten Sie unserer Folie einen Hintergrund hinzufügen. Hier haben Sie die Wahl zwischen: einem Hintergrundbild (aus Ihrer Medienbibliothek), einer externen URL, die auf ein Bild verweist, einem transparenten Hintergrund, der die vom WordPress-Design vorgeschlagene Farbe verwendet, einer festen Farbe, einem Youtube-Video, Vimeo oder HTML5. Wir werden einen Hintergrund auswählen " Image ".

Bild-Rückwärts-Plan-Beispiel

Sie können viele freie Bilder im Web finden. Führen Sie einfach eine Suche bei Google durch.

Bild-zurück-Plan-Revolution-Schieber

Wenn Sie ein Bild hinzufügen, gilt dies sofort in der Folienvorschau und in der "Szene".

Szene-Revolution-Schieber

So fügen Sie ein Element in eine Szene ein

Jetzt, da wir eine gut dekorierte Szene haben, werden wir ein Element hinzufügen. Jedes Element, das Sie einer Szene hinzufügen, wird als Ebene oder Ebene betrachtet. Diese Ebenenfunktion hilft Ihnen, mir zu glauben.

Bewegen Sie den Mauszeiger über ein Objekt, um es der Szene hinzuzufügen Layer hinzufügen ".

fly-Add-Schicht-Slider-Revolution

Sie werden feststellen, dass Sie verschiedene Elemente hinzufügen können, darunter Text / HTML, Bilder, Audio, Video, eine Schaltfläche, eine Form, ein Objekt und ein Element importieren.

Beginnen wir mit einem transparenten Bild von Snoopy, dem kleinen Welpen.

funny-snoopy-png

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Fügen Sie dann dieses Bild in die Szene ein, und Sie werden so etwas haben:

Beispiel-Schieber-Schieber-Revolution

Sie werden feststellen, dass in den vier Ecken des Bildes kleine Quadrate sind. Mit diesen Quadraten können wir die Größe der Bilder ändern, da Snoopy in diesem Fall viel Platz einnimmt.

Die Größenänderung erfolgt durch " ziehen “. Um die Größe zu ändern und die Proportionen beizubehalten, halten Sie die Taste " Mai Von Ihrer Tastatur aus, während Sie die Größe ändern.

Siehe auch unsere 10 WordPress-Plugins, die Sie zu einem besseren Blogger machen

neue Repräsentation-snoopy-Revolution-Schieber

Jetzt sieht Snoopy so aus, es ist passender. Sie können ein Bild auch spiegeln, indem Sie das Licht oben rechts auf jedem Bild wie folgt verwenden:

dimage-Rotation-Revolution-Schieber

So positionieren Sie Elemente mit dem Hilfsraster

Das Hilfsgitter ist ein wertvolles Element, mit dessen Hilfe die Elemente besser positioniert werden können. Sie können das Hilferaster unten links auf der Bühne aktivieren.

Toaster daide-Revolution-Schieber

Dieses Raster hat Kacheln mit unterschiedlichen Größen. Je kleiner die Größe, desto präziser wird die Platzierung des Elements.

Investitions-of-Bilder

Wie fügt Animation

Es gibt 3-Arten von Animationen in Slider Revolution: Eingabe-Animationen, Animationen während (die Existenz des Elements in der Szene) Und Ende Animationen.

Siehe auch unsere 6 WordPress-Bildkomprimierungs-Plugins für Ihr Blog

Um einem Element eine Animation hinzuzufügen, müssen Sie es zuerst auswählen, indem Sie darauf klicken (Wenn ein Element ausgewählt ist, wird es von einer gepunkteten Linie mit anpassbaren Ecken eingerahmt).

Also klicke auf Snoopy, gehe auf die Seite und klicke auf den Reiter « Animation ".

animiertes-Slider-Revolution

Im vorherigen Bild habe ich die Eingabeanimationen in blau und die Ausgabeanimationen in rot.

Um eine Animation zu ändern, klicken Sie auf die Dropdown-Liste nach dem Symbol des laufenden Mannes.

icon-animiert-Slider-Revolution

Sie haben dann eine Vielzahl von Animationen zur Verfügung. Ich überlasse es Ihnen, die Animation auszuwählen, die Sie für den Eintrag eines Elements definieren möchten. Ich für meinen Teil wählte " easeOutElastic Um dieses Ergebnis zu erhalten:

Animation-Entree-snoopy

Hier für Sie unser 4 WordPress-Plugins, um die Fußzeile Ihres Blogs zu verbessern

Weiter links können Sie die Dauer der Animation und den zu belassenden Animationsmodus festlegen. " Keine Spaltung Da die anderen Optionen nur für Text und nicht für Bilder gelten.

Konfiguration-Düne-animiert-Slider-Revolution

Lire aussi So blenden Sie die Titel von Artikeln und WordPress-Seiten aus

Nun möchte ich Snoopy schweben, dafür gehe ich zu " Loop Und in der Dropdown-Option wählen Sie " Welle “. Jetzt schwebt Snoopy:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

snoppy schwebenden

So konfigurieren Sie die Sichtbarkeit von Elementen

Mein Snoopy schwimmt, aber ich möchte nicht, dass er auf dem Handy sichtbar ist. Also klicke auf " Sichtbarkeit Und stellen Sie auf dem Smartphone-Symbol sicher, dass es deaktiviert ist:

Sichtbarkeit-Elemente-Revolution-Schieber

So passen Sie das Verhalten von Elementen an

Um das Laden des Schiebereglers zu optimieren, möchten Sie möglicherweise das Laden der Bilder verzögern. Dies geschieht in der Registerkarte " Verhalten Mit der Option " Faules Laden “. Sie können sogar die Reaktionsfähigkeit von Elementen erzwingen.

Verhalten-Element-Revolution-Schieber

So erstellen Sie benutzerdefinierte Trigger für ein Element

Mit Aktionen können Sie Trigger mit bestimmten Aktionen verknüpfen. Um einen Trigger hinzuzufügen, klicken Sie auf die Registerkarte Aktionen Dann die "+" Taste.

Add-a-Auslöser

Es gibt 3-Triggertypen:

  • Der Klick ist Anklicken mit der Maus
  • Die Mauseingabe über das Element
  • Die Maus geht über das Element hinaus

Die Liste der Aktionen ist ziemlich lang. Sie können beispielsweise einen Benutzer, der auf Snoopy klickt, auf eine andere Seite umleiten, indem Sie die Aktion " Einfache Verbindung Welches bringt neue Optionen.

Entdecken Sie auch unsere 10 Premium WordPress Plugins von Booking and Booking

Management-of-Trigger-Revolution-Schieber

Verwendung von Slider Revolution TimeLine

Slider Revolution bietet im unteren Bereich eine Zeitverwaltungsoberfläche. Auf dieser Oberfläche können Sie sehen, wo die Animation eines Elements beginnt und wo sie endet.

Anfang-und-End-Düne-Film-on-Slider-Revolution

Auf dem vorherigen Bild sehen Sie zwei blaue Pfeile. Die erste links kennzeichnet den Beginn der Eingabeanimation eines Elements und die zweite das Ende der Eingabeanimation. Die dunkelrote Farbe zeigt die Lebensdauer des Objekts in der Szene an.

Lire aussi Wie ein Countdown auf Ihrer Wordpress-Blog

Sie werden ein Ende finden, das auch dem anderen Ende einer Dauer ähnlich ist (Eingangsanimation, Lebensdauer und Endanimation).

Mit dem " Timeline Sie können steuern, welches Element zuvor angezeigt wird und welches Element zuerst verschwindet. Es ist ein sehr praktisches Werkzeug, das Sie beherrschen müssen, um eine gute Animation zu erstellen.

Die Zeitleiste enthält auch einen Player, den Sie aktivieren können, um eine Vorschau der Folie anzuzeigen.

Animation-Timeline-Revolution-Schieber

Bis dahin habe ich Ihnen die Grundlagen gegeben, um eine Folie zu erstellen. Speichern Sie nun Ihren Slider und starten Sie die Vorschau.

Backup-and-previsulisation

Das ist alles für dieses Tutorial, in einem nächsten werden wir über die Anzeige eines Schiebereglers in einem Artikel und einige fortgeschrittene Operationen sprechen.

Entdecken Sie auch einige Themen und Premium-WordPress-Plugins

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Disk Audio

Disk Audio ist ein weiteres WordPress-Plugin, mit dem Sie einen Audioplayer auf Knopfdruck direkt auf Ihrer Website anzeigen können. Das Layout des Audioplayers reagiert voll und ganz, sodass mobile Benutzer die Funktionen problemlos nutzen können.

Darüber hinaus bietet es zahlreiche Anpassungsoptionen, darunter Farbschemata, Erscheinungsbilder, Hintergrundbilder und Deckkraft. Es hat mehrere Optionen, um es per Tastatur und zu steuern Außerdem können Sie Ihre Wiedergabeliste mit einer einstellbaren Bildlaufleiste anzeigen.

Lesen Sie auch: 10 Wordpress-Plugins Forschung auf Ihrem Blog zu verbessern

Sie können auch Download-Links in den Musik-Player einbetten, um Benutzern zu zeigen, wo sie den auf Ihrer Website wiedergegebenen Titel kaufen können.

Download | Demo | Web-Hosting

2. Event Booking Pro

Dies ist ein weiteres WordPress 100% -Reaktions-Plugin, das einfach anzupassen ist und Reservierungen auf jeder Website verwaltet, die ihre Dienste in Veranstaltungsbereichen anbietet.

Zu den Hauptfunktionen gehören: Anpassung von Text, Farbe, Rahmen und anderen Elementen, Unterstützung für PayPal, Verwaltung von Gutscheincodes und Gutscheinen, Unterstützung für Google maps, die Unterstützung der Verwaltung von E-Mails, die Unterstützung der Shortcodes, intuitives Bedienfeld, einfache Ereigniserstellung, vollständige Kontrolle über das Erscheinungsbild usw.

Download | Demo | Web-Hosting

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

3. Social Share & Locker Pro

Die Social Share & Locker Pro-Erweiterung wurde entwickelt, damit Ihre Website in sozialen Netzwerken besser sichtbar ist. Mit nur wenigen Klicks können Sie entweder die Position Ihrer sozialen Symbole festlegen oder Ihre Inhalte sperren, indem Sie sie in einem der von Ihnen vorgeschlagenen sozialen Netzwerke freigeben.

Sie haben vordefinierte 10-Themen und dies sollte die häufigsten Wünsche abdecken. Alle ihre Themen sind Retina und wirken Wunder.

30 Dinge auf Ihren Blog-Posts nach ihrer Veröffentlichung zu tun Entdecken Sie sie in diesem Artikel.

Darüber hinaus können Sie mit Social Share & Locker Pro den vollständigen Namen der sozialen Netzwerke oder nur das Symbol anzeigen. Dies hängt von Ihrem Design, dem verfügbaren Platz oder Ihren Wünschen ab.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Entdecken Sie weitere empfohlene Ressourcen, die Sie bei der Erstellung und Verwaltung Ihrer Website unterstützen.

Fazit

Voila! Das war's für diesen Leitfaden. Wir hoffen, dass dieses Tutorial Ihnen die Grundlagen zum Erstellen einer Diashow mit Slider Revolution in einem WordPress-Blog oder einer WordPress-Website vermittelt hat. Wenn Sie Fragen, Anregungen oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Zögern Sie nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie1
tweet
Registrieren3