In this tutorial we'll create a
scrolling icon for your WordPress hero
section so this is a great way to tell
your visitors that there are some nice
content below this full width area to
make it pop out we'll add in smooth
animation and also a link to the section
below
to achieve this we'll use the theme Divi
and you can read more about this on divimundo.com
So, to start we will enable
the Divi visual builder so this is where
we will create the scroll down icon so
we go down to the section or I have
prepared the content so we have a hero
section here a full-width area covers
the whole screen with a nice background
image we have a roll here with a semi
transparent background and inside the
row I've added a text module with a
heading and some dummy text so the goal
for this tutorial is to add the scroll
down icon below the row with the texts
so I start out with creating a new row
below this row and I choose the single
column row and the scrolling icon we
will use the blurb module so choose that
one and if you have some dummy text here
in the text field just delete that we'll
just looking for the icon right now so
I'll go down to the image icon section
and click yes I will use an icon and
here you can find several nice icons to
choose from you have different arrows
here so choose whichever you like I'll
go for the circular arrow with one arrow
icon inside of it another thing here is
to add the link to the section below so
we go to the link section and add the
URL hashtag lorem of course you can add
another text here like a start or down
or whatever you want to call the section
below
okay let's design this icon so we'll use
the icon color white and since this icon
already has a circle so I don't need to
add that and the placement should be top
however I think it's a bit big so I'll
go to change the size and I'll choose
here 50 pixels and again this is a
matter of taste so you can have it
bigger or smaller that's up to you
so we had also the small animation
effect the bounce effect so I go down to
the animation section and choose bounce
and I want it to bounce from up to down
in that direction so I go to animation
direction and choose down so now I have
a proper animation but I think it's a
bit quick and sharp so I will add maybe
1500 milliseconds to the animation and
I'll also remove the double animation
here because it's already a default
animation to the blurb module so I just
say no animation there so we don't have
a clash of animations one is enough
right so here you can see preview kind
of a nice effect it's hard to miss this
one so I'll save just to be sure that we
don't miss any updates and I think it's
a bit too high this icons I would like
to maybe put it down a bit so I just
grab the section and drag it down to
move it down and now I have to decrease
the padding below now it starts to look
like something I think it's kind of nice
we can make some small adjustments here
just to cover the screen just save again
to make sure and one thing remains here
because we linked to the section hashtag
lorem then we have to tell the browser
where is this section where
be sent if I click this icon so we go to
the section below and we click the
Settings icon up in the left corner and
we go to the Advanced tab and we use CSS
ID and classes and the ID is actually
the hashtag link so I already fill this
in with Laura but it's here where you
can write down or start or whatever you
choose to have one important thing is to
not add the hashtag here in the CSS ID
it's automatically added for default so
just type the text of the ID not the
hashtag so I save and I exit the visual
builder and we'll give it a try here if
it worked so I'll go down to my new
section and they will have the bouncing
icon and if I click it it sends me down
perfect that's all guys have a look at
divimundo.com for more tutorial tips and
tricks good luck with your web design!
