Create a Full Page Divi Slider (with Menu / Logo Overlay)

Written by Dan Mossop

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: 

To create a full-page Divi slider with a menu/logo overlay:

  • Add a Slider Module to a section with no padding.
  • Set Row width and max width to 100%.
  • Set Slider height to 100vh.
  • Add Menu Module and set absolute positioning with z-index.
  • Give the menu a transparent background.

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:

Enhance Every Post with WP Magic CTAs

Boost your blog posts with bespoke call-to-actions using WP Magic CTAs. This AI-powered plugin crafts tailored CTAs to elevate reader engagement and drive conversion rates, perfect for spotlighting offers, building your audience, and directing focus exactly where you need it.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest Posts

Fade a Divi Image Module Edge into the Background

Want to create a stylish fade effect on your Divi image module—where one side fades smoothly into the background? With a bit of CSS, you can make any edge (or corner) of the image fade out: top, bottom, left, right, or even diagonally.Fade a Divi Image Module Edge...

Hide the Header and Footer in the Hello Elementor Theme

Removing the default header and footer from your Hello Elementor theme allows for a streamlined and distraction-free website design. This is especially useful when creating unique landing pages, full-width layouts, or custom headers and footers with a page builder. In...

Setting up the Divi Password Box Module

Setting up password protection on a page can help you control access to sensitive or private content in WordPress, allowing only authorized visitors to view certain sections. With the Divi Password Box module, you can replace the plain Divi password form with a fully...

Open Divi Social Media Icons in a New Tab

Ensuring your website's social media icons open in a new browser tab creates a seamless user experience and keeps visitors engaged with your site while allowing them to explore your social media presence. This approach prevents users from navigating away from your...

Set Hover Color for Menu Links in the Divi Menu Module

Customizing the hover color of menu links lets you enhance the user experience and maintain visual consistency with your website’s brand. By setting a specific hover color, you can guide visitors' attention and improve navigation feedback. In this guide we show you...

Random Posts