A full-screen slider fills the visitor's entire screen, creating an immersive first impression with large images or video. In Divi 5, you no longer need custom code to build one.
The Slider module's Sizing options now accept viewport units and math functions like calc(), so you can set a full-screen height directly in the Visual Builder.
This guide walks you through adding a Slider module, giving each slide a background image, and using the Sizing options to make the slider fill the screen.
Before you begin
Make sure Divi 5 is installed and activated.
Have a few large background images ready - around 1920px by 1500px works well so they stay sharp on big screens.
Step 1: Add the Slider module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon to insert a one-column Row.
Click the Gray Plus icon inside the Row to open the list of modules.
Find the Slider module and click it to add it. You can also type its name in the search box.
Step 2: Remove the Section's Vertical Padding
Open the Section's settings by clicking on it or by clicking on the Gear icon.
Go to the Desing tab → Spacing.
Set 0 for Top and Bottom Padding.
Step 3: Set the Row to be fullwidth
Open the Row's settings (the Row that contains the Slider module).
Go to the Desing tab → Sizing.
Set 100% values for both the Width and Max Width properties.
Step 4: Add a background image to each slide
Each slide inside the Slider is a Slide child module, and the full-screen look comes from its background image.
Open the Slider's settings by clicking the Gear icon.
On the Content tab, open a slide to edit it, or click Add New Slide.
In the slide's settings, open the Background option group and add your background image.
Repeat for each slide so every Slide has its own image.
Tip: Use images that are similar in size and orientation so the slider height stays consistent as it rotates.
Step 4: Set the slider to full screen with the Sizing options
The Sizing options accept viewport height units (vh) and math functions, so you can tie the slider's height to the size of the screen.
Open the Slider's settings and go to the Design tab.
Open the Sizing option group.
Find the Min Height field.
To fill the whole screen, enter
100vh.1vhequals one percent of the screen height, so100vhis the full viewport.
If you have a fixed header that sits on top of the page, subtract its height so the slider fills only the space below it. Use the math function calc() in the Min Height field:
calc(100vh - 80px)
Replace 80px with the height of your own header. To enter a math function, click the unit label next to the Min Height field and choose the function option from the unit picker, then type your expression. For more on units and functions, see Advanced Units, CSS Functions, and Variables for Divi 5.
Note: The Sizing options accept px, %, em, rem, vw, vh, and more, plus the math functions calc, min, and max. Use vh or calc() rather than a fixed pixel height so the slider stays full-screen on every device.
You're done
Your slider now fills the screen on load. From here, you can style the slide titles, body text, and buttons on the Design tab, and preview the result across phone, tablet, and desktop to confirm the height looks right on each.