Create your Full-Screen Slider with Divi

First Solution

• Add the full width section
• Add the full width slider Module with slides
• Add a new slide
• In the Fullwidth Slider Module go to “Slide setting” > “Advanced” > “Custom CSS”
• Add “height: 100vh;” to Main Element.

Done!

But there is a solution that is better… and here it is!

Best Solution

If you need something better please use this second solution.

• Add the full width section
• Add the fullwidth slider Module with slides
• In the Fullwidth Slider Module go to “Slide setting” > “Advanced” > “Custom CSS” and add a CSS Class called “et_fullscreen_slider”.
• Add your slide (please put an image as background to see the effect)
• Save and exit

Now, you have to insert a bit of CSS and a bit of Javascript to run the full screen slider well.

Copy this CSS code

.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;}

and paste it into the CSS text box you find in
Dashboard > Divi > Theme Options > General Settings .
Then copy this script:

<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);

Into
Dashboard > Divi > Theme Options > Integration
In the box “Add code to the < head > of your blog”.
That’s all.

Pay attention, if you use the code with a theme built with the Divi Theme builder may be it doesn’t run.