Setting Up the Divi Full-Width Slider

Written by Dan Mossop

The Divi Theme comes complete with a built-in full-width slider module. Here's a quick guide to setting it up (and avoiding one of its biggest pitfalls).

Note: see this post if you'd like to set up a fullscreen Divi slider with menu / logo overlay.

Step 1: Create a New Page

First create a new page, onto which we'll put the slider. Give the page a title.

setup divi full-width slider

Step 2: Change the Page to Full-Width Mode

Next, we'll set the page to be full width, meaning that it won't have any sidebars. To do so, locate the "ET Settings" box to the right of the post editor and change the Page Layout setting to "Full Width":

setup divi full-width slider-2

Step 3: Switch to Page Builder Mode

Click on the blue "Use Page Builder" button (located below the page title and above the page editor), you'll then see the Divi Page Builder appear, like so:

setup divi full-width slider-3

Step 4: Change to a Full Width Section

By default the Page Builder starts with a regular, non-fullwidth section. So we need to replace this with a full width section. To do so, click on the grey "Add Fullwidth Section" link at the bottom of the Page Builder. This will add a full width section with a purple toolbar. Now delete the default section by clicking on the "X" in that section's blue toolbar. You're page builder should now look like this:

setup divi full-width slider-4

Step 5: Insert the Full Width Slider Module

Now we want to add the slider module to our full width section. To do so, click the grey "Insert Module(s)" link in the middle of the full width section box. This will bring up a choice of modules, like so:

setup divi full-width slider-5

Click on the Fullwidth Slider option to add the slider to the page.

Step 6: Configure the Full Width Slider

You'll now be presented with the slider module settings screen, like so:

setup divi full-width slider-6

You can play around with the various options later. For now, we'll just leave everything as it is. We do however need to add some slides.

Step 7: Adding Slides to the Full Width Slider

Click on the "Add New Slide" link at the top of the Full Width Slider Module Settings. You'll now be presented with the settings for your new slide.

There are quite a few options, not all of which we need to worry about.

Perhaps the main thing we are likely to want to do is actually add a background to our slide. To do this, go to the "Content" tab and locate the "Background" subheading. There you'll see the option to set various types of backgrounds, as shown:

The four tabs, from left to right, are for a 1) solid background color, 2) gradient background, 3) background image, and 4) video background. Click on the tab and you'll be able to configure the type of background you want for your slide.

Note that in earlier versions of Divi, there were separate "Background Image" and "Background Color" options (before this tabbed background option was added).

Another option you can set on a slide is the "Slide Image". Not to be confused with the background image, this is a smaller image which sits next to the text of your slide. You'll find the "Slide Image" setting on the "Content" tab under the "Image and Video" subheading.

At this point you may also like to add a Heading and some Content to your slide.

When you are done editing your slide settings, click "Save". You'll be taken back to the slider module settings from where you can either choose to add more slides, or click "Save" to finish editing the slider module.

Step 8: Enhance your Full Width Slider with Divi Booster

My Divi Booster plugin adds several options which can be used to enhance your full width slider.

These include:

  • Set slider height (on individual sliders)
    • Set at "Fullwidth Slider Settings > Design > Sizing > Height"
  • Add second button to slides (on individual slides)
    • Set button text at "Slide Settings > Content > Text > Button #2 Text"
    • Set button URL at "Slide Settings > Content > Link > Button #2 Link URL"
  • Add background link URL to slides (on individual slides)
    • Set at "Slide Settings > Content > Background > Background Image URL"

    Step 9: View Your Full Width Slider

    You're now ready to click "Preview" to see your full width slider in action. All being well, it should look something like this:

    setup divi full-width slider-9

    In this example, the beach image was added using the Background Image field, while the people where added using the Slide Image field.

     

    Enhance Your Divi Slider Experience

    Maximize the potential of your Divi Full-Width Slider module with the Divi Booster plugin. Discover new options to set slider height, add a second button to slides, and create engaging backgrounds with ease.

    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, 

    34 Comments

    1. Hey Dan, I want to be able to create a full width / height slider with 4 images, no text or button, but a static menu and logo above, is this something that can be achieved with Booster?

      Reply
    2. can your divi slider provide a full page width image with the ability to put a text box anywhere within the page width and size the text box so fit mobile and tablest formats

      Reply
      • Hi David, it's actually not my slider – the fullwidth slider module comes built-in to Divi (and hence was created by Elegant Themes).

        The options for positioning the text box are quite limited. I've written in the past about adjusting the position of the slider text. The settings mentioned in that post, along with many of the slide settings, can be configured separately on mobile (by clicking on the small "mobile" icon which can be seen alongside the setting titles in the screenshots in that post).

        You may alternatively like to look at a more powerful slider plugin, such as the Anything Slider.

        And if you don't actually need your image to slide and are just looking for a single full page width image with a textbox, then you might be better off just setting the image as a background on a section in your Divi Builder layout and adding a text module to that section, using a combination of rows, columns and / or the sizing and spacing options in the text module settings to get the positioning you want.

        I hope that helps point you in the right direction, but if you get stuck feel free to send through a link to the page you're working on with a brief description of what you're hoping to achieve and I'll try my best to help out.

        Thanks!

        Reply
    3. Can I position the image on the right and the text on the left ? I can move the text with css float: left, but can't see to move the image to the right ?
      Any help would be fab !
      Thanks

      Reply
    4. Is there an issue with the latest version of Divi Booster (2.9.1) plugin and Divi Full-Width slider? My slider has stopped working suddenly. It seems to have an issue with the slide the has a video on it. Any ideas?

      Reply
      • Hi Nancy,

        Thanks for getting in touch and sorry you've been having this issue.

        It looks like the latest Divi update made a change to the way the slider works and that this change was incompatible with Divi Booster's second slide button and slide background link features.

        I've just released an update to Divi Boostet (2.9.3) which I think should resolve the issue.

        I hope it helps, but please let me know if you have any questions, etc. Thanks!

        Reply

    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 From Divi Booster

    How to Add the Post Status in Divi's Dynamic Content

    Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

    Fix Divi Text Module "Regular" Font Weight Not Working

    Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

    Make the Divi Gallery Module Swipeable

    The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

    How to Use Divi Dynamic Content in Woo Modules Product Selector

    Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

    Random Divi Posts