To add a custom cursor in Elementor, install the free Ultimate Cursor plugin, choose a text, image, icon, shape or animated cursor, and save — it appears on every page, Elementor pages included, with no widget and no Elementor Pro. To use a cursor on one section only, give that section a CSS class and target it with Ultimate Cursor Pro.
Why a plugin instead of a widget
Ultimate Cursor adds the cursor to the page itself rather than through a widget. That has three practical benefits for Elementor users:
- No widget on every page. One setting covers the whole site, including headers and footers built with the Theme Builder.
- No editor clutter. The cursor doesn't load inside the Elementor editor, so it never covers handles or menus while you design.
- Builder-independent. If you ever move a page to the block editor, the cursor still works.
Add a cursor to the whole site (free)
- Install and activate Ultimate Cursor.
- Open Ultimate Cursor in your WordPress dashboard (not inside Elementor).
- Choose a cursor type. For most Elementor sites a shape (circle or ring) or a subtle animated effect such as Bubble works best.
- Match the colours to your Elementor Site Settings → Global Colors.
- Click Save, then open any page in a new tab to see it.
Optionally add an animated background from the Background tab — Antigravity particles or a Light Pillar — behind the whole site.
Add a cursor to one section (Pro)
Use this for a portfolio grid, a hero, or a dark section that needs a lighter cursor.
- In Elementor, select the container or section → Advanced → CSS Classes and type
cursor-hero. - Update the page.
- In Ultimate Cursor, create a new cursor configuration (Pro).
- Set its target to the CSS selector
.cursor-hero. - Style it and Save.
The cursor now appears only while the pointer is over that section. You can keep a different, site-wide cursor everywhere else, because Pro runs several configurations at once.
Make it react to buttons
Elementor sites are full of buttons and image boxes. With Interactive Hover in Ultimate Cursor Pro the cursor can grow, glow, pull toward a button, and show a label such as "View" over an image box with a cursor-view class. See how to set up an interactive hover cursor.
Troubleshooting
| Problem | Fix |
|---|---|
| Cursor not visible while editing | Expected — open the page in a new tab or click Preview. |
| Cursor not visible on a live page | Clear your page cache (WP Rocket, LiteSpeed Cache, SiteGround Optimizer and others are supported) and check you're on a device with a mouse. |
| Cursor hard to see on a dark section | Use a contrasting border, or a separate configuration for that section (Pro). |
| Native pointer still showing over a widget | Some widgets set their own cursor CSS; remove it in the widget's Custom CSS, or target the widget with a Pro configuration. |
Free vs Pro for Elementor sites
| Free | Pro | |
|---|---|---|
| Cursor on every Elementor page | Yes | Yes |
| Text, image, icon, shape and 8 animated effects | Yes | Yes, with settings for every effect |
| Animated background | Yes | Plus motion, placement and targeting |
| Cursor on one section or widget | — | Yes, by CSS selector |
| Different cursors on different pages | — | Yes |
| Interactive Hover with labels | — | Yes |
Pro starts at $24.99 a year, or $74.99 lifetime, for one site.
Comparing options? Our round-up of WordPress custom cursor plugins includes Premium Addons' Elementor-only cursor.