Scroll Down Button Elementor Pro Tutorial
hello, I’m Kaycinho, The Digital Alchemist, and today, I’m going to show you how to add an animated clickable scroll down icon with Elementor Pro.
Scroll Down Button Elementor Pro Tutorial
First of all, let’s give credit where it’s due because this tutorial is based on a codepen from Yuri.
This tutorial is video based (check above), but below you will find the code needed to complete it.
HTML Code (HTML Widget)
While editing your custom Elementor Pro header, add an HTML widget, and paste the following code in it (and make sure you replace the CHANGEME part of the code by the section ID you want to link to, as explained in the video):
<a class="hero-mouse anchor" href="#CHANGEME">
<div class="mouse-icon"><span></span></div>
</a>
CSS Code
- click on the gear icon (bottom left corner of the editor page)
- click on the Advanced tab
- then inside the Custom Css filed, paste the following code:
.hero-mouse {
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -15px;
text-align: center;
z-index: 100;
font-size: 12px;
text-transform: uppercase;
color: white;
font-weight: 600;
letter-spacing: 1px;
}
.hero-mouse h3 {
margin-left: -14px;
padding-top: 15px;
}
.mouse-icon {
width: 25px;
height: 45px;
border-radius: 15px;
position: relative;
border: 2px solid #dedede;
text-align: center;
}
.mouse-icon span {
width: 3px;
height: 8px;
margin: 2px auto 0;
display: block;
background: #dedede;
border-radius: 5px;
-webkit-animation: 1.2s ease infinite wheel-up-down;
animation: 1.2s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
0% {
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}
@keyframes wheel-up-down {
0% {
margin-top: 2px;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
margin-top: 20px;
opacity: 0;
}
}
Your turn!
I hope this tutorial will help you make your future websites even more beautiful, with Elementor Pro!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
