Setting Up the Divi Full-Width Slider

This post may contain referral links which may earn a commission for this site

The Divi Theme comes complete with a powerful image slider module. A great feature of the slider is the ability to use it in "full-width" mode. Here's a quick guide to setting it up (and avoiding one of its biggest pitfalls).

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.

 

Hundreds of new features for Divi
in one easy-to-use plugin

28 Comments

  1. 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

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