So flexibel das Divi Theme an vielen Stellen ist, die Höhe eines Slider-Moduls im Divi Builder lässt sich nicht in den Optionen festlegen. Wenn Du willst, dass der Slider in einer bestimmten Größe angezeigt wird, musst Du selbst einen Weg finden. Wir zeigen Dir drei mögliche Varianten mit unterschiedlichen Vor- und Nachteilen.

Wie hoch ist der Divi Slider?

Die Höhe einer einzelnen Folien (Slides) im Divi Builder ergibt sich aus den Inhalten der Folie. Dazu gehört der anzuzeigende Text mit Titel, Text und ggf. Buttons. Damit es etwas Platz oberhalb und unterhalb der Textinhalte gibt, addiert Divi 16% Abstand nach oben und unten hinzu. So ergibt sich die Höhe einer einzelnen Folie aus der Höhe der Textinhalte plus 16% Abstand (Padding) nach oben und unten.

Die Gesamthöhe des angezeigten kompletten Slidermodules ergibt sich wiederum aus der Höhe der höchsten einzelnen Folie im Set. Alle anderen Folien werden in der gleichen Größe angezeigt.

Sliderhöhe mit dem Divi Booster anpassen

Der einfachste und bequemste Weg geht über das von uns bereits getestete hilfreiche Plugin Divi Booster. Unter anderem bietet das Plugin eine Option zum Anpassen der Sliderhöhe an. Nach Installation und Aktivierung des Divi Booster Plugins, findet sich in den Einstellungen des Slider Moduls unter „Design“ im Bereich „Größe einstellen“ eine neue Option zum Einstellen einer minimalen Höhe für das jeweilige Slider Modul:

Mit Bordmitteln zur passenden Sliderhöhe kommen

Um nur mit den vorhandenen Bordmitteln eine bestimmte Sliderhöhe zu erreichen, kann man in den Moduleinstellungen unter „Design“ die „Zwischenraum“ (englisch „Custom Padding“) Option in den Slider Einstellungen nutzen. Hier lässt sich ein „Benutzerdefinierter Abstand“ nach unten und nach oben einstellen. Darüber hinaus, kann diese Einstellung für Desktop, Tablet oder Smartphone separat gesetzt werden.

Der Vorteil bei diesem Vorgehen ist, dass die Divi Bordmittel ausreichen. Der große Nachteil ist, dass es bei Veränderungen der Textinhalte leicht passieren kann, dass Texte z.b. durch einen veränderten Wortumbruch zu groß werden und dann der Slider sporadisch seine Anzeigehöhe verändert.

Mit CSS zur passenden Sliderhöhe kommen

Damit der gewünschte Slider gezielt angesprochen werden kann, muss diesem eine eigene CSS-Klasse zugewiesen werden. Dazu gehst Du in den Einstellungen des Slider Moduls in den Bereich „Erweitert“. Dort findet sich die Möglichkeit CSS-IDs und eine Klasse zu vergeben.

Dort trägst Du jetzt eine passende Bezeichnung ein, bei der Du relativ sicher bist, dass diese von niemanden anderen verwendet wird. In unserem Beispiel nutze ich „startseitenslider“ als CSS-Klasse:

Dann fügst Du folgenden CSS-Code möglichst in die style.css Deines Divi Child Themes ein.

/* === Begin: Set the divi slider height === */
/* Src: https://divibooster.com/changing-the-height-of-the-divi-slider/ */
/* Desktop */
.startseitenslider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 500px !important;
}
/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 980px) {
.startseitenslider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 500px !important;
}
}
/* Phone */
@media only screen and (max-width: 767px) {
.startseitenslider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 500px !important;
}
}
/* Handle padding */
.myslider .et_pb_slide {
padding-bottom: 0px !important;
}
.myslider div.et_pb_slide_description,
.myslider .et_pb_slider_fullwidth_off div.et_pb_slide_description {
padding-top: 1%;
padding-bottom: 1%;
}
/* === End: Set divi slider height === */

Um die von Dir gewünschte Sliderhöhe zu erreichen passt Du einfach den Wert hinter min-height für Desktop, Tablet und Phone an.