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.

Click here to check Elementor Global Cursor Addon demo page.

Elementor Custom Mouse Cursor Feature
Elementor Custom Mouse Cursor Feature

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.

Red Arrow Pointing to Enable Global Cursor Addon in Elementor Panel Settings
Enable Elementor Global Cursor Addon for Elementor Element

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.
Red Arrows Pointing to Elementor Custom Mouse Switcher in Page Settings
Enable Custom Mouse Cursor for Elementor Page or Entire Elementor Website

Key Features

  • Type
  • Style
  • Border
  • Rotate
  • Padding
  • Disable on Touch Devices
Global Custom Mouse Cursor Addon Option in Elementor Panel
Global Custom Mouse Cursor Addon for Elementor Page Builder

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 a SVG icon.
  • Choose Image: Upload and select an image as custom mouse cursor.
Elementor Custom Mouse Cursor Image
Image Mouse Cursor for Elementor

Lottie Animation Settings

  • Animation JSON URL: Insert the JSON URL. Get the animation JSON code URL from here.
  • 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.

On Left Side Elementor Global Cursor Lottie Animation Type and On Right Side Lottie Animation Custom Mouse Cursor
Lottie Animation as Elementor Custom Mouse Cursor

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.
On Left Side Red Arrow Pointing to Image Follow in Elementor Editor and On Right Side Red Arrow Pointing to Follow Image for Custom Mouse Cursor in Elementor Page Builder
Follow Image Custom Mouse Cursor for Elementor Page Builder

Style Options for Elementor Custom Mouse Cursor Feature

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

  • Size: Set size for icon, image, lottie animation and follow image for elementor custom mouse cursor.
  • Background Type: Pick background for the custom mouse cursor.
    • Classic Background: Color, or Image Background.
    • Gradient Background: Set 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.
On Left Side Red Arrow Pointing to Background Color for Mouse Cursor and On Right Side Red Arrow Pointing to Custom Mouse Cursor Background
Background Color Style for Custom Mouse Cursor in Elementor Page Builder

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 the 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 here. Check this article for more information.
On Left Side Red Arrow Pointing to Advanced Border Radius in Elementor Editor and On Right Side Red Arrow Pointing to Custom Mouse Cursor
Advanced Border Radius Applied to Custom Mouse Cursor in Elementor Page Builder

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.
On Left Side Red Arrow Pointing to Rotate Option in Elementor Panel and On Right Side Red Arrow Pointing to Custom Mouse Cursor in Rotate Degree
Rotate Style for Elementor Custom Mouse Cursor

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. You can check out the rest of our Global Features for Elementor from here.

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

If you still need any further assistance, feel free to contact Premium Addons support team from here. 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.

Related Docs:

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.