Although Divi has a full width slider module, and also a full screen header module, it unfortunately doesn’t have a native way to make a full screen slider.

Luckily though with a few lines of CSS it’s very easy to customise the normal slider module into a full screen one.

Checkout the demo here →

Here’s how…

Step 1: Add the CSS
In your dashboard, navigate to your “Theme Options”, then scroll down to the “Custom CSS” box. Paste the following CSS into this box:

  .full-screen-slider .et_pb_slides {
    height: 100vh;
  .full-screen-slider .et_pb_slide {
    height: 100%;

After you’ve added it, click the green “save” button.

Step 2: Setup your section and row
Create a new section with 0 padding on top and bottom. Add a row with the following settings in the “design” tab:
– Custom gutter width: 0
– Width: 100%
– Max-width: 100% (even though it says pixels by default, you can add percentages here as well)
– Padding top and bottom: 0

Step 3: Add slider module
Add a slider module to your row, and add in the slides you’d like to display. In the “advanced” tab add a CSS Class of “full-screen-slider”.

Step 4: Save!
Click the green “Save changes” button at the bottom and you’re done!

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: [email protected]

You can also checkout more Divi tutorials below.