In today’s tutorial, I’ll share with you a simple way to add an elementor custom mouse cursor, This feature has been recently released by the Premium Addons for Elementor which now enables you to add a custom mouse cursor to your Elementor sections, columns, and widgets with ease. You don’t need to add any custom code.

All you have to do is select an image, icon, or Lottie that you want to use as a custom mouse cursor, add it to your Elementor website, add some styles and you’re good to go!

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Custom Mouse Cursor Tutorial

What you’ll need to create an Elementor Custom Mouse Cursor

For this tutorial, you are going to need the Premium Addons for Elementor Pro version since the custom mouse cursor comes only in the Pro version. So make sure you have these two installed and activated in your plugins area.

After installing and activating them go to the Premium Addons menu and click on widgets and addons (01:08), inside this, you’ll see the Custom Mouse Cursor feature, just enable it (make sure it is green).

1. Adding a Custom Mouse Cursor using a Mouse Pointer

After activating the custom mouse cursor feature, go to pages and open up any page or section using Elementor.

In your Elementor editor, select the section or widget, go to advanced and enable the mouse cursor feature on the left, go to cursor Type and choose Icon, click on the choose icon option which will take you to the Icons Library where you can choose your icon, in the search box, search for “mouse” then choose the pointer option then click the Insert button to insert the pointer. (01:42) 

To Read: How to Compress Web Images for Free by upto 94% (JPEG, PNG and WebP Image Optimization)

After the cursor is inserted, go to Size and increase it to 120 pixels. Under Color, choose the color you want for your cursor, then you can also add a border to it so under Border Type choose solid, set the Width to 12 pixels or all sides, under Color choose the border color of your choice and lastly, set the Border Radius to 100%.

Under Rotate, you can alter the cursor rotation, make it 55 degrees. After setting all this up just press the Update button at the bottom, then preview your results. Your pointer cursor is ready, and you can use it to navigate through your page too. (02:46)

2. Adding a Custom Mouse Cursor using a Lottie Widget

In your Elementor editor select the section, go to Advanced and enable the custom mouse cursor. 

Under Type choose Lottie and under Animation JSON URL you need to paste your lottie. To get a lottie files website lottiefiles.com and search for “cursor”, from the results select the lottie file, when you click on it to open. Copy the URL, then go paste it. (03:31)

After pasting the URL in the Animation JSON URL area, enable the Loop option; so the lottie icon will be blinking on the website. Under Background type, set a color of your choice, you could also make it a bit transparent. (04:04)

Also Read: How to Create an Elementor Vertical Scroll Section with Premium Addons

3. Adding a Custom Mouse Cursor using Custom Images

In your Elementor editor, select the section where you want to apply the mouse cursor, in Advanced, enable the custom mouse cursor. Under Type select Image,  then click on the Choose Image option which takes you to the Media Library where you can choose your image, or you can even upload your own image.

On the Size option set the image size (70 pixels), under Border Type choose Groove with Width of 10 pixels on all sides. Set a border color of your choice,  set border radius to 100% and leave the rotation at 0 degrees. When you update and preview; the mouse cursor looks great! 

If you have a main section with other inner sections in it, and you selected the main section when creating the cursor, it will run through all the sections (inner sections included) (05:30) 

4. Adding a Custom Mouse Cursor using Follow Text

For the last section, the mouse cursor will have a follow text and this will be applied only on the phone number widget 

To do this:

Select the widget and under Advanced, enable the custom mouse cursor. Under Type, choose “Follow Text”, then type in the text you want to appear on the cursor. Under X-position set it to -37%, Y-position to 16%, and the Follow delay 0.3 seconds. You can also change the font under Typography.

5. Elementor Custom Mouse Cursor Responsive Settings

To make sure your mouse cursor is responsive on all divides you can go to the Responsive Mode button at the bottom left, when it opens select the tablet and mobile devices to make sure the cursor looks fine. If you want to adjust the cursor size based on the device you can select the device and in the Edit Section make the cursor size and border smaller to suit the device size. (07:29)

In Closing

That’s how you can add an elementor custom mouse cursors using text images and icons, with the help of Premium Addons for Elementor hence making your website more engaging and interesting!

Let me know if you have any comments or questions, and remember to subscribe to the newsletter and youtube channel.