Divi’s Fullwidth Slider Module and regular Slider Module come with some great features, including the ability to add sliders with parallax and video backgrounds. But one feature that would make it even more powerful is the ability to expand to a full-screen slider. Divi’s Fullwidth Header Module has this full-screen option already, so we thought it would be a good idea to show you how to add this same functionality to those sliders. We have a great in-depth guide on our blog, so you can do this yourself and download it too from the article.
In this article, we have shown how you can create a fullscreen slider using the regular Slider Module. If you want to do it for the Fullwidth Slider Module then you can follow the steps from Preparing the Slider module part.
Getting Started: To start, add a one-column row to the regular section.
To create the fullscreen slider, add a new slider module to the row.
Preparing the Section and Row: Now, open the Section and Row Settings > Design > Spacing option and set the padding-top and padding-bottom values to 0 for both.
And from the Row Settings > Design > Sizing option, set the row width and max-width value to 100%.
Preparing the Slider module: Before updating the general slide settings, open the settings for the first default slide and add an image and background image to the slide. For this example, I’m using the same image for the slide image and background image (around 1920px by 1500px).
Then open the settings for the second slide and add a different image and background image to the slide.
Set height to the slide: We will need to add a min-height value to the individual slide to show it fullscreen. To prevent the fullscreen slider from extending below the browser window due to the header's height, you can use a CSS calc() function. Subtract the height of the header from the slider's height (100vh). If your header is 80px in height (Divi's default header height is 80px), set the slider's height to 100vh - 80px. Apply this custom CSS to the Main Element of the slider and each individual slide.
min-height: calc(100vh - 80px)!important;
Final Result: Here is the final result.
Important Note: The slider preview showcases a fully furnished design created through Slider Settings > Design option. This article's main focus is on the steps to create a fullscreen slider. You have the freedom to customize the design according to your preferences.
Instead of adding slider images, you can opt for background images only. For the complete design process and to download the previewed layout, click on the "Read More" button below.