- Hey, Kevin from New Jersey asked me,
"Hey Kori, how did you make
"this really cool little animation?"
Well, you can do it inside of Divi.
I'm gonna show you how to do it right here
using it kind of like a scroll UX, right?
To tell the individual you can scroll down the page.
So I'm gonna show you how to build this out in Divi.
It's a pretty straightforward animation.
I'm also gonna show you how to build out scroll effects,
so check this out.
See how these almost look like they're hovering
or just kind of floating down the page?
That is a scroll effect that you're able to do
inside of Divi, no code needed.
So I'll show you how to build out
both of these examples right now.
Hey, y'all my name is Kori Ashton,
and welcome to another WordPress Wednesday.
(upbeat music)
Before we get to the tutorial,
I wanted to mention that we are doing a giveaway.
If this is July 2022, you still have a chance
to win these free JBL wireless headphones.
Head to the link in the description box below
and you can go join the raffle for that.
If this is after that timeframe,
please be sure to follow that link anyway
'cause I might have a new raffle going on.
I'd love for you to sign up and win something really cool.
All right, let's get to the tutorial.
So the first example we'll get started with is this one,
where we have the animation of just kind of that visual aid
to point users to scroll down.
I've gone ahead as well and linked it
so it will actually speed dial down to the next section,
so really cool little added great UX/UI component here.
And again, of course
this is all possible because we're running in Divi.
So I'm gonna go ahead and reset this website
and I will show you how I built that.
All right, now that I've got that removed,
all you're gonna do is jump into your Visual Builder, right?
Go to the page that you wanna add that little icon to,
and you're gonna enable the Visual Builder.
I of course want it in this hero section,
especially if your hero section,
which is this opening scene here,
is so large that users really don't see any other content.
It's a really cool feature to add this little visual aid
to let them know there's more down below,
so please scroll down.
For this hero section, I did use a full width component.
So I'm not able to come in here
and just add another module right away just below this,
which is what I would've loved to have done
if I'd used a different type of row setting.
But because I'm using a full width section here,
I'm unable to do that so I'm gonna have to go ahead
and add a regular section down below.
You can accomplish this either way.
And the coolest part about this really is the animation.
So however you wanna add in the icon,
I'll show you how to add in the animation.
I'm gonna use a full row,
and then we're looking for the module of icon.
And of course you have the entire library to use here,
any sort of icon that you want.
For this example, I used the little double arrow down.
And you see that it comes in
in the actual row where I'm putting it.
It's down here in this space.
I'm gonna go ahead and change the color of it
and then I'll move the location of it.
So the icon, I'm gonna go ahead and go with design
and go into the icon color itself and change it to white.
I'm going to shrink down the size a bit down to about 30.
I don't want it to be too aggressive in tone,
but I do want it to be visible enough and noticeable enough,
so I'll put it on 30 here.
And of course the alignment, we always want it
right in the middle of the whole row, right?
And so that'll take care of that for now,
until I move it up.
And let's do that by going into spacing.
And on top margin right here,
this is the trick to moving that up into that space.
We're going to say negative
and we're gonna say 10vh for viewport heighth, okay?
And right now it looks like it's still off a little bit,
but I'll show you how to move that up into that space.
I'm gonna go ahead and click my check mark.
We're going to shrink down all of this space here, right?
Go in here and just take all of this out,
and look at that move right up into that one area,
which is fantastic.
The only issue with this design at this point
is that there is going to be this visual gap right here
in my design, and I don't want that.
So I'm gonna go into this Section Settings,
and I'm gonna go into my design, into my sizing,
and on max heighth,
I'm going to just kinda put in one pixel
and tell it to shrink down,
and that will completely zip up that whole block.
Click your check mark
and go ahead and save your design, right?
You click on your little menu icon down here at the bottom,
which is those three dots.
Expand out that menu and click save.
And once you have that in place,
you can exit the Visual Builder and test.
All right, it's sitting there perfectly.
It looks great.
I like the placement of it.
Now let's go back in and add in the animation.
Enable the Visual Builder.
Now, depending upon the placement of your icon,
you might need to go into your layers here
and access it this way.
Either way, you can just click on the icon itself
and we're gonna go into,
click on the gear and we're gonna go into the Design tab,
scroll down to an Animation tab.
It should be the final option inside of that Design window.
Open this up.
Okay, this is where we get to just get creative
and explore and have fun with design.
For the specific one that I showed you in the example,
I applied a slide effect.
You can see it already start to take place there.
And the direction I said was down
'cause I wanted it kind of pointing it down.
I changed the duration to loop a little bit faster.
Not too crazy.
And then I wanted it to repeat on a loop, okay?
And those are the settings that I used.
You can play around with all these other settings
just to get creative and make it
your own style if you'd like.
For the sake of now, I'm gonna go ahead and save my changes
by clicking the check mark,
and I'm going to save my changes overall
and I'm going to exit the builder and view my animation.
And there you have it.
It's a little aggressive for my tone.
Maybe that's a little too fast,
so I go back in and change that speed,
but overall that's where that's gonna live.
Okay, the last step we wanna do is just go ahead
and add in a little bit of a link,
and this of course is optional.
But I would like the idea of this if it were clicked on
to maybe zip down right to about here onto those events.
I think that'd be really nice.
So let's go enable the Visual Builder,
and then you wanna choose the section
that you wanna link it to.
So I'm gonna go right down here.
I'm going to go into the gear icon for this section,
and you're gonna toggle over to the Advanced
and go into your CSS ID and Classes.
This one right here that has CSS ID,
go ahead and add in whatever you want it to say.
It's really totally optional.
I just put the word go for a quick scroll.
Any word you put there, just remember what it is.
I'm gonna go ahead and click save.
We're gonna go back to our button, right?
Go back to our scroll button.
Click on that,
and we're going to drop down to the link portion, right?
Which is just below that icon
if you just scroll down in this section,
right down to the link.
And whatever word you use,
you're gonna put a pound sign or a hashtag
right in front of it and put that word in there.
And so mine was go, so mine's pound #go.
Click save.
Go back to your three dot menu, click save,
and exit out.
Let's test it.
If you now click on that,
it zips you right down to that section
really nice and seamlessly.
All right, let's take a look
at this example that I showed you,
because this actually has several
different effects going on
and you've got quite a bit happening here.
You've got some scrolling effects, as well as animation,
as well as just the standard old slideshow happening here.
So there's quite a bit of movement
and I'll show you which feature is applied to each area
and then just kind of give you the opportunity
to go have fun and play around.
So if we take a look and log in,
I'm gonna go into the Visual Builder here,
open up this page.
It's so cool to think about how this is built out,
because really it's just these kind of hovering photos.
You know, obviously you have to have PNG photos, right?
Something with a transparent background on them.
But that's exactly what this leaf is over here.
If you were to click on that, open this up,
there's a little image.
So you can see there's no background around it
so it really does have that effect of hovering.
And when you go into the Advanced tab,
this is not animation.
This is a scrolling effect.
And the difference really is on scroll,
you're going to see the effects.
So this particular one has quite a bit going on.
Anything you see in blue here is enabled
to make this cool leaf float up and down like this.
I just again want you to get creative.
You can see what the settings are here
and how this is set up.
The vertical motion is enabled,
and we've got 1.5 as the bottom of the viewport.
It's set to 50/50 on the middle offset,
and then negative 1.5 on the top of the viewport there,
just so you can see it
kind of play around, right, and hover.
And it starts to turn, too.
We've got kind of this fading in, fading out moment, right,
of it just kind of coming into the screen
and coming out of the screen.
Really cool there.
We've got a scaling up and down.
If you wanted it to scale a bit, this one does.
This scales up about 30% when it's done,
so it just kind of gets bigger as it goes up the page.
That allows for it to just feel a little bit more real
in how it's floating.
You're also gonna see it be really much in focus right here.
Look at the tone of the leaf here down toward the bottom,
and look as I start to scroll up,
it kind of begins to blur out
when it gets up underneath my text,
and there's a reason for that.
You really want the focus to be on the text
and you don't want the image
to compete with the text, right?
So when you have it rotating up,
we've got it at 45 degrees,
and then you're just gonna take it to a negative 45,
and that's gonna turn it as it rotates up the page.
And then this last tab
that we have active is enabling the blur
and that's that blur effect
to just kind of cause it to just kind of go out of focus
so that folks will focus on the actual text itself.
Isn't that incredible?
And I get that leaf to live there.
Let me show you my layers.
This is what's cool about this.
Open this up,
go into my columns,
and you're gonna start to see now,
this is my leaf that's in the back back here.
I'll open up the settings on that
so you can see that as well.
And so on this one, if we go into our Advanced tab
and go into scroll effects,
you're gonna see the blur setting is quite a bit, right?
We've got that 10% blur,
but we also have a position set, right?
In that same Advanced tab, you can go into,
you've got that scroll effects.
Go into your position,
and now this is where we're kind of starting
with this position.
You see how I'm playing around with it there?
I have it set to 74,
and get that right back where I wanted it, right there, 74.
And then you've got the horizontal offset,
and that's just basically where it lives
on the horizontal access.
This is that Z index where you can bring it to the front
if you wanted to.
And just look at that come up completely up over that E.
It lays on top.
I'm not gonna do that.
I'm gonna leave that where it is right there
and go ahead and click my check mark.
Now this over here that's rotating
is just a standard slideshow module, right?
That's that slider settings,
and I've got that enabled to auto rotate.
If you go into your Design tab,
go down to the bottom, go to Animation,
just toward the bottom down here is auto, right?
And you want it to automatically have that animation,
so you wanna be sure that that's toggled on
and that will allow that to auto rotate
through that slideshow,
again, just bringing great movement.
So further down the page here, you're gonna see this image
doesn't really truly come in as a standard
just slide over to the right, which would be the animation.
This is a scroll effect.
So based on where my user is scrolling, I've got it moving,
and you can see it just kind of shift itself
and move right up into this placement.
So it's really, really a cool little scroll effect,
and that of course, again is just a part of, sorry,
it's tripping out right now
because I'm hovering over it all crazy.
Let me go in and get to it here, here you go.
So I just went into my layers again,
which is this bottom right hand corner.
If you open up the three dot menu here,
open up that little drawer there
and go over to your Layers icon right here,
open that up, you're able to get to things here.
A lot of times when I'm dealing
with some sort of Z index issue
or scrolling or fixed placement,
I have to get to my layers this way.
Let me open it up so you can take a look at its settings.
All right, so if we go into Advanced.
and again, this is that scroll effect
and we've got that vertical motion in play
and we also have a little bit
of that horizontal motion in play,
and that's what's gonna move it kind of up
and to the right as folks scroll.
See it go down and up and to the right
into that position.
This again is just something
you can play with and get creative with.
All right, one of the last features
I'll show you here is this photo.
Watch when I click refresh here on the screen,
you're gonna see it kind of zoom in.
Did you see that happen?
Let me click refresh again.
And you see that zoom in effect?
That is an animation, right?
And then watch this leaf.
It's fully in focus right there.
As I start to scroll down the page,
it goes out of focus, so that's that blur effect.
And look at that come into focus.
Just playing around and adding in those extra features
really make all the difference.
But this effect here is a animation
and this effect here is a scroll.
Y'all, I hope this was helpful for you.
Obviously you're running on Divi,
so if you'd like to check out my entire playlist
on great Divi tips and tricks,
I'll put the link to that in the description box below.
Please be sure to click like and subscribe
and Come back with me every single Wednesday.
I'm right here, helping you improve your online marketing
in the world of WordPress.
Bye, y'all.
(bright music)
(bell rings)