This tutorial will show you how to add a slider to a web page using the Divi Visual Builder for WordPress.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version Of This Divi Tutorial

Hello, this is Jimi Blevins, today I’m going to show you how to: “Add A Slider To A Webpage Using The Divi Visual Builder.”

So, let’s go ahead and pop in our “Slider” module by clicking on the gray plus (+) sign and searching and selecting “Slider.”

HowToAddASlider

The way that this works is, you’ve got your items here:

HowToAddASlider2

So first off we’re going to need to add a couple items. (Just going to type in some random stuff.)

HowToAddASlider3

This is where this gets a little confusing, so you’ve got your “Background Image,” and you’ve got your “Slide Image.”

Now the difference is, (I’m going to use this picture of this little boat here in a cove right), so this goes with my heading. There’s the boat, and there’s my “Background Image.”

HowToAddASlider4

Now I can mess with the “Background Image Position,” and “Background Image Size,” and what this does (and you can play around with this if you want) is, this kind of positions the background image.

So right now it’s on default, which I think is “Center.” So the image is centered, even though you can’t see the top and the bottom of it.

HowToAddASlider5

So if I were to do “Bottom Center,” you’ll see more of the bottom of the image. (I like to leave it at default.)

So, we’ve got “Image Size,” and you can set this to be the “Actual Size” of the image to cover. You can have it “Fit” in the slide like this:

HowToAddASlider6

Here’s where this gets confusing in my opinion, because if I put a slide image in, I pick the same image, you notice it pops the image in here and then the text over here:

HowToAddASlider7

I would normally use this as just a photo slider, but there’s a little more functionality in this. It’s not as robust as the “Slider Revolution” that comes bundled with the Mozaic Platform, but this is if you just want to put a simple, quick slider on something. This is the way to do it.

You can also use this for a call to action if you want something that’s got a little bit more features than your regular call to action because it works pretty much the same way.

We can add a button to this for people to be able to click in under “Button Text.”

HowToAddASlider8

Here is where you put your “Button URL” in, so I’m going to leave that. That’ll be our first slide.

We can also put some text in there in the “Content” section if you want to.

HowToAddASlider9

So, let’s go ahead and add another one, so we’ve got more than one.

HowToAddASlider10

Let’s first off pick a “Background Image,” (This one I’m just going to leave as the image.)

There’s my picture, put a little header.

Like I said these work great for a call to action, which is kind of how I’m setting it up. We can put in our URL, I’m going to leave this without a slide image.

HowToAddASlider11

You know, for me, this is what I would want. I want a picture, with a little bit of text in it and then I can just click on to the next one and then the next one. I can have them automatically rotate through, works pretty well.

So, we can get into the “Design.”

HowToAddASlider13

I’m not going to go through the design on every single one, but you can customize each slide. (Which we don’t need to do.)

These we can do here, in our regular design settings.

These are going to be global for all slides. So, if you’re really looking to change your letter spacing, your colors, custom styles for your button, etc. I would say this would be the place to do it, instead of doing it on each individual slide as you go along.

HowToAddASlider14

So, here’s where we have our controls, (see image below.)

I can turn these “Arrows” on and off. These are just when I mouse over, you see these arrows here:

The Controls,” show these little dots down here:

HowToAddASlider17

Right now, I can click on a dot to go directly to a slide, I can turn that off in “Show Controls.”

I can have an “Automatic Animation,” this just turns it on so that as soon as I pull up the webpage, it’s automatically rotating through the slides. I don’t have to go to the next thing, and we can change how long slide lasts here:

HowToAddASlider18

Continue Automatic Slide On Hover,” this is when I’m hovering, it’ll pause it, so it’s not going to go to the next thing. I can actually have it go to the next thing if I want to.

Parallax Effect,” that’s just going to make it so when the page scrolls, the background image has a bit of a parallax effect to it.

We can “Remove Inner Shadow.” We can also set here, our “Background Image Position,” and “Background Image Size.”

HowToAddASlider19

So, again, you can set these global settings for your slider so you don’t have to go in and tweak eight individual settings for each individual picture.

That pretty much covers all the options we’ve got here in our “Slider Module.”

Once again, my name is Jimi Blevins and thank you so much for watching. :) :)