< All Topics
Widget Used
Mouse Cursor
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to give your cursor a preferable look with the customization and want to use it in the content of your website. we have made a well-designed Mouse Cursor widget for Cursor.

Pro tip
Why not add this widget to your website/product? Because using this widget you can customize the mouse cursor and it will be sufficiently useful in your content as well as with the custom style option.

How to use the Mouse Cursor Widget of The Plus Addons For Elementor

The Mouse Cursor widget comes with four different types of Layout (Cursor Area) With the custom styling options you can create a pleasant looking Cursor layout for your websites.

General Steps

Search for the Mouse Cursor element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Mouse Cursor widget. First, click on the Content tab.

1. Content

Mouse Cursor

1.1: Content

Select Cursor Area

We have provided four different types for The Cursor Area. Select your desired type for The Cursor Area. You can watch this video to know more about it. The types we provided are:

Column
Section
Widget

Body

Select Type

We have provided four different types for a Mouse Cursor. Select your desired type for a Mouse Cursor. You can watch this video to know more about it. The types we provided are:

Cursor Icon
Follow Image
Follow Text

Follow Circle

Select Icon Type

We have provided a Predefined and Custom icon type for the Cursor Icon. Using this option you can change the cursor icon.

Select (Predefined Cursor Icon Type)

You can use different properties of the cursor when you have selected Predefined in the icon type for the Cursor Icon.

Cursor Icon

You can set a custom image or icon of the cursor when the custom option selected in the icon type and when the cursor icon or follow image or follow circle option is selected in the Type menu.

Mouse Cursor Click

By enabling this option allows you to select a second image or icon of the cursor.

Cursor Click Icon

You can set a second custom image or icon of the cursor when the custom option selected in the icon type and when the cursor icon or follow image or follow circle option is selected in the Type menu. This option will work when you move the cursor over your Set Tag.

Follow Image

Icon Max Width

With this option, you can set the max-width of the icon or image when The Follow Image option is selected in the icon type menu.

Cursor Left Offset

With this option, you can set the Left offset of the cursor when The Follow Image or Follow Circle option is selected in the icon type menu.

Cursor Top Offset

With this option, you can set the Top offset of the cursor when The Follow Image or Follow Circle option is selected in the icon type menu.

Follow Text

With this option, you can set the Custom Text of the cursor when The Follow Text option is selected in the icon type menu.

Click Follow Text

You can set the Custom Text of the cursor when The Follow Text option is selected in the icon type menu. This option will work when you move the cursor over the Anchor <a> Tag.

Select Pointer Type

We have provided a Predefined and Custom Pointer type for the Follow Circle. Using this option you can change the circle cursor icon.

Select Pointer (Predefined Cursor Pointer Type)

You can use different properties of the cursor when you have selected Predefined in the icon type for the Follow Circle.

Follow Circle Style

We have provided three different styles for The Follow circle. Select your desired style for The Follow circle. You can watch this video to know more about it. The types we provided are:

Border Cursor
Progress Cursor (Body)
Blend Cursor

Style 1. Border Cursor

With this option, you can Set the Border Cursor option and see the Circle as the cursor with the Predefined icon which you have selected.

Style 2. Progress Cursor (Body)

With this option, you can Set the Progress Cursor option and Scroll the page to check how it works with the Predefined icon which you have selected. This option will only work when the body is selected in the cursor area menu.

First Circle Size

With this option, you can set the Size of the First Circle when The Progress Cursor (Body) option is selected in the Follow Circle Style menu.

Second Circle Size

With this option, you can set the Size of the Second Circle when The Progress Cursor (Body) option is selected in the Follow Circle Style menu.

Style 3. Blend Cursor

With this option, you can Set the Blend Cursor option and select the mix-blend-mode property with a background color to check how it works for your selected tags. And you can also see the Predefined icon which you have selected.

Circle Max Width

With this option, you can set the max-width of the Circle when The Border Cursor or Blend Cursor option is selected in the Follow Circle Style menu.

Circle Max Height

With this option, you can set the max height of the Circle when The Border Cursor or Blend Cursor option is selected in the Follow Circle Style menu.

Circle Z-Index

With this option, you can set the z-index of the Circle for the Follow Circle Style menu.

List Of Tags For Hover Effect

With this option, you can create multiple tags when moving your cursor over the mentioned tags will change the cursor. E.g. a,h1,h2, etc

2.Style

The Style tab is used for customizing the look of all the Mouse Cursor widget components such as Follow Text, Follow Text For Widget Area, and Follow Circle.

Follow Text Style

Set Typography, Text Color, Text Padding, Border, Background, Border Radius, and Text Box Shadow for the Follow Text here.

Follow Text For Widget Type Style

Set Text Size and Text Color for the Widget Type here.

Follow Circle Style

Set Background Color, Opacity, Transform CSS, and Transition Duration for the Border Cursor here.
Set Circle Color, Circle Stroke Width, Fill Color, Opacity, Circle Progress Color, Circle Stroke Progress Width, Transform CSS, and Transition Duration for the Progress Cursor (Body) here.
Set Mix Blend Mode Option, Background Color, Transform CSS, and Transition Duration for the Blend Cursor here.

Preview

Here you can see with details how the Style option of the Mouse Cursor Widget works.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?