Introduction

Xpro Mouse Effect for Elementor is a wonderful feature that comes with when you download and purchase the Pro version of the Xpro Elementor Addons. The feature gives a tail to the mouse which follow the cursor as the user drags it to the WordPress website.

The Mouse Effect feature by Xpro Elementor provides your website with a unique characteristic that improves the user experience as well as user engagement with your site. Further, customize the element that follows the cursor by managing its size, color, and speed.

How to Install Xpro Mouse Effect for Elementor

Requirements

You need to install and activate the Pro version of Xpro Elementor Addons to use our Mouse Effect for your WordPress websites. Once the plugin is installed, just make sure Xpro Mouse Effect is ‘Enabled’ from the Extensions tab of the Xpro Dashboard. This way you will easily find & use the effect in the Elementor editor.

Follow the steps below to enable the extension:

Step 1

Click on the Xpro Addons option available in the WordPress dashboard menu.

Step 2

From the Dashboard, click on the Extensions Tab, find the Mouse Effect, and then toggle the button ‘ON’ to enable it.

How to Use Xpro Mouse Effect for Elementor

Provide your website users something to play with. Add an element to follow the mouse that attracts users and makes them stay on the website. After you activate the mouse effect from the WordPress dashboard, open the Elementor Page Builder and click on the setting icon at the bottom left.

Click on the mouse effect to open up the menu and then toggle to enable the feature.

To see the result, update the page and click on the Preview icon. This is how your mouse will appear on the screen after you enable the mouse effect.

Allow or disallow the feature to be used on every page of the website. Toggle on the Mouse Effect Globally option to make the effect appear on all pages, all posts, or all pages and posts.

You have the option to change the cursor that will be displayed on the website. Add a mouse icon by selecting the option of replace from the cursor option. You can also hide the cursor or use the default.

Manage the speed of the tail from the Motion Delay bar.

Color the tail as well as the border based on the background color and border color, respectively.

Use the Blend Mode option to apply effects to the element. There are more than 15 blending modes to select from. From the relevant options, change the tail’s size and opacity.

How to Apply a Mouse Effect to a Widget

You can also apply the Xpro Mouse Effect feature to a widget or column. Select the widget or column where you want to implement the mouse effect. Go to the Advanced Section and search for “Mouse Effect.”

As previously said, you may hide the cursor here as well, and what’s more fascinating is the “Magnetic Effect,” which moves the widget when it comes into contact with the mouse.

You can adjust the magnetic threshold for the magnetic effect and also manage the speed of the cursor.

In the tail, write a text that will appear when the mouse is dragged above the widget. Make the text larger and rotate it inside the circle. The cursor tail can also have an icon and a background.

Color the text inside the circle, and if you have not included an image in the background, then you can color the background as well as the border.

This is how the result will be shown in the preview.

Include a blend mode in the cursor tail and give it effects. Adjust the size of the circle by dragging the mouse and finding the perfect size in the size option. Manage the border radius and the opacity of the element display.

Best Mouse Effect for Elementor

Make your website more engaging and exciting by using the Mouse Effect function. Download the premium feature of Xpro Elementor Addons which makes the user experience enjoyable and makes them stay on your website. If you like this feature then you should check out Elementor Smoke Effect which produces colorful smoke animation in the background when a user moves the mouse on the website.

Xpro Elementor Addons include a variety of widgets, features, Elementor templates, and blocks to assist designers in creating an appealing site. Check out our 50+ free Elementor addons, which are more than enough to build a professional WordPress website.