---
title: "How to Add a Custom Cursor in Elementor?"
url: https://theplusaddons.com/docs/add-a-custom-cursor-in-elementor/
date: 2025-01-11
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The Mouse Cursor widget replaces the visitor's pointer inside the part of the page you choose — with an image, a word, a circle or a trail of pictures. This..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-a-Custom-Cursor-in-Elementor_-1024x536.jpg
word_count: 1212
---

# How to Add a Custom Cursor in Elementor?

## 

- The Plus Addons for Elementor Pro includes the Mouse Cursor widget, and with the Pro plugin switched off the widget disappears from the editor and a page that already uses it shows no cursor effect.
- Mouse Cursor works only at frontend and turns off at 991px wide or narrower, so nothing happens on phones and most tablets.
- Cursor Area controls scope: Body covers the whole page, Container applies inside the container, Widget applies only to the widget directly above it, and Column / Section do nothing on container-based pages.
- Mouse Move Image drops pictures behind the pointer from an Image List, with Duration set to 1 second by default, Distance Threshold set to 50px by default, and GSAP required for this type.

The **Mouse Cursor** widget replaces the visitor's pointer inside the part of the page you choose — with an image, a word, a circle or a trail of pictures.

This page covers every setting in the widget, what each one actually changes on the published page, and where the effect stops working.

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/mouse-cursor/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Mouse Cursor is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows no cursor effect and no notice.- **Widget to enable:** Mouse Cursor, switched on under **The Plus Addons > Widgets**.- **Check it on the published page:** the widget draws nothing in the Elementor editor. The panel says so too: *This widget works only at frontend*.- **Desktop only:** every cursor effect is switched off when the browser window is **991px wide or narrower**, so nothing happens on phones and most tablets.

## Watch the Video

https://www.youtube.com/watch?v=ggEhdsdjxxw

## Turn the Widget On

- Go to **The Plus Addons > Widgets**.- Search for **Mouse Cursor** and switch the toggle on.

![The Plus Addons Widgets screen with the Mouse Cursor toggle switched on](https://theplusaddons.com/wp-content/uploads/2025/01/mouse-cursor-activate-1024x484.png)

## Pick the Cursor Area

Drag the **Mouse Cursor** widget onto the page and open the **Content** section. **Cursor Area** decides how much of the page the new cursor covers.

![Cursor Area dropdown in the Mouse Cursor widget set to Body](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-cursor-area.webp)

| Option | What it covers | Tested result |
| ------ | -------------- | ------------- |
| **Body** | The whole page. | The widget tags the page body and the cursor applies everywhere. |
| **Container** | The container the widget sits in. | The effect showed while the pointer was inside that container and disappeared outside it. |
| **Widget** | The widget directly above the Mouse Cursor widget. | The effect showed only over that one widget. With nothing above it, nothing is created at all. |
| **Column** / **Section** | The old Elementor column and section layout. | On a container-based page neither ever became visible. Use these only on pages still built with sections and columns. |

The widget draws nothing itself, so it does not matter where in the container you drop it.

## Choose the Cursor Type

**Type** is a row of pictures, not a dropdown. There are five:

![Type control in the Mouse Cursor widget showing the five cursor type pictures](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-type.webp)

| Type | What the visitor sees |
| ---- | --------------------- |
| **Cursor Icon** | The pointer itself is replaced — either with a built-in CSS cursor or with your own image. |
| **Follow Image** | The normal pointer stays, and an image trails it. |
| **Follow Text** | The normal pointer stays, and a word or phrase trails it. |
| **Follow Circle** | A circle trails the pointer. Three styles: **Border Cursor**, **Progress Cursor (Body)** and **Blend Cursor**. |
| **Mouse Move Image** | Pictures are dropped behind the pointer as it moves and fade out. |

### Cursor Icon

With **Cursor Icon** selected, **Icon Type** chooses between **Predefined** and **Custom**.

![Icon Type dropdown under the Type control, set to Custom](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-icon-type.webp)

- **Predefined** shows a **Select** list of standard browser cursors — *crosshair*, *grab*, *move*, *help*, *none* and so on. The default is *crosshair*.- **Custom** shows a **Cursor Icon** media field. Pick a small image with a transparent background.

![Cursor Icon media field in the Mouse Cursor widget with a custom cursor image chosen](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-icon-custom.webp)

> *Whichever you pick applies to everything inside the area, including links and images. A link's usual pointing hand is replaced too.*

### Mouse Cursor Click

Switch **Mouse Cursor Click** on and add a second image in **Cursor Click Icon** to show a different cursor over links.

![Mouse Cursor Click toggle switched on with a Cursor Click Icon chosen below it](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-click-icon.webp)

Despite the name this is a **hover** swap, not a click one. In testing the second image appeared while the pointer was over an `<a>` element and the first image came back everywhere else. Leaving the toggle on without choosing a second image changes nothing.

![Recording of the Mouse Cursor panel with Icon Type set to Custom and a cursor image added](https://theplusaddons.com/wp-content/uploads/2025/01/mouse-cursor-icon-custom.gif)

## The Follow Types

**Follow Image**, **Follow Text** and **Follow Circle** all keep the visitor's normal pointer and add something that trails it. Each has its own page:

- [Add a follow image cursor](https://theplusaddons.com/docs/add-a-follow-image-cursor-in-elementor/)- [Add a follow text cursor](https://theplusaddons.com/docs/add-a-follow-text-cursor-in-elementor/)- [Add a follow circle cursor](https://theplusaddons.com/docs/add-a-follow-circle-cursor-in-elementor/)

They share three settings: **Cursor Left Offset** and **Cursor Top Offset** (both default 10px, range −500 to 500), and **Mouse Cursor Click**, which again swaps the image or the text while the pointer is over a link.

![Cursor Left Offset and Cursor Top Offset sliders in the Mouse Cursor widget](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-offsets.webp)

## Mouse Move Image

**Mouse Move Image** drops pictures behind the pointer as it moves. Add one row per picture in **Image List**; each row has its own **Width**, **Offset X** and **Offset Y**.

![Image List repeater open in the Mouse Cursor widget with a trail image chosen](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-move-image.webp)

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Duration** | How long each picture takes to fade away, in seconds. | 1 (0.1–5) |
| **Distance Threshold** | How far the pointer must travel before the next picture is dropped. A higher number means fewer pictures. | 50px (10–200) |
| **Swipe Effect** | Starts each picture slightly behind the pointer, in the direction it came from. | No |

![Duration and Distance Threshold sliders for the Mouse Move Image cursor type](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-move-image-opts.webp)

With three pictures in the list, nine quick pointer jumps left seventeen pictures on screen at once, each one picked at random from the list; after three and a half seconds of stillness they had all been removed. Twelve five-pixel nudges with **Distance Threshold** at 200 produced none at all.

![Web page with a trail of coloured cards left behind the pointer by the Mouse Move Image cursor type](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-result-move-image.webp)

## Styling

The **Style** tab changes depending on the **Type** you picked.

- **Follow Text** — **Text Padding** (10/15/10/15px), **Typography**, **Text Color**, **Background**, **Border**, **Border Radius** and **Text Box Shadow**.- **Follow Text** with **Cursor Area** set to **Widget** — a shorter section with only **Text Size** and **Text Color**.- **Follow Circle** — **Normal** and **Hover** tabs with colours, stroke widths, **Transform CSS** and **Transition Duration**.

![Style tab of the Mouse Cursor widget showing the Follow Text section](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-follow-text-style.webp)

## How It Behaves

- The widget renders nothing in the Elementor editor. Preview or publish the page to see the cursor.- Everything is switched off when the browser window is **991px or narrower**. At 992px and wider it works. The check runs once on load and is not repeated when the window is resized.- The test is the window width, not the device. A 1,200px-wide touch device still got the effect; a 390px phone got nothing.- The widget loads one stylesheet and one script, and only on pages that use it. **Mouse Move Image** also needs GSAP.

## Limitations

- The widget is Pro only. With the Pro plugin switched off it disappears from the editor, and a page that already uses it simply has no cursor effect — there is no notice.- Nothing happens at 991px wide or below, so phone and most tablet visitors never see the effect. Do not use it to carry information.- **Mouse Cursor Click** swaps the cursor when the pointer is over a link, not when the visitor clicks.- **Column** and **Section** only work on pages still built with the old Elementor sections and columns. On a container page they do nothing.- **Progress Cursor (Body)** draws its ring but the ring never fills as you scroll in this build. See the [progress cursor page](https://theplusaddons.com/docs/add-a-progress-cursor-in-elementor/) for what it does do.- A custom cursor image replaces the pointer everywhere in the area, so visitors lose the usual visual clue that something is a link. Keep the image small and keep your links obvious in other ways.

## Troubleshooting

### Nothing happens in the editor

That is expected. The panel note says *This widget works only at frontend*. Use **Preview Changes** or open the published page.

### It works on my laptop but not on my phone

Also expected. Every effect is disabled at 991px and below.

### The cursor applies to the whole page when I only wanted one section

Change **Cursor Area** from **Body** to **Container**, and make sure the widget is inside the container you mean.

### My custom cursor image does not show

Keep the image small — a large one may be ignored by the browser — and use a format with transparency so it sits cleanly over your content.

## Related Docs

- [Change the mouse cursor for a container](https://theplusaddons.com/docs/change-the-mouse-cursor-for-a-container-in-elementor/)- [Change the mouse cursor for a widget](https://theplusaddons.com/docs/change-the-mouse-cursor-for-a-widget-in-elementor/)- [Add a follow circle cursor](https://theplusaddons.com/docs/add-a-follow-circle-cursor-in-elementor/)- [Add a blend cursor](https://theplusaddons.com/docs/add-a-blend-cursor-in-elementor/)

## Frequently Asked Questions

**Q: Why does the custom cursor not show in the Elementor editor?**
A: The Mouse Cursor widget only works on the frontend, so the Elementor editor itself stays blank. That is normal for The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH. Use Preview Changes or open the published page to test it. If the Pro plugin is switched off, the widget also disappears from the editor and any existing cursor effect stops on the live page.

**Q: How do I make a custom cursor affect only one section instead of the whole page?**
A: Set Cursor Area to Container and place the Mouse Cursor widget inside the container you want to target. Body applies the effect across the whole page, while Container limits it to that container only. On container-based pages, Column and Section do nothing, so Container is the safer choice when you want a local effect without changing every pointer on the page.

**Q: What is the difference between Cursor Icon and Follow Image in Elementor?**
A: Cursor Icon replaces the pointer itself, either with a built-in browser cursor or your own image. Follow Image keeps the normal pointer and adds an image that trails behind it. That difference matters because Cursor Icon changes how links feel everywhere inside the area, while Follow Image preserves the standard pointer cue and adds motion on top of it.

**Q: Why does Mouse Cursor Click change on hover instead of on click?**
A: Mouse Cursor Click is really a hover swap. The second image appears while the pointer is over an  element, then switches back everywhere else. That means it is useful for link states, not actual click feedback. If you leave the toggle on without choosing a second image, nothing changes at all.

**Q: What are the best settings for a mouse move image effect?**
A: Distance Threshold controls how often new pictures get dropped, so higher values create fewer images and lower values create more. Duration sets how long each picture fades out, from 0.1 to 5 seconds, with 1 second as default. Swipe Effect starts each picture slightly behind the pointer. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also notes that Mouse Move Image needs GSAP.

**Q: Why does a custom cursor work on my laptop but not on my phone?**
A: That is expected because every cursor effect turns off at 991px wide or narrower. The check happens once when the page loads and does not run again after resizing. A 1,200px-wide touch device can still show it, but a 390px phone will not. Since phone and most tablet visitors never see it, this effect should not carry important information.