Create Animated Scroll Down Arrow with Elementor Pro and CSS. TemplateMonster


Hi everyone and welcome to this tutorial! In this video we’re going to be having a look at how we can create a similar animated scroll down icon With the help of Elementor page builder the Pro version You’re going to need a Pro version because we’re gonna need a little bit of custom CSS code And also we’re going to make this icon clickable So it is going to send the user
to a specific point on your page Once the user clicks on this icon So as I’ve said this tutorial is for Elementor Pro but
this same effect, this same animated scroll down icon Is absolutely possible to create with the help
of the free Elementor version And we have also got a
video about that on our channel So go check this video out and you’re going to be able to create this animator scroll down icon With the help of Elementor free
and you do not need a lot of knowledge of code Because it is all very intuitive and beginner friendly and I’m going to explain every single step to you So it’s not going to be complicated So there is a lot of types of creative
scroll down indicators online On a lot of a word winning websites They improve the user experience and help your visitors navigate across your website And if you’re looking for a beautiful And functional professionally made website designed for your web project Check out templatemonster.com.
We can find thousands of WordPress themes To any taste and suitable for any business niches Or if you need WordPress themes or plugins in bulk
check out One by Template Monster Which is a subscription service. If you
subscribe you get access to over 10,000 of products That include WordPress themes
and CMS templates, Ecommerce themes, Plug-ins, including Jet plug-ins
for WordPress and graphics, presentation templates Illustrations and a lot more.
If you’re interested check out the links in the description So now let’s start with creating this animator scroll down icon First let’s look for the icon
widget and add it to our page Here since Elementor has introduced
the new icon library You’re able to upload your own SVG files And if you want some specific icon to be
the scroll down indicator you can upload the SVG file You can use one of the icons present
in the default library I simply type in down and here I have a number of different arrows I’m going to choose of this one because I feel like for a tutorial it’s a little bigger And is going to be a little bit more visible What we’re doing now is changing its
color and you can also change the size of this icon Make it bigger or make it smaller We’re pretty much done in here This is the basic setup that we need to
then later go and add some CSS code You can also change the style of this icon
on hover but for now we’re done with the basic setup And I’m going to go to the Advanced tab Scroll down and find the custom CSS tab Which is only going
to be there if you have Elementor Pro So with Elementor Free you do not have
this tab Now let me simply paste
this code snippet in here in this field And I’m going to insert this
same code snippet in the comments So you can simply copy it and insert it
on your own website for your own icon And I’m going to quickly go over it
and explain to you every single line I might interface a little bit bigger so I hope you can see it better So now for the element to
which you want to apply this custom CSS You name it selector and then I have
inserted these four lines This are four different properties
but the values are the same It is needed because we wanted to ensure that this animation works for all of the browsers And you have to make sure that the values that you put in here have to be the same For each of this four properties So in all of these
four lines the values have to be the same Now let’s go and see what the
values actually mean So here the first word here
is the name of your animation And as you see since
I have changed the name in the first line I have to go over and change the name
in the rest of the three lines And also change it here next to the keyframes And I’m going to explain to you what the keyframes
section actually is a little later So As you see the name has to be the same here The next it is the duration of the animation So in our case the animation takes three seconds
it takes three seconds for it to start Go to the midpoints to the 50% of the animation and go to the hundred percent Which means to end
and this entire thing takes three seconds If we change it to seven
it’s gonna go a little slower And if we change it to one second is going to go
faster Then is the top of the interpolation It means that at the beginning of the animation is gonna go a little slower Then it’s going to speed up closer to the middle of the animation And then is going to go slower again
at the end of the animation So it helps to make it a little smoother And then infinite means that
this animation is going to loop It’s going to be infinite
and it’s gonna continuously repeat over time Then if you change this value to let’s say two the animation is going to auto repeat two times So if you want the animation to repeat
a specific number of times Just set this number in
here instead of the word infinite But I’m going to go with the infinite value
for this tutorial because I want it to move all the time And now let’s proceed
to you the keyframes section And this section basically helps us to imagine
the timeline the entire timeline of the animation So 0 is the point where our
animation starts Then 50% is where it reaches the middle of the timeline in our case it’s 40 pixels down So our arrow starts its movement at the top Here then it moves 40 pixels down And then it gets back to its
initial position which happens at 100% So it starts Then it moves 40 pixels
down and it gets back up to zero Now if you want this icon to move let’s say
more pixels down If you want the amplitude of the movement to be a lot
bigger you can change this value Or it can make the value bigger or you can
make the value smaller Simply adjust this value to the number of pixels just
adjust them to your taste All right now what we could do is actually put this
icon somewhere So the user sees it once they enter our website
and I’m going to change the width to inline So the widget doesn’t take up
the width of the entire page And then I’m changing the position to absolute Which means I’m now allowed to grab this widget
and drag it around and place it anywhere I like And I want to place it in here you can just drag it
and drop it where you want Or it could also use these sliders And I’m going to use the percentage because
I feel it’s going to be a little bit more accurate So something like that or
we could actually move it a little bit to the right There we are So this is what the user is going to see
once they enter your website And the one thing that is left for us to do
is to make this icon clickable So the user can not only scroll down the page they can also click on this icon And they’re going to be sent to
this specific section on your website What I want to do is
I want to actually go to this section here Where the menu starts and I want to select this section Go to the settings of this section,
click Edit section here And then if we go to Advanced
we can give this section a specific ID CSS ID you see it
in the CSS ID field Now once we have said it we have to copy it And then go to this icon again, find the link field in the content tab, insert the number sign And then insert the CSS ID that we have given to this section And as you see once I click on this icon
it now sends me to this specific section So this section is now at the top of my viewport Now let’s quickly go over the process of adjusting
the position of this icon for the mobile devices Since the position is absolute It is going to jump to a different place if we switch
to the mobile layout or to the tablet layout Let’s go to the tablet layout for now And as you see here now we have to adjust
the position for the tablet layout as well So now it’s on its place when you switch to the tablet device But if you want to hide this icon entirely
you can go to the responsive tab And you can choose a height on tablet
and hide mobile for this specific widget So this was pretty much it for this tutorial on How to create this animated scroll down
icon with Elementor Pro If you like this tutorial leave us your thumbs up and subscribe to our channel for more Elementor tutorials Thank you so much for watching

4 Comments

Add a Comment

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