- Hey y'all, I'm Kori Ashton
and welcome to another WordPress Wednesday.
We're gonna be continuing our series on the Divi Builder.
And today we're gonna be looking how to add an animation
or actually set auto rotation to the slider module.
This already lives inside of Divi,
but if you didn't know to look
where I'm about to show you,
you might not even know it's possible.
So please be sure to click like and subscribe
and come back every single week.
I'm right here, helping you improve your online marketing
inside the world of WordPress.
Let's get to the tutorial.
(upbeat music)
So I'll show you two different modules
that this can work with inside of your Divi theme.
And the first example I'm gonna show you
is with the post slider module.
And I'll show you the example on the front side
and then I'm gonna log into the module
and show you how to change it
and make those settings active.
So right here, I've got the example of a post slider module
and you have to manually hover over it
and then click to scroll through it, right?
Which is a nice user experience, still.
It's very smooth animation.
So it's a really cool user experience in that sense.
And you've got these little visual aids here
to let people know
that there might be additional content sitting here.
So that's kind of cool, but what if you wanted
that to auto rotate through?
This could be used for all sorts of different ways,
inside of your website.
You can just get creative with how you're gonna use this.
So let me show you how to set that
to automatically rotate.
I went ahead and logged into my Divi site.
Now I am in the visual editor mode, right?
So here's my module here.
I'm gonna click on that gear, open that up,
again, see up here at the top, it says post slider,
that's the module I'm using.
And I've got it set to four different posts, right?
And you can choose the categories, if you wanted to,
all that goodness, you've got a lot of settings here.
The one you wanna look for though,
to set this to auto rotate,
is in the design tab,
scroll down to the bottom and go into animation.
Now, normally the task to deal with,
like a a slide in really cool, kind of lazy load effect,
how the content appears on the page,
but they have this extra button
in this space for this module that says automatic animation.
So if I click on, you can set the different speed,
in milliseconds, you can set the different speed there.
By default, I typically use it on what they suggest.
But you can already see it starting to rotate, y'all.
You see it behind my screen here.
It's already rotate through, right?
And continue the automation even on hover.
So if somebody did come over here and hover on it,
it's not going to recognize the cursor,
it's going to continue to animate and and rotate through.
Best practices is to have it pause
if somebody does ho hover over it, right?
Because they're interested in reading what's there.
Their eyes are focused there, their cursor is there.
So I would leave that to off personally,
depending upon how you feel
about what that call the action might be in that space.
Click the check mark.
And of course, you're gonna come down to the bottom,
open up that little menu, click save
and now that is live to the world, right?
Really cool user experience
rotating through your different posts.
But what about the slider module?
So let's go ahead and have some fun here.
I'm going to add in just as an example here
another module, let's open this up,
and of course we're looking for the slider module, right?
You've got three different slider options.
You've got the post slider,
that's the example I was just showing you,
you have the slider option
and then you have a video slider.
For this, I'm going to choose the slider option.
Let's open that up.
And here, you can add different things.
You can add a background image or video, right?
You can add different things into this,
which makes it really, really cool and fun.
Interesting, different, right?
If you wanted to add some of your favorite people in there.
Let's add in their awesome faces.
That would give you a nice little slider sitting there,
and you can change out all the texts,
add a call to action button or eliminate it, either way.
If didn't want it to be sitting right here,
in the forefront like that,
you could come down here and do a background image, right?
Let's take out the color and add in a photo here.
and the whole slide now would be a photo.
Let's add that in there.
How cool is that? That's fun.
You can come back here to the text, take out all that.
We don't need a button.
We just literally want a slideshow sitting there.
Check that box. There's your first slide.
Add a second slide,
so it naturally comes with two sitting here.
You can go into that slide and make it anything you want.
Add your other content here.
You can mix and match media inside,
if you're really, really cool,
just something totally different.
But if you wanted this to auto rotate through,
I'm gonna duplicate,
actually let's go back here for a second.
I'm gonna duplicate this second slide.
And I'm gonna change the background image
so I can see the rotation happen.
Let's do this.
All right. Cool, cool, cool.
Check that box. Awesome.
Love it. Love it.
Okay, so it's just gonna sit there for a second.
It's not going to auto rotate through.
You will have to manually come here as a user
and click to rotate through that little slideshow,
unless, let's click that gear icon,
unless you go into the design mode, right?
On the module itself, go into the design mode,
scroll down to animation, and check that on.
Isn't that fun.
And now it will rotate through your different mix of media,
whatever you wanted to put in there.
We've got two pictures and a text box in there.
So really cool, really fun.
All auto rotating through.
All right y'all, so remember that whenever you're using
a module like this,
and if you're adding in these large images,
it's really gonna weigh down your website.
So please be cautious when adding in
multiple images in this space.
I also want you to consider the fact
that a lot of users don't stick around
for slide two, three, four, five.
So limiting it to around three slides in there
is probably best practice,
and be certain that those images are optimized,
so everything loads quickly.
If these are important things that you to really highlight,
you might wanna break them out of a slideshow
and leave them actually on a page,
so that they're not missed,
as people do tend to quickly scroll past content.
All right, please be sure again, to like and subscribe,
come back, hang out with me.
I have almost 500 videos on this channel,
all dedicated to search engine optimization,
social media marketing, WordPress, freelancer resources,
all sorts of cool things like that.
So I hope that you enjoy your time on my channel
and find some goodness here.
Be sure to stay safe and I will see y'all next week.
Bye everyone.