1. Home
  2. Docs
  3. Xpro Elementor Addons Pro
  4. Extensions
  5. Mouse Effect

Mouse Effect

How to Install Elementor Mouse Effect Extension

Xpro Mouse Effects for Elementor is a premium extension that elevates your web UI and takes it to the next level. Adding mouse effects like 3D Tilt and Mouse Track to your elements makes it more appealing and interactive to site visitors. It’s a premium extension that comes with the Pro version of Xpro Elementor Addons. You can buy the Pro version for as low as $37 only, get it now to start building awesome websites in no time.

The premium extensions offer two effects that can be easily applied to your elements.

1. Mouse Track

Use this feature to set an element to move in relation to the visitor’s mouse movement. Mouse Track effect for Elementor further offers two types of directions; direct and opposite. You can also control the speed of the element.

2. 3D Tilt

Add this feature to set an element to tilt in relation to the visitor’s mouse movement. 3D Tilt effect for Elementor also offers other customization options like direction, speed, scale, and glare. We will discuss these options later on.

The two premium mouse effects really make your website stand out from the competition and leave an everlasting impression on the visitor. It lets you build professional websites no matter if you are a newbie in the web design field. Xpro Mouse Effects for Elementor also eliminates the deep-level CSS knowledge and lets you add incredible mouse effects and animations on any element of your website. Check all Xpro Special Elementor Features for Elementor right now. Let’s see how we can set up and use this extension for our Elementor websites.

Requirements

You need to install and activate the Pro version of Xpro Elementor Addons to use our Mouse Effect extension. Once the plugin is installed & activated, 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 Add Mouse Effects to Your Elementor Website

Once your Pro version of Xpro Elementor Addons is installed and activated, you can easily add attractive mouse effects to widgets, sections, or columns in no time. Just turn the extension on from the Xpro Dashboard by following the steps above. It’s fun, saves tons of your time, and doesn’t require any coding skills. Let’s see how you can use premium Xpro Mouse Effects for Elementor.

First, you will have to turn on the Scroll Effect from the Elementor editor. Simply select the element on which you want to apply Mouse Effect. Now click on the Advanced Tab to find our Pro Mouse Effect section. Finally, toggle the button to Yes to enable and use the Elementor extension.

By toggling the button to Yes, you will find two types of mouse effects that can be applied to widgets, sections, and columns of your website. The two options are:

  • Mouse Track – set an element to move in relation to the visitor’s mouse movement.
  • 3D Tilt – set an element to tilt in relation to the visitor’s mouse movement.

Now let’s apply both effects one by one to our elements and see the results.

Mouse Track Effect for Elementor

Use this feature to set an element to move in relation to the visitor’s mouse movement. Mouse Track effect for Elementor further offers two types of directions; direct and opposite. You can also control the speed of the element.

First, select the element you want to apply the mouse track effect to. Now click on the Advanced Tab and turn the Xpro Mouse Effect on. Now click on the Mouse Track option to apply the effect on the element.

You will see 2 options here:

  1. Direction – the ‘Direct option’ will move the element in the same direction as the mouse and the ‘Opposite option’ will move it in the other direction.
  2. Speed – control the movement speed of the element.

Set the speed and direction as per your liking to create an amazing Mouse Track effect for your element.

3D Tilt Effect for Elementor

Add this feature to make an element tilt in relation to the visitor’s mouse movement. 3D Tilt effect for Elementor also offers other customization options like direction, speed, scale, and glare. We will discuss these options later on.

First, select the element you want to apply the 3D Tilt Effect to. Now click on the Advanced Tab and turn the Xpro Mouse Effect on.

Click on the ‘Edit Icon’ in front of the 3D Tilt option. You will see 5 options in the dropdown table. The options are:

  1. Direction – choose from ‘opposite’ or ‘direct’. The opposite option will tilt the element in the opposite direction of the mouse movement. Direct will tilt the element in the same direction as the mouse movement.
  2. Speed – set the tilt speed from 0 to 20
  3. Scale – set the scale (zoom in zoom out) from 1 to 2
  4. Glare – set the glare of the element from 0 to 1
  5. Effect relative to – choose from Default or Entire Page

Set the values as per your liking to create a beautiful 3D Tilt effect for your element.

Best Mouse Effects Extension for Elementor Websites

Xpro Mouse Effect for Elementor truly adds magical Elementor mouse track & 3D tilt scroll effects to your content. The features enable you to add animated touch and bring your content to life without any coding skills. It’s now easier than ever to attract users on all touchpoints and make them fall in love with your website.

You can also add amazing scroll effects to your website using Xpro Elementor Addons – Pro. Simply view our detailed guide on how to add scroll effects to Elementor websites and get started. See how you can also add an amazing background parallax effect to your Elementor website.

I hope you have a better understanding of the mouse effect extension by Xpro Elementor Addons. You can view all of our unique Elementor extensions & features and start to build amazing WordPress websites for FREE.

How can we help?