Endlich coole Slider mit Divi 5
Slider zu erstellen war in Divi 4 oft mühsam und vom Design her stark eingeschränkt. Mit Divi 5 hat sich das grundlegend geändert: Das neue Group Carousel Modul macht Slider endlich absolut flexibel. Ob Bilder, Texte, Testimonials oder ganze Zeilenlayouts – du kannst jedes Modul einbinden und so Slider erstellen, die perfekt zu deinem Webdesign passen. In diesem Tutorial zeige ich dir Schritt für Schritt, wie du das Group Carousel nutzt und deine eigenen, professionellen Slider mit Divi 5 erstellst.
Videotutorial zum Group Carousel
Du siehst gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicke auf den Button unten. Bitte beachte, dass dabei Daten an Drittanbieter weitergegeben werden.
Weitere InformationenSchritt für Schritt Anleitung
Hinweis: das Divi Group Carousel basiert auf der neuen Group-Funktion in Divi 5. Für ein besseres Verständnis lies auch gerne meinen Blogbeitrag dazu:
- Was ist das Divi Group Module
Öffne wie gewohnt über das Plus-Zeichen die Modulauswahl und wähle hier Group Carousel.
Nachdem du das Modul hinzugefügt hast, siehst du diese Ansicht. Beachte, dass du hier 2 Gruppen-Ebenen hast, erkennbar an den beiden grauen Menüs:
- Einmal – das obere Menü – die übergeordnete Gruppenansicht. Hier nimmst du Einstellungen vor, die für alle Slider gelten sollen, z.B. einen Hintergrund oder gleichbleibendes Design für alle Slider.
- Die untere Einstellung ist für den jeweiligen Slider. Auch dieses Menü ist grau, weil es sich hierbei auch um ein Gruppenmodul handelt.
Erstelle deinen ersten Slider
Wenn du die Einstellungen des Group Carousels aufrufst, siehst du eine Übersicht deiner Slider. Direkt nach dem Einfügen findest du hier nur einen Slider „Group“.
Du kannst aus dieser Ansicht heraus direkt auf das Zahnradsymbol neben „Group“ klicken oder auch direkt im unteren Menü (siehe oben) auf das Zahnradsymbol klicken.
Als erstes solltest du hier den Namen des Sliders anpassen. Dazu gehst du ganz unten auf Admin-Label und vergibst deinen Namen. Wenn du z.B. einen Testimonial-Slider erstellst, könntest du hier den Namen des Testimonial-Gebers verwenden. Das hilft dir später den Überblick zu behalten.
Gestalte deinen Slider
Du kannst den Slider jetzt nach deinen Wünschen designen. Innerhalb der Gruppe stehen dir alle gewohnten Design-Elemente zur Verfügung, du kannst hier also Zeilenlayouts und Module deiner Wahl einfügen.
Kleiner Tipp: achte darauf, auf welche Design-Ebene du dich befindest. Du hast hier die Zeile, in der das Group Carousel Module sich befindet. Das Group-Carousel selbst und innerhalb des Group Carousels die Groups, also deine Slider.
Wenn du das Design für den ersten Slider erstellt hast, kannst du den Slider über die Einstellungen im Group Carousel einfach kopieren. Es sei denn, du möchtest die Slider unterschiedlich designen, was aber unwahrscheinlich ist.
Auf der ersten Seite der Einstellungen kannst du grundsätzliche Carousel-Einstellungen vornehmen. Öffne dazu den Punkt „Carousel Settings“.
- Automatic Rotation aktiviert die Slideshow
- Center Mode zentriert deine Slider zwischen den Navigationspfeilen. Besonders wichtig, wenn die Inhalte deiner Slider unterschiedlich lang sind. Auf jeden Fall aktivieren, wenn du mehrere Slider nebeneinander anzeigen lassen möchtest.
- Transition Speed: hier gibst du an, wie schnell der Slider wechselt. 200 ms sind mir persönlich zu hektisch. Probiere dich hier aus. Ich nutze gerne ab 3000 ms.
- Slides to show: hier gibst du an, wie viele Slider nebeneinander angezeigt werden soll.
- Slides to scroll: wenn mehrere Slider auf einmal rotieren sollen
Wo findest du wichtige Einstellungen?
Da wir viele Design-Ebenen haben, kann es unübersichtlich sein, wo du welche Einstellungen vornehmen kannst. Deshalb hier die wichtigsten auf einen Blick:
Abstand zwischen den Slidern
Wenn du mehrere Slider anzeigen lassen möchtest, wirst du in der Regel einen Abstand zwischen den Slidern benötigen.
- Gehe dazu in die Einstellungen des Group Carousels
- zum Tab „Design“
- Öffne den Unterpunkt „Groups“
- und dann „Spacing“
- hier kannst du bei Margin einen passenden Abstand links und rechts hinzufügen
Abstand innerhalb eines Slides
Besonders, wenn du mit Hintergrundfarbe arbeitest, wirst du etwas Raum zum Text benötigen. Dazu rufst du direkt die Einstellunges des Slides (bzw. der Gruppe) auf und wechselst zum Punkt Design. Unter Spacing gibst du passende Werte bei Padding ein für oben und unten und links und rechts.
Slides zentrieren
In diesem Beispiel hat einer der Slides mehr Text als der angezeigte. Der leere Raum unter diesem Slide passt sich praktisch dem längesten an. Um es zu zentrieren gehst du in die Einstellungen des Group Carousel Module und dort in die Carousel Einstellungen. Hier findest du den Punkt „Center Mode“ – damit werden alle Slides zentriert und die Pfeile sind wieder mittig.
Pfeile-/Dots-Navigation | Position und design
Wenn du die Pfeile außerhalb deiner Slides anzeigen lassen möchtest, gehe in die Einstellungen des Group Carousel Modules, wechsle zum Reiter Design. Unter „Arrow Position“ kannst du auswählen, sie outside anzeigen zu lassen.
Hier kannst du ebenfalls die Farbe und Größe der Pfeile anpassen.
Um andere Pfeile auszuwählen, kannst du im gleichen Modul im ersten Reiter (Content) unter Elements ein anderes Icon auswählen.
Und außerdem kannst du entscheiden, ob du die Pfeil- und/oder Dot-Navigation anzeigen möchtest.
Aktiven Slider hervorheben
Wenn du mehrere Slider nebeneinander anzeigen lässt, kannst du den aktiven Slider (bzw. die active group) hervorheben, um einen Hingucker zu haben. Dazu hast du mehrere Möglichkeiten.
Damit die Einstellungen funktionieren, musst du in den Carousel Settings den Center Mode aktiviert habebn.
Die Einstellungen findest du im Module Group Carousel unter Design. Dort findest du „Groups“ und „Active Groups“.
Die Einstellungen in Groups wirkt sich auf alle Slider aus – auch auf den in der Mitte. Wie dein mittlerer Slider angezeigt werden soll, bestimmst du unter Active Groups.
Hinweis: Wenn du zuerst die Active Group anpasst und dann die Einstellungen für die gesamte Gruppe vornimmst, kann es sein, dass sich der aktive Slider ungewollt mit verändert. Dann gehst du dort noch mal in die Einstellungen und bestätigst die gewünschten Einstellungen.
Wie du links im Screenshot siehst, hast du hier untergeordnet bekannte Divi-Einstellungen. Ich habe für das Beispiel diese genutzt:
- Box-Shadow für den aktiven Slider
- Filter für die Gruppe (Saturate auf 0)
- Transform Scale für die Gruppe auf 94 %
Fazit
Das Group Carousel Module ist ein gelungenes neues Feature in Divi 5 – und längst überfällig. Die Flexibilität, die es bietet ist, ist beeindruckend. Hier im Tutorial geht es erstmal darum, grundsätzlich zu zu verstehen, wie es funktioniert. Alle Möglichkeiten zu zeigen, würde hier den Rahmen sprengen.
Hast du noch Fragen oder Anmerkungen dazu? Ich freue mich auf deinen Kommentar.
Tipp: ich habe dir hier einen kompletten Rundgang in Divi 5 mitgebracht. In den 30 Minuten erhältst du einen umfassenden Überblick in die neuen Funktionen.
- Youtube-Video 30 Minuten Rungang Divi 5
0 Comments