Elementor Custom Mouse Cursor Addon Tutorial

One of the new trends in website design is adding a custom mouse cursor icon when hovering on a specific element to grab your visitor’s attention. We’re bringing up a new addon for that by using Elementor Global Cursor addon that will improve the user experience and make your mouse pointer alive by adding a custom mouse cursor using images, SVG, icons, Lottie Animations, and much more. Not just that, you can apply Premium Mouse Cursor addon on any Elementor section, column, widget, Page and even the entire website.

Check Elementor Global Cursor Addon demo page.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this Feature is enabled in Premium Addons Dashboard so you can find it in the Elementor editor.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

How to Enable Custom Mouse Cursor to Elementor Elements?

You can enable Elementor Global Cursor for any Elementor section, column, or widget by following the below steps:

• Navigate to Elementor Section/Column/Widget settings.
• Click on Advanced tab.
• Open Global Cursor section settings.
• Switch on Enable Global Cursor option.
• Disable on Touch Devices: Enable this option to disable custom mouse cursor on touch devices.

It’s recommended to use Elementor Navigator to select elements when Global Cursor is enabled.

How to Add Custom Mouse Cursor to Elementor Page/Website?

Now, you can apply Elementor Global Cursor on Elementor Full Page or Entire Elementor Website by following the steps below:

• Navigate to Elementor Page settings.
• Open Custom Mouse Cursor section settings.
• Switch on Enable Custom Mouse Cursor option.
• Apply on Site: Enable this option to apply the cursor on the entire site.
• Disable on Touch Devices: Enable this option to disable the custom mouse cursor on touch devices.

Key Features

• Type
• Style
• Border
• Rotate
• Padding
• Disable on Touch Devices
• Magnet Effect

Elementor Custom Mouse Cursor Type

Here you can select your custom mouse cursor type. You can select between icon, image, SVG, text, and Lottie animation.

Icon & Image Settings

• Pulse Effect: Enable pulse (make element bigger) effect on mouse icon & image.
• Buzz Effect: Enable buzz (make element buzzing) effect on mouse icon & image.
• Choose Icon: Pick an icon from font awesome library or upload an SVG icon.
• Choose Image: Upload and select an image as custom mouse cursor.

Lottie Animation Settings

• Animation JSON URL: Insert the JSON URL. Get the animation JSON code URL from lottiefiles.com.
• Loop: Enable this option to run the animation infinitely.
• Reverse: Enable it will make the animation run backward.

For more clarification about customizing your Lottie animation, please check this article.

Follow Image & Follow Text Settings.

• Choose Image: Upload and select that will follow the default mouse cursor.
• Follow Text: Insert a text that will follow the default mouse cursor.
• X Position (%): Set horizontal position for follow image or text in percentage on desktop, tablet and mobile. This is used to set the horizontal distance between the mouse cursor and the following image/text.
• Y Position (%): Set vertical position for follow image or text in percentage on desktop, tablet and mobile. This is used to set the vertical distance between the mouse cursor and the following image/text.
• Follow Delay (s): Set delay time in seconds for follow image or text. Default is 0.3s.

Style Options for Elementor Custom Mouse Cursor Feature

Adjust size, color, and font customization for custom mouse cursor for Elementor page builder.

• Size: Set size for the icon, image, Lottie animation, and follow image for elementor custom mouse cursor.
• Background Type: Pick a background for the custom mouse cursor.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Text Shadow: Adjust follow text shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Typography: Adjust follow text font settings and style it.

Border Style for Custom Mouse Cursor in Elementor Page Builder

Add a border to the mouse cursor, you can also use Advanced Border Radius option.

• Border Type: Select between the following border types, as well as the color and width of the border on each side of the box.
• Border Radius: Increasing the border radius will add circular corners to the area with the background behind the mouse cursor. You can adjust the border radius in pixels, % or em.
• Advanced Border Radius: Apply custom radius values. Get the radius value from fancy border website. Check this article for more information.

Rotate Option for Elementor Mouse Cursor Addon

• Rotate (Degrees): Set rotate degree for Elementor custom mouse cursor in degrees on desktop, tablet, and mobile.
• Padding: Creates a space around Elementor custom mouse cursor in pixels, em, or percentage (%) on desktop, tablet, and mobile.

Magnet Effect for Elementor Mouse Cursor Addon

This option has been recently added in Premium Cursor Cursor addon. It’s used with Premium Image Hotspots widget to force the mouse cursor to animate to the nearest hotspot.

Conclusion

If you’re looking for adding some magic to your mouse cursor by changing the default mouse pointer added by your web browser to enhance the user experience and attract the visitors to specific content on your web page, we recommend using Elementor Global Cursor which will allow you to upload custom mouse cursor with a lot of customization.

We hope we were able to help you through this guide. Check out the rest of the Global Features in Premium Addons for Elementor plugin.

Also, You can check out the rest of our Section & Columns Addons like:

• Elementor Lottie Animation Section Addon
• Elementor Ken Burns Section Addon
• Elementor Animated Gradients Section Addon
• Elementor Parallax Section Addon

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.