The full width slider comes with some awesome features including the ability to add sliders with video backgrounds. But, one feature that makes it even more powerful is the ability to expand the slider to display in full screen mode. So we'll show you how to add full screen functionality to a slider.
The addition of a full screen feature to the slider module of Divi is extremely easy to implement with a few lines of CSS and JavaScript. In just 5 minutes, you can convert your full width slider to a full screen slider that expands to fill the entire screen, much like full screen headers.
The implementation of the full-screen slider functionality on Divi
If you haven't read our tutorial on the presentation of the Divi interface, I invite you to do it.
Step 1: Add a slider with slides in full width mode
Use the " Divi Builder »Add a section« full width »And click on« Insert a module ».
Add a full-width module.
add a module slider Divi #
In the Fullscreen Slider Settings, under the "Custom CSS" tab, add a CSS class called " et_fullscreen_slider ».
In "General settings" add a new slide.
In the slide settings, under General Settings update the following items:
- Category: [enter your heading]
- Text Button: [enter your text button]
- URL Button: [enter your URL button]
- Background image: [add your background image] (I am using an image from unsplash.com)
Repeat this step for as many slides as you want to add.
Once done, click on " Save & Exit ».
How to add custom CSS & JavaScript
From the WordPress dashboard, go to " Divi → Theme Options And under "General Settings", enter the following CSS in the Custom CSS text box:
.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; }
click on the next tab and add the following javascript to the text box titled " Add the code to the head of your blog ":
(function($) { $(window).on('load resize', function() { $('.et_fullscreen_slider').each(function() { et_fullscreen_slider($(this)); }); }); function et_fullscreen_slider(et_slider) { var et_viewport_width = $(window).width(), 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) { var et_viewport_height = et_viewport_height - $main_header.height(); } if (et_viewport_height > et_slider_height) { $(et_slider).height(et_viewport_height); } } })(jQuery);
Finally
Now you have a full screen mode slider for your website. Use it to create effective full-width sliders for most browsers.
If you have any questions, do not hesitate to ask them.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1/2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Other Divi tutorials
- 5 websites for restaurant use Divi theme
- How to add text on a Divi WooCommerce product
- How to change the menu color between Divi pages
- How to personalize the grids of a blog with Divi
- How to use the role Divi editor on WordPress
- How to create a full screen Divi slider
- How to change the color of menus between Divi pages
- Features you probably do not know about Divi
- How to use Divi Builder on WordPress
- How to use the Divi video scrolling module
- How to use the Divi Builder Flip module
- How to add a testimonial module on Divi Builder
- How to use the Divi text module
- How to create a slider on Divi
- How to edit a Divi user role
- How to use the Divi Social Media module
- How to use the shop module on the theme WordPress Divi
- How to use the Divi sidebar module
- How to use the Divi Price Table Module
- How to use the title module of Divi publications
- How to add a video module of Divi
- How to use the article navigation module
- How to use the Divi search module
- How to use the Divi wallet module
- How to use the person module on Divi Builder
- How to use the wallet module with Divi filter
- How to use the full width slider module
- How to use the Divi Builder Image Module
- How to use the full-width navigation module of Divi Builder
- How to use the image gallery module
- How to use the Divi Builder Full-Width Card Module
- How to use the Divi Full Width Portfolio Module
- How to use the Divi full-width header module
- How to use the Divi Counter Module
- How to use the articles slider on Divi Builder
- How to use the Divi Email Optin module
hello and thank you for this tutorial! I can't find the js and css code to insert in the slider here
Hello, great tutorial.
On the other hand it is not displayed full screen on iphone for example, by tilting the iphone the slider is displayed from time to time in full screen but not all the time…. as if it weren't responsive, would you have any idea to fix this little problem?
Thanks in advance,
Sincerely,
Hello,
Try to deactivate all the other plugins, also check that your versions of WordPress and Divi are up to date.
Good afternoon, how can I customize the size of the slide to match the size of the banner image so that I can't crop the image?
Hello,
I do not understand the question.
Hello,
Thanks for this article. I have read that it is not necessarily necessary to install a child theme with Divi as long as we do not modify the CSS too much.
There is still a little customization here ...
So do you recommend a child theme before applying your super tutorial?
Thank you in advance for all your good advice, I often draw inspiration from it 🙂
Hello,
Not necessarily. You can keep divi if you don't have too much technical knowledge.
Hello, very good article!
I followed what was indicated in the article but my slider is not displayed in full screen on DIVI.
Can you help me ? I would like to put it on my home page.
Thanks for your help
Hello,
Have you contacted the DIVI team?
Hello Aliénor,
I have the same problem ... Did you find a solution?
thank you in advance
Hello,
I am building my home page with builder… when I do a preview, I see the page.
The problem is that when I save my page and open it again, the slider does not appear.
Could someone please help me?
Hello,
This could be due to a bug, did you try to contact Eleganthemes support?
Hello,
Thank you for your article!
Do you know how I could change the speed of slide scrolling?