+49 (0)178 309 3584 kontakt@mikeplatzer.de

Wenn Sie im Divi Theme einen Fullscreen Slider erstellen möchten, ist dies über den integrierten Divi-Builder ohne weiteres nicht möglich.
Hierfür sind ein paar manuelle Einstellungen und Code-Zeilen nötig.

Zunächst erstellen Sie, wie gewohnt eine “Sektion für volle Breite” und fügen dieser Sektion das Modul “Vollbreiter Slider” hinzu. In den Einstellungen dieses Moduls legen Sie einen Klassennamen fest (z.B. et_fullscreen_slider).

Divi Fullscreen Slider

Danach wechseln Sie in die Divi Theme-Optionen zum Reiter “Integration” und fügen folgenden Code im Feld “Code dem < head > Ihres Blogs hinzufügen” ein:

<script>
(function($) {
    $(window).on('load resize', function() {
        $('.et_fullscreen_slider').each(function() {
            et_fullscreen_slider($(this));
        });
    });
    function et_fullscreen_slider(et_slider) {
        var et_viewport_height = $(window).height(),
            et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
            $admin_bar = $('#wpadminbar'),
            $main_header = $('#main-header'),
            $top_header = $('#top-header');
        $(et_slider).height('auto');
        if ($admin_bar.length) {
            var et_viewport_height = et_viewport_height - $admin_bar.height();
        }
        if ($top_header.length) {
            var et_viewport_height = et_viewport_height - $top_header.height();
        }
        if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
            var et_viewport_height = et_viewport_height - $main_header.height();
        }
        if (et_viewport_height > et_slider_height) {
            $(et_slider).height(et_viewport_height);
        }
    }
})(jQuery);
</script>

 

Die Änderungen speichern und danach im Customizer im Bereich “Zusätzliches CSS” noch folgenden CSS – Code einfügen:

.et_fullscreen_slider .et_pb_slides,
.et_fullscreen_slider .et_pb_slide,
.et_fullscreen_slider .et_pb_container {
    min-height: 100% !important;
    height: 100% !important;
}

 

Wenn Sie die Änderungen speichern und die Website aktualisieren, sollte Ihr Slider jetzt als Fullscreen Slider erscheinen.