Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

WordPress für Designer: Themes und Layout-Werkzeuge

Slider Revolution – Slider erstellen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Slider Revolution ist eines der beliebtesten Plugins für WordPress. Dank dieser Erweiterung lassen sich aufwändige Slideshows erstellen.

Transkript

Als nächstes wollen wir uns eines der beliebtesten Plugins überhaupt in WordPress anschauen, und zwar ist das das Plugin Slider Revolution. Mit dem Slider Revolution ist man in der Lage, ganz abgefahrene Images Slider zu erstellen. Hier sehen wir zum Beispiel, wenn ich mit der Maus wander, dann wandert auch hier der Hintergrund ein bisschen mit. So, und wir haben jetzt hier die Möglichkeit, mehr über das Plugin Slider Revolution zu erfahren. Wir können also hier zum Beispiel uns Beispiele anschauen oder unter Features hier alle Funktionen erklärt bekommen. Wenn wir auf Usage Examples gehen, dann sehen wir hier eine Vorschau auf alle möglichen Slider Arten. Carousel zum Beispiel, wenn man hier mit der Maus drüber fährt, erhält man oben eine kleine Vorschau. Hero, das heißt riesig groß. Ja, und wir können hier einfach mal irgendwas auswählen, sagen wir mal Fancy Text zum Beispiel. Dann wird der entsprechende Slider geladen. Wenn wir jetzt hier runter scrollen, dann sehen wir jetzt hier unseren Slider, wo der Text hier ganz nett eingeblendet wird. Ja, das macht eigentlich Spaß, sich hier mal die verschiedenen Beispiel anzuschauen. Was zum Beispiel ganz abgefahren ist, ist hier unter 3D der Wow-Factor. Wenn wir das auswählen, dann sehen wir nämlich ein Video im Hintergrund. Und wenn ich mit der Maus bewege, dann verschiebt sich dies sogar und das perspektivisch. Je nachdem wo ich hier gerade mit der Maus bin, verändert sich die Perspektive von dem Video im Hintergrund. Wir haben also, wie gesagt, sehr, sehr viele Beispiele. Diese sollte man sich vielleicht alle mal anschauen, um ein Gefühl dafür zu bekommen, was das Plugin alles ermöglicht. Wir sehen hier eine riesen Liste. Auch hier können wir noch mal das Ganze sortieren und uns hier was anschauen. Premium Agency Header von mir aus. So, und das ist wieder ein Beispiel mit diesem Ken Burns Effekt im Hintergrund. Das Bild wird etwas kleiner und bewegt sich etwas. Ja, und als nächstes wollen wir uns anschauen, wie man diesen Slider Revolution in WordPress verwenden kann. Und zwar wenn wir auf Addons klicken, dann können wir hier auf dem Dashboard einfach mal weiter nach unten scrollen und hier sehen wir alle Extensions und wenn ich hier noch weiter nach unten scrolle, dann taucht hier das Slider Revolution Plugin auf, was wir jetzt installieren wollen. Da ist es auch schon installiert. Wir können es auch noch aktivieren. Dazu werden wir hier dann in die Plugins verlinkt und dann müssen wir hier auf Slider Revolution auf Aktivieren klicken. Ja, und wenn es dann aktiviert ist, dann taucht Slider Revolution hier links auf der Seite auf. Ja, und wir können jetzt hier auf Slider Revolution gehen und unseren erstens Slider anlegen. Wie wir sehen, haben wir hier viele verschiedene Möglichkeiten. Wir sehen, ob das Memory Limit in Ordnung ist auf unserem Server, ob die Dateigröße für die maximalen Bilder, die man hochladen kann, in Ordnung ist usw. Ok, aber für uns, wir wollen jetzt mal hier mit dem ersten eigenen Slider anfangen Wir können auch hier auf Templates klicken, dann können wir eine der Vorlagen wählen. Wir können Slider importieren, die wir uns mal abgespeichert haben, oder was wir jetzt machen wollen ist, tatsächlich bei null anfangen. Ist natürlich praktisch, wenn man hier direkt auf ein fertiges Temlate zurückgreift und es ist schon alles da, wie zum Beispiel eben bei diesem Wow-Factor, aber wir wollen natürlich mal schauen, wie wird sowas von der Basis her aufgebaut. Deswegen klicke ich hier an diese Stelle, um jetzt hier zu dem Prozess zu gelangen, nämlich in die Slider Einstellungen. Ja, und ich kann jetzt hier mir erst mal den Default Slider auswählen. Es gibt auch noch extra Video Slider für YouTube zum Beispiel, für Vimeo oder für Bilder aus Instagram oder Flickr. Ja, und jetzt müssen wir als erstes mal unserem Slider einen Namen geben und ich nenne ihn einfach mal homeslider. Alias ist das Gleiche in meinem Fall. Man kann das natürlich nennen, wie man will und dann kriegt man hier den Short Code. Das ist der Short Code, der benötigt wird an der Stelle, wo man den Slider einbinden möchte. Ja, als nächstes können wir jetzt hier einen Typen auswählen. Einen Standard Slider. Ja, mit Pfeilen links und rechts und den drei Punkten. Sie sind natürlich, je nachdem wie viele Bilder man hier eingefügt hat. Hero Scene, das heißt, alles wird komplett verdeckt oder Carousel Slider, wo man nur einen kleinen Ausschnitt sieht und man links und rechts zu den anderen Bildern klicken kann. Ja, und dann haben wir hier das Layout. In dem Fall die Größe, ob wir automatisch die Größe haben wollen oder Full-Width oder Full-Screen. Man sieht dann immer hier in dem Fall direkt das Ergebnis. Auto heißt, es passt sich ein von der Höhe und der Breite. Full-Width passt in dem Fall auf die Breite und Full-Screen, Breite und Höhe komplett verdeckt. Ja, man kann natürlich dann noch hier weiter unten die Größen festlegen. In unserem Fall ist es auf Auto Size gesetzt, das ist auch in Ordnung so. Ich nehme aber jetzt erst mal hier Full-Width. Das passt an der Stelle ganz gut. Wir können ein eigenes Grid hier festlegen. So, das spare ich mir an der Stelle. Wir können festlegen, was mit dem Bereich geschehen soll, der Overflow ist also der über den Rahmen hinausgeht denn der ist in dem Fall dann Hidden. Ja, oder nein. Dass die Ratio vorhanden bleiben soll, also das Verhältnis 16:9 von mir aus usw. Ja, dann gibt es als nächstes die fortgeschrittenen, die Advanced Settings, wo man noch viel mehr Details festlegen kann. Dann können wir als nächstes die einzelnen Slides bearbeiten und dann den Slider einbetten. Fangen wir von links nach rechts an. Also, Scroll to Options heißt, wir scrollen nach oben, denn hier auf der rechten Seite können wir jetzt noch weitere Optionen festlegen. Die generellen Einstellungen. Zum Beispiel, dass der Slider stoppen soll, wenn man sich mit der Maus darüber befindet oder dass der Slider stoppen soll nach, das heißt zum Beispiel nachdem der Slider dreimal durchgelaufen ist. Wir können sagen, dass die Bilder automatisch also per Random oder Shuffle Modus hier durchlaufen. Loop Single Slide, dass nur ein Bild immer gelooped wird. Stop Slider Out of ViewPort, das ist natürlich ganz praktisch. Das heißt, wenn man runter gescrollt hat und der Slider nicht mehr zu sehen ist, dann soll dieser deaktiviert werden. Dann kann man sagen wann, also dass es warten soll oder pausieren und dann nach wie viel Prozent, also wann der genau weg gescrollt wurde. Ja, diese ganzen Einstellungen können wir treffen. Auch hier noch mal für die Slideshow, für die Progress Bar, wir haben hier noch weitere Voreinstellungen, wie lange ein Slide angezeigt werden soll, die Verzögerung, wie lange die Animation gehen soll und so weiter und so fort. Wir haben hier die Progress Bar. Soll die aktiviert werden oder nicht? Was ist mit dem 1st Slide und noch weitere Einstellungen. Hier kann man wirklich eine Menge Zeit verbringen, indem man jede einzelne Einstellung durchgeht. Das Schöne ist, dass man immer auf der linken Seite hier Informationen erhält, was das genau bedeutet, wenn man diese Option aktiviert oder Eigenschaften ändert. Für die Navigation kann man hier festlegen, ob es Pfeile geben soll oder nicht. Wenn ich hiet ein Häkchen setze, sind die Pfeile da, wenn der Haken deaktiviert ist, dann nicht. Was ist mit Bullets? Sollen Bullets, also diese Punkte da unten, gezeigt werden oder nicht? Dann kann man natürlich hier noch die Sichtbarkeit beeinflussen, die Position usw. Also man sieht, man kann sich hier echt eine Ewigkeit aufhalten und jedes Detail anpassen. Gut, der nächste Schritt wäre gewesen, wenn wir da runter scrollen, Start Building Slides. Erst mal müssen wir die Einstellungen speichern. Das ist wichtig, dass man zwischendurch immer wieder mal auf Speichern klickt, ansonsten haben wir nachher ein Problem. Ja, und jetzt können wir hingehen und hier unseren ersten Slide bearbeiten. Wir haben hier also ersten Slide. Wir können diesen duplizieren, aber das macht jetzt noch keinen Sinn, weil der ist ja leer und jetzt können wir den Slide bearbeiten. Und wir können jetzt hier momentan das von Transparent auf externe URL setzen. Das heißt, wir können ein externes Bild zum Beispiel einfügen. Wir können hier eine feste Farbe auswählen, ein Video von YouTube, HTML5 Video, also in dem Fall ein eigenes Video, da benötigt man den Pfad zum MPEG 4 und was ich jetzt haben möchte ist in dem Fall, ein Bild einfügen. Also gehe ich hier Haupt / Hintergrundbild, klicke auf Ändern und wähle mir jetzt hier ein Bild aus. Da nehme ich doch mal dieses hier von mir aus. Ich klicke auf Insert, dann wurde das Bild eingefügt. Und wir sehen es dann nämlich auch hier unten. Da ist das Bild. Das Bild ist riesig. Deswegen ist es auch hier entsprechend groß dargestellt. Wir können hier oben noch in die generellen Einstellungen gehen und jetzt noch wieder festlegen, ob hier pausiert werden soll und, und und, und, und. So, in unserem Fall wollen wir hier vielleicht noch als nächstes einen weiteren Layer hinzufügen. Ich möchte, dass hier drauf Text erscheint, also kann ich sagen, Add Layer und hier haben wir Text, ein weiteres Bild, Audio, Video, einen Button, eine Form usw. Wir können auch irgendwas importieren. Ich will Text einfügen, habe hier also jetzt den Text und sage jetzt einfach mal, Willkommen, bestätige das. Ja, und jetzt können wir natürlich hingehen und den Text positionieren, den Text nachträglich wieder bearbeiten und wenn wir hier nach oben gehen, haben wir hier jetzt die Eigenschaften von dem Text und der Stil. Und hier will ich jetzt als erstes mal die Farbe ändern, denn so ist der Text schwer zu erkennen. So, wir können natürlich, wenn wir mehr Text haben, diesen jetzt ausrichten an anderen Elementen, sowohl vertikal als auch horizontal, wir können hier die Positionen auf der X- und Y-Achse ganz präzise festlegen, indem wir hier entsprechende Werte definieren. Wir können hier sagen, dass es sich dabei um ein h2 Element zum Beispiel handeln soll und das ist natürlich ganz praktisch für die Suchmaschinenoptimierung. Ja, und wenn wir jetzt dieses Element weiterhin aktiviert haben, dann können wir zum Beispiel dafür eine Animation festlegen. Wie wir hier sehen, sehen wir schon eine Vorschau der Animation, die jetzt ausgewählt ist Fade-in, Fade-out. Wir können aber auch zum Beispiel sagen, Skew-From-Long-Left. Mal gucken, wie das aussieht. So, dann fährt's von der Seite rein, bleibt hier stehen und blendet aus. Ja, und so haben wir hier extrem viele Einstellungen. Man kann auch Random sagen. Wir können also aus sehr, sehr vielen Animationsformen hier auswählen. Ich weiß jetzt gar nicht was SmoothPopUp_Two ist. Gucken wir mal, wie das aussieht. Aha, es blendet ein und wird etwas vergrößert. Lassen wir es einfach mal dabei. Wir können jetzt weiter unten, hier an dieser Stelle auch noch die Animation beeinflussen. Wie wir sehen, haben wir eine Zeitleiste und wir können dann die einzelnen Elemente auswählen und festlegen, wie lange sie eingeblendet werden sollen, wie lange die Animation insgesamt gehen soll, also, wo fängt sie an, wo hört sie auf, wie ist die Eingangsgeschwindigkeit und die am Ende? Ja, so können wir also hier jetzt unseren Slider im Detail anpassen. Wichtig ist, bevor wir jetzt einen neuen Slide machen, diesen erst mal zu speichern. Das ist nämlich jetzt Slide speichern in dem Fall. Wir speichern diesen einzelnen Slide. Ja, und wir können jetzt hingehen und den zum Beispiel duplizieren, damit wir ihn noch mal haben, damit wir nicht die Einstellungen alle noch mal treffen müssen und können jetzt hier einfach das Bild auswählen. Hier bei Haupt / Hintergrund, Bild ändern und dann wähle ich jetzt hier das nächste Bild aus. Nehmen wir das hier mal und schon habe ich einen weiteren Slide erzeugt. Jetzt habe ich versehentlich beim Slide 1, aber ist ja egal. Auch hier muss ich wieder hingehen und speichern. Die Reihenfolge der Slides kann man natürlich nachträglich auch noch ändern. Das ist auch kein Problem. Ja, und dann vielleicht noch einen dritten Slide, das heißt, ich werde diesen wieder duplizieren. Wähle diesen jetzt erst aus, das habe ich nämlich eben nicht gemacht, und wenn er ausgewählt ist, dann gehe ich hin und tausche das Bild aus, in dem Fall nehmen wir jetzt von mir aus das hier. So, auch das wird gespeichert und jetzt haben wir eine Slideshow mit drei Bildern erstellt und diese Slideshow müssen wir jetzt als nächstes in WordPress in unsere Seite einbinden.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!