A full-screen slider can create a striking visual impact, capturing visitors' attention with immersive, high-quality images or content.
In this article, we will guide you through the process of creating a full-screen slider using the Slider Module in Divi.
Divi’s Fullwidth Slider Module and regular Slider Module have some great features, including adding sliders with parallax and video backgrounds. However, one feature that would make them even more powerful is the ability to expand to a full-screen slider.
You can also check the How to Create a Fullscreen Slider with Divi blog article, which has a great in-depth guide. The article also offers a free download of the result as well.
Preparing the Layout
In a Regular Section, insert a 1-column Row
Insert the Slider module
For each Slider module's Slide add a background image.
Ensure to use larger image such as 1920px by 1500px.Edit the Row settings by clicking on the Row's Gear
iconGo to Design tab → Spacing → Padding
Set the Top and Bottom padding to 0px
Go to the Design tab → Sizing
Set the Width and Max Width values to 100%
Open the Slider module's settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS
Add this CSS Code:
body.logged-in selector .et_pb_slide {
min-height: calc(100vh - 112px);
}
body:not(.logged-in) selector .et_pb_slide {
min-height: calc(100vh - 80px);
}
Notes:
The 112px value in the CSS code represents the Height of the Header area and the Height of the WordPress admin bar. Depending on the height of your Header area, you might have to change that value.
The 80px value in the CSS code represents the Height of the Header Area. Depending on the height of your header area, you might have to change that value.
The first CSS rule will be only used if the user is logged in, meaning that the WordPress admin area is visible, whereas the second rule will be used if the user is not logged in.
The final result can be seen in the GIF below:
Important Note: The slider preview showcases a fully furnished design created through the Slider Settings → Design tab.
This article focuses on the steps to create a full-screen slider, but you can customize the design according to your preferences.