How to make a cursor tracker with Elementor in 2 minutes

How to make a cursor tracker with Elementor in 2 minutes

In this video tutorial you will learn how to make a cursor tracker in Elementor and WordPress by using also a third plugin called Dynamicooo. This cursor tracker trend is easy to make and you can customize it as you want without coding.

✨ Plugins used:
Elementor Free: https://bit.ly/elementor-xdu
Elementor PRO: https://bit.ly/elementorpro-xdu
Dynamicooo: https://bit.ly/dynamicooo-xdu

Create your Cursor Tracker

Hi everyone I’m Aryan and welcome to this new video tutorial today we’re going to create a cursor tracker for your website using Elementor, Elementor pro and Dynamic.ooo you will find everything in the description of this video.

How to make a cursor tracker with Elementor

I’m going to use a free theme called: Hello theme.

Hello theme - How to make a cursor tracker with Elementor

Let’s start! I have already a little page here and I’m going to edit this with Elementor here we are and go on the bottom of the page click on this plus button, here click on the first structure and then you just need to click on the little plus button.

Adding a cursor tracker wisget with Elementor

Great now we can search our widget and search for cursor tracker, drag and drop it here and as you can see on the left you have all your settings and my cursor tracker now is working fine, so let’s change the dimension of it to 80 so it’s bigger now and then I’m going also to change the fill color to black so you can see it well nice you can change the stroke opacity and whatever as you can see we have also scroll progress.

Cursor Tracker Settings and Styling

I will show you right away how it works, just choose a stroke width and I’m going to add a 10 and the progress color will be green.

Nice now if I scroll on the top of the page look what happens the bar changed and this is pretty cool! Now let’s say I want a mouse over effect on this button here so I need to click here on the left side and click on hover and as you can see there is a little class here cursor-target for your elements and I’m going to copy, then select the element you want to apply the effect, in my case the click here button and then go on advanced and CSS classes I will paste the code here.

Adding CSS classes to the Element we want to apply mouse hover effect for cursor tracker

Great now I’m going back to my cursor tracker settings click on this again and now if I click on hover and then change those settings here like opacity I will set to 0.1 and then scale I will set it to let’s say 5.55.

Cursor Tracker editing settings

What happens if I mouse hover the button? normally should change but it’s not changing, This is because we need to update the page and refresh it so I’m going to update this and refresh the page.

Great and now if I mouse over to check it out it changes, cool right? If I scroll we have the green bar so everything is working fine if you want to do this for an image for another text you just need to select the image and then go on advanced and paste again the code cursor-target of course, nothing happens because you need to update the page and then refresh the whole page again, and now if I mouse over on my image this changes!

Nice let’s style a little bit better our cursor tracker now, so let’s go to the bottom click on this gray bar and then I’m going to change the dimension of my little dot I’m going to have a little dot like this and then I will disable the scroll (not a big fan of it) and as you can see now it changes.

All right guys if the tutorial was useful please hit the like button, subscribe to the youtube channel and notification bell, this will allow me to keep alive my youtube channel, and of course you’ll be notified when I get a new tutorial out so have fun and see you in the next one bye!

LinkedIn
Facebook
Twitter

free

Stay always up to date with new tutorials!

Do you want to learn more on web, marketing and design? Sign up and you will receive exclusive content and new tutorials every week.

Full Stack Designer

I was born with a passion for Design and the web, since I was very young this world has always intrigued me by developing a profession that I love and that I want to share.

RELATED ARTICLES