A fullscreen slider can work really well as the header of your website’s homepage. The fullscreen aspect consistently keeps important content above the fold. And the slider functionality allows users to see additional content (or CTAs) without having to scroll down the page.
Creating a fullscreen slider with Divi is surprisingly easy to do. The key is to give your slider a height that is relative to the browser height and then get rid of any extra padding and width restrictions on the parent row or section. In just a few minutes, you can create a fullscreen slider that expands to fill the entire screen on page load and look great on all devices.
Let’s get started.
Sneak Peek
Here is a quick look at the design we’ll build in this tutorial.
Download the Fullscreen Slider Layout for FREE
To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the section layout to your Divi Library, navigate to the Divi Library.
Click the Import button.
In the portability popup, select the import tab and choose the download file from your computer.
Then click the import button.
Once done, the section layout will be available in the Divi Builder.
Let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
After that, you will have a blank canvas to start designing in Divi.
Creating a Fullscreen Slider in Divi
Part 1: Setting up the Section and Row
To start, add a one-column row to the section.
Section Padding
Before adding a module, open the section settings and take out the top and bottom padding as follows:
Row Settings
Next, open the settings for the row and update the following:
Now that our section and row padding has been removed and our row width is 100%, the slider we will add to the row will be able to span the full width and height of the row/section without any gaps.
Part 2: Creating the Fullscreen Slider
To create the fullscreen slider, add a new slider module to the row.
Add Images to Each Slide
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 different image and background image to the slide.
Update Slider Settings
Now that each individual slide has a unique image and background image, we are ready to update the settings for the slider in general.
Go back to the slider settings and update the following under the design tab:
Background Overlay
Image Box Shadow
Title Text
Body Text
Button Styles
Slider Height and Content Width
Giving the slider a min-height of 100vh will make sure the slider spans the full height of the browser window. This is the key to making a fullscreen slider. The slider will already span the full width of the browser window because the row width is 100%.
Slider Arrows
Under the Advanced tab, update the size and position of the slider arrows by adding the following custom CSS to the Slide Arrows CSS box:
This will make the slider arrows larger on large screen sizes as well as scale them down to a smaller size on mobile.
Part 3: Subtracting Header Height from Slider Height
If you have a header on the page, the fullscreen slider will actually extend a bit below the browser window. This is because the height of the header pushes down the slider which currently has a height of 100vh (100% of the viewport/browser height). To keep the slider from being pushed below the browser’s viewport, you can add a CSS calc() function to subtract the height of the header from the height of the slider.
You will need to know the height of the header (on desktop and mobile) for this to work. If you’re using the default Divi header, the height of the header will be 80px. So the height of the slider should be 100vh – 80px.
To add the custom height, open the settings for the slider and add the following custom CSS to the Main Element of the slider and also for each individual slide:
Final Result
Here is the final result.
And here is how the design looks on tablet and phone.
Final Thoughts
The key steps to creating a fullscreen slider in Divi are to set up the section and row to span the full width of the browser and then give the slider a min-height of 100vh. If you are using a header, you can add a custom CSS snippet that will subtract the height of the header to make sure the fullscreen slider doesn’t extend beyond the bottom of the browser. With those key steps in place, you can further customize the slider (and slides) any way you want using all of the powerful design features included in the Divi Builder.
Use it to create beautiful and effective sliders for your hero section that fills any screen on any device.
I hope you enjoy this useful addition to your Divi site. I look forward to hearing from you in the comments.
Cheers!
This content was originally published here.