Full-screen slider on Divi: The full-width slider comes with 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 implementation of the full-screen slider functionality on Divi
Step 1: Add a slider with slides in full-width mode
Use the ” Divi Builder “, add a ” full width ” section and click on ” Insert a module “.
Add a full-width module.
add a slider module on 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 Slide settings, under General settings update the following:
- Section: [enter your section]
- Text button: [enter your button text]
- Button URL: [enter your button URL]
- Background Image: [add your background image]
Repeat this step for as many slides as you want to add.
Once it is done, click on ” Save & Exit “.
From the WordPress dashboard, go to “ Divi → Theme Options ” and under “General settings” enter the following CSS in the Custom CSS text box:
To finish full-screen slider on Divi
Now you have a full-screen slider for your website. Use it to create effective full-width sliders for most browsers.
For website maintenance service contact us.