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.

Beispiel

Als erstes ein Slider mit einer ersten Folie (Slide) mit den Bananen als Hintergrundbild auf der sowohl eine Überschrift, als auch Text und zwei Buttons genutzt werden. Auf der zweiten Folie ist nur das Hintergrundbild – die Uhr – zu sehen. Die Höhe der zweiten Folie passt sich der Höhe der ersten an und insgesamt ist der Slider im Desktopmodus 410 Pixel hoch.

Der zweite Slider nutzt die gleichen zwei Hintergrundbilder. Der einzige Unterschied ist, dass auf der ersten Folie nur eine Überschrift verwendet wird. In der Desktopansicht ist die im Vergleich zum ersten Slider geringere Höhe beider Folien von 284 Pixel gut zu erkennen.

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.