full screen slider on divi

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.

Adding a full-screen feature to the Divi slider module 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.

full screen slider on divi

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 “.

Read more: How to change the color of the menus between the pages on Divi

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:

Click on the following tab and add the following javascript to the text box titled ” Add code to your blog header “:

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.

Leave a comment

echo "";