How to Add a Follow Circle Cursor in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • Mouse Cursor widget from The Plus Addons for Elementor adds a circle that follows the mouse cursor.
  • Users can select from three Follow Circle styles: Border Cursor, Progress Cursor (Body), and Blend Cursor.
  • The circle's size and position can be adjusted using Circle Max Width, Circle Max Height, Cursor Left Offset, and Cursor Top Offset.
Table Of Content

Do you want to add a follow circle cursor in Elementor? In this type of cursor, a circle follows the mouse cursor, this can be a great way to engage your visitors and add a touch of creativity to your website.

With the Mouse Cursor widget from The Plus Addons for Elementor, you can easily add a circle that follows the mouse cursor in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Mouse Cursor widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the Mouse Cursor widget from The Plus Addons for Elementor to the page and follow the steps –

1. Select the appropriate cursor area from the Cursor Area dropdown.

Mouse cursor follow cursor how to add a follow circle cursor in elementor? From the plus addons for elementor

2. Then select Follow Circle from the Cursor Type dropdown.

3. From the Pointer Type dropdown, you have to select the pointer type. Here you’ll find two options – 

  • Predefined – To add predefined icons.
  • Custom – To use a custom image as a mouse cursor.

You’ll find different options to add the cursor based on your selection. Let’s select Predefined here.

4. Then, from the Select Pointer dropdown, you have to select a cursor icon.

5. After that, from the Follow Circle Style dropdown, you have to select the circle type. Here you’ll find three options – 

  • Border Cursor – To create a circle cursor with a border.
  • Progress Cursor (Body) – To create a progress circle cursor.
  • Blend Cursor – To create a blend circle cursor.

Select the option as per your requirements, let’s select Border Cursor here.

From the Circle Max Width and Circle Max Height sections, you can manage the width and height of the circle.

You can manage the circle’s left and top distance from the mouse cursor from the Cursor Left Offset and Cursor Top Offset sections.

From the Circle Z-Index section, you can maintain the z-index of the circle, if the circle doesn’t show over any element.

Then, in the List of Tags for Hover Effect section, you can add tags where you want to show the cursor hover effect.

Note: You can add multiple tags separated by a comma (,) and you have to add transform CSS for the hover effect in the Style tab.

You can style the circle further from the Style tab.

Now you’ll see a circle following the mouse cursor.

Mouse cursor follow cursor demo how to add a follow circle cursor in elementor? From the plus addons for elementor
<i>CMO at POSIMYTH Innovations</i> <i>6+ Years of Experience</i> He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.
Linkedin Twitter Globe-americas
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What do I need before starting to add a follow circle cursor in Elementor?

You need to have The Plus Addons for Elementor installed and activated to use the Mouse Cursor widget, which enables you to add a follow circle cursor.

What happens after I complete the steps to add a follow circle cursor?

After completing the steps, you will see a circle following the mouse cursor on your website, enhancing visitor engagement and creativity.

How do I select the type of cursor in Elementor?

To select the cursor type, add the Mouse Cursor widget from The Plus Addons for Elementor, then choose 'Follow Circle' from the Cursor Type dropdown.

What options do I have for styling the follow circle cursor?

You can style the follow circle cursor by selecting from three options in the Follow Circle Style dropdown: Border Cursor, Progress Cursor (Body), or Blend Cursor.

What if the follow circle cursor doesn't show over certain elements?

If the circle doesn't show over any element, you can adjust the z-index of the circle in the Circle Z-Index section to ensure visibility.

Is there a way to use a custom image as a mouse cursor?

Yes, you can use a custom image as a mouse cursor by selecting 'Custom' from the Pointer Type dropdown in the Mouse Cursor widget settings.

Last reviewed: April 9, 2026

Related Docs