Hi everyone and welcome to this tutorial
In this video we're going to be creating this similar animated scroll down icon
With the help of Elementor Free
you do not need the Elementor Pro
But we also have a tutorial on creating this same animated scroll down I can with Elementor pro
So if you own Elementor Pro
follow the link to this tutorial
And see how you can do it
with the pro version of Elementor
But in this tutorial we're going to work with the Elementor Free
It is absolutely beginner friendly even though we're going to be using a tiny bit of custom HTML and CSS
But I'm going to explain to you every single step
So even if you have never had to deal with code that is going to be super easy and fast for you
This icon is also going to be clickable
And it is going to send the user to a specific part of your website once they click on this icon
So there is a lot of types of creative scroll down indicators online on a lot of award winning websites
They improve the user experience and help your visitors
navigate across your website
And if you are looking for a beautiful
And functional professionally made website
designed for your web project
Check out templatemonster.com
Where you can find thousands of WordPress themes
to any taste and suitable for any business niche
Or if you need WordPress themes or
plugins in bulk
Check out One by TemplateMonster
which is a subscription service
If you subscribe
you get access to over 10,000 of products
That include WordPress themes and CMS templates, e-commerce 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
Now let's finally proceed to our tutorial and on your page in Elementor editor
Go to the elements panel and look for the HTML widget
Not the custom HTML
with the WordPress logo we need the other one
And let's drag it on our page
and in this field what we need to do
Is to insert a code snippet which I'm going
to do right now
And I'm going to insert this same code snippet under this video in the description or in the comment section
So we can simply copy it and use
it for your own project
So now I have made the interface a little bigger so
so you can see it better
And I'm going to now go over all
of these values and over all of these lines
And I'm going to explain to you
how you can customize this animation
And what values you can adjust to make this animated icon look the way you want
So let's start from the very beginning
first I'm going to show you how I can change the icon
How you can use a different icon
so I have used the font awesome website
You simply go to fontawesome.com and here in the fields just look for the icon that you want to use
I simply type in down and I
want to use this icon and
Now I went to the page of this icon and I have copied the HTML code simply click on it here and it copies it
Now I only need the name of the icon because I already have all the needed code
And I simply copy the name of the icon and I inserted instead of the name of the icon that has already been here
And as you see now the icon has changed to the one that we have selected on fontawesome.com
Now let's see how we can change the size
Here you see the font size property
Pretty much this is the same thing that you see in Elementor when you change the sides of your elements
And you simply type in the number of pixels
which determine the size of the elements
So the bigger the value is the bigger the icon is going to be and you can make it bigger you can make it smaller
Just changing the value changing the number of pixels
So let's make it 50 pixels big
Then in the color simply
you can insert the hex color value
Now it is pitch black but if we go and pick the color from the so I click on this button
And I go to style
And this is actually the slider this is the slider widget which is a part of JetElements plug-in
If you want to learn more about JetElements I have left a link in the description
Because it not only allows you to create complicated animated sliders image sliders for your website
But it also features around 50 unique widgets for
Elementor but enough about JetElements
Let's insert the hex color code
so our icon has now changed color
So you see it is pretty simple to change the size and
the color of your icon
And now let's actually see how we can animate
This icon these four lines in here
You see that the properties are a little
different but the values are the same
They repeat each other and this is necessary for this animation to work in all of the browsers
So I have changed the name in one of the lines but I now have to change it now in all of the other lines
The next value is the duration of the animation
And if you change it in one line you have to change it in all the other lines
The bigger the value
is the longer the animation is going to take
In our case the animation
is the start of the movement of the icon
At its initial place then it moves down
by 40 pixels and then it moves back up
And this is going to take three seconds interval
then ease
Ease is the type of the interpolation of the animation
It means that the animation is going to be a little bit smoother than if it was linear for example
With the ease type of interpolation the animation is going to start slower
But then speed up to the middle of the animation and then and at a little bit slower pace
Which is going to make it look a little better
Then infinite means that this animation is going to loop it's going to be continuous
And if you want this animation to repeat a specific number of times like say five
You simply change infinite to five
But if we change the value as you remember
If you change the value in one line you have to go
and repeat it in all of the other lines
Because you want this animation to work the same
and look the same in all of the browsers
Because your users might use different browsers
But for this tutorial I'm going with the
infinite type of animation
Now keyframes
Keyframes you see here that the name also has
to be the same as we have in the four lines above
So keyframes helps you imagine
the timeline of your animation
Essentially these three seconds start at 0%
So this is the beginning for animation and at the end
of these three seconds it's going to be a 100%
And the middle of the animation is 50%
As you see it starts at 0, at its initial place at its initial point and then it moves 40 pixels down
When it reaches the 50% of the timeline like at the middle of the animation
If you increase this value it's going to move even further down
The amplitude is going to be bigger
So you can adjust this value to change the animation and customize it the way you like
And you can also make it faster if you change the duration of the animation to let's say one second
And it can also be crazy like that
But I'm going to get back to my values
which was three seconds and forty pixels
And then at 100% they I can gets back to its initial position
Where it has started at the beginning of the animation
So now this is pretty much it
when it comes to the custom code
We used a little bit of custom HTML and custom
CSS for it
But now I want to make this icon clickable
and once the user clicks on the icon
I want the user to be sent to this specific part of my website, to the specific point where this section starts
What I need to do right now is to click on edit section
Go to advanced and go to the CSS ID field
Here I have to give an ID to this section
let's call it scroll here
Now we need to copy it, I have copied this ID
I go to my icon again and where I see the number sign
You have to replace this value
that goes after the number sign
You have to replace it with the ID that you have given to your section and now this icon is clickable
And it sends the user to this specific
section right away once they click on this icon
Now if you want to move
this icon to some specific place
We can go to the custom position
and change the width of this icon to inline
So the widget itself does not take up the entire width of the page
Then we go to the position and select absolute
And now what we can do is to simply grab this icon and drag it to any place on our page
And I want to drag it here so now once the user opens our page they can see this icon right away
And click on it and be sent
to a specific place on our home page
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 is pretty much it for this tutorial on
how to create this animated scroll down icon
With Elementor Free
and a little bit of custom HTML and custom CSS
You can find the code snippet in the
description under this video
I thank you so much for watching
If you like this video leave us your thumbs up and subscribe to our channel for more Elementor tutorials
