WordPress für Designer: Themes und Layout-Werkzeuge

Slider

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auch ein einfacher Bilder-Slider ist in Cornerstone integriert. Sehen Sie hier, wie einfach dieser eingerichtet ist.

Transkript

Als nächstes wollen wir uns anschauen, wie man eine sehr einfache Slideshow in die Seite integrieren kann. Dazu erzeuge ich mir als erstes mal einen Bereich, also eine neue Section. Ich klicke also hier auf "Add Section". So, und die neue Section, die soll jetzt über die Box "Red". Da ist die Section. Okay. Dann gehe ich jetzt auf die Section und benenne diese um in "Slider". Okay. Ein großes Element soll es sein. Und hier werde ich jetzt den Slider hineinpacken. Da ist er, einfach per Drag-and-drop hier integriert. Wir haben jetzt momentan einfache Platzhalterbilder. Wir können diese ganz einfach austauschen. Und ich möchte noch einen weiteren Slide haben. Ich möchte drei Slides haben. Okay. Und wenn ich jetzt den Slide bearbeiten möchte, dann klicke ich einfach darauf und kann hier das Platzhalterbild austauschen gegen ein eigenes, indem ich jetzt hier ein Bild auswähle. Ich nehme dann zum Beispiel dieses hier. Dann muss ich darauf achten, dass die Größe stimmt, weil wenn ich hier die falsche Größe eingestellt habe, dann wird es groß skaliert, und dann sieht es unschön aus. Die Größe ist aber okay. Wir können es nachher immer noch austauschen, wenn die Größe nicht groß genug ist. So, als nächstes nehmen wir uns den nächsten Slide vor. Wir gehen also auf "Slide 2", machen hier genau das gleiche. Wir entfernen das Platzhalterbild und fügen ein weiteres ein. Ich nehme jetzt einmal in dem Fall dieses hier. Okay, wieder zurück, "Slide 3", und dann kommt das dritte Bild. Dann nehme ich jetzt dieses hier. Okay, wir haben also jetzt hier unseren Slider. Wir sehen ihn auch in Aktion. Wunderbar. Und jetzt können wir ihn noch weiter anpassen. Wir haben ja gesehen, hier können wir Slides duplizieren und löschen. Weiter unten können wir jetzt festlegen, wie die Animantion aussehen soll, also "Slide" oder "Fade". Beim "Fade" wird das einfach nur überblended. Ich fand das mit dem "Slide" eigentlich ganz gut, aber lassen wir es bei "Fade". Die Geschwindigkeit können wir hier anpassen. Das ist immer in Millisekunden festgelegt, das heißt, wir arbeiten jetzt mit 1.000 Millisekunden. Wir können hier sagen "Slideshow", das heißt, die Slides laufen automatisch durch. Hier kann man noch das Ganze auf "Random" setzen, dass die Bilder per Zufall durchlaufen. Wir können die Controls aktivieren. Die finde ich aber nicht so schön. Deswegen deaktiviere ich diese wieder. Wir haben hier Previous-Next-Navigation. Das ist ganz oben links die in der Ecke, okay. Die wollen wir haben. Und jetzt geht es darum, den Container zu entfernen, "No Container", "Yes". Dann wird das Bild schon einmal größer dargestellt. Touch-Navigation, sodass man auch auf dem Tablet oder Smartphone wischen kann? Natürlich, wollen wir haben. Jetzt möchte ich aber, dass das Bild hier wirklich den kompletten Rahmen ausfüllt. Dazu muss ich in dem Fall in die Section gehen und hier das Padding mal auf Null setzen. So, und so. Damit ist uns aber noch nicht ganz geholfen, denn wir müssen komplett hier die Ränder entfernen. Dazu gehe ich in dem Fall als nächstes auf "Manage Layout", hier auf meine Row. Und dann sage ich hier "Column Container: No". Wenn wir das auf "off" setzen, dann haben wir jetzt hier unsere Slideshow, die jetzt den kompletten Bildschirm ausfüllt. Da wir jetzt die gesamte Breite nehmen, macht das vielleicht doch Sinn, dass wir Bilder nehmen mit einer höheren Auflösung, nämlich mit den 1.500 x 750, aber das ist ja kein Problem, das jetzt noch nachträglich wieder zu ändern. Wir müssen einfach in die Slides einzeln hineingehen, hier das Bild herauslöschen, und dann das Bild, das wir einsetzen wollen, einfach hier auf "Vollständige Größe" setzen.

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!