Want to make your Divi slider module full screen? Want to add a menu / logo overlay on top of it? This post describes how to set up both a full page slider module, and an overlaid Divi menu module with, perfect for homepage "hero" sections.

Here's the effect we're going for: 

Make a Full Page Divi Slider Module

To make a Divi slider module that fills the entire page, begin by adding a slider module in it's own section / row to the page, e.g.:

Open the Section Settings and set the top and bottom padding to 0px:

Do the same in the Row settings:

Still in the Row Settings, set the row "Width" and "Max Width" to 100%:

Now go into the Slider module's settings and set the slider height to "100vh" (which means it will be equal to the 100% the height of the browser window):

Your slider should now be equal to the width and height of the browser window (aka the "viewport").

Remove the Header / Footer from the Page

If you currently have a header or footer on the page and want to remove those, so that the slider appears right at the top (or bottom) of the page, you can do it using the Divi Theme Builder. 

First, go into the theme builder at:

WP Admin > Divi > Theme Builder

Now add a new template for the page (if you don't already have one): 

.In the Template Settings, assign the template to the page / post which contains your slider:

Now hide the header and/or footer on that template by clicking the "eye" icon:

Save the changes in the theme builder.

If you've done all of this, you should at this point have a slider on the page by itself, occupying the full width / height of the page. Note that when logged in, the slider will be pushed down the page slightly by the WordPress admin bar so the page can still be scrolled slightly. When viewing the page as a logged-out user the slider should fully fill the page and the scroll bar should be gone.

Add a Menu Overlay to the Full Screen Slider

If you'd like to display a logo and or menu overlaying the top of the slider, it can be done as follows.

First, add a Divi menu module above the slider, e.g.:

Now, in the menu module settings, set the module to be absolutely positioned with a z-index of 1, like so:

Then in the slider module settings, set the slider to be relatively positioned with a z-index of -1, like so:

All that's left now is to give the menu module a transparent background:

Styling the Slider / Menu

At this point we've done all the configuration necessary to get the slider to the right size and the menu module overlaid on top of it. But it style-wise, there's a lot to be desired. Here's how it should currently look:

I won't go into full details of all the many ways in which the modules can be styled, but here are a few tips to get you started. If you have any questions around the styling of either module, please ask in the comments below (or via the contact form).

Centering the Menu

As you can see above, the menu is currently left aligned. If you'll instead like it centered (or centered with an inline logo), you can do so in the menu settings like so:

Changing the Menu

If you've defined a custom menu in "WP Admin > Menus" and want to display it instead of the default, you can select in the menu module settings like so:

Adding a Logo

In addition to the menu itself, the menu module lets you insert a logo, like so:

Removing the Slide Text

If you just want an image slider, with no text, then remove the title, button and body text from the individual slide settings, e.g.:

Change the Slide Image

To change the slide image, set the background image on the individual slides as shown. The default settings for background image size (Cover) and background image position (Center) are probably the right settings to ensure the image covers the full page and is centered on it:

The Results

After all of that, here is the result. Obviously, I'm no graphic designer, but hopefully it gives you a good starting point for creating an impactful full page slider with menu overlay: