Hi my dear Divi Maniac,
As you know the full screen slider module is cool, but if you need the full screen effects (100% horizontal and 100% vertical) you have some problems. What can you do to solve the situation?
I found 2 solutions.
As you know the full screen slider module is cool, but if you need the full screen effects (100% horizontal and 100% vertical) you have some problems. What can you do to solve the situation?
I found 2 solutions.
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.