Custom Cursor & Interaction Effects

Documentation / Premium features

Premium

Custom Cursor & Interaction Effects

Adds a site-wide custom cursor (dot, ring or image, with trail and blend mode) set up under Elementor Extras → All Tools → Cursor & Effects, a per-page override in Page Settings, and an Interaction Effects section on every widget, container, section and column: cursor hover states, magnetic pull, spotlight, 3D tilt with glare, and image reveal on hover. Skipped on touch screens and for reduced-motion visitors.

Where Cursor: Elementor Extras → All Tools → Cursor & Effects, and Page Settings → Custom Cursor in Elementor. Effects: open any element in Elementor → Advanced → Interaction Effects.

How to use it

1. Turn on "Platform: Custom Cursor & Interaction Effects" under Settings → Add-on features.
2. For a custom cursor, open Cursor & Effects, tick "Replace the mouse pointer with a custom cursor", pick a shape (dot, ring, dot with a trailing ring, or image), size, color, follow speed, trail and blend mode, and choose every page or only pages that turn it on.
3. To change one page, open it in Elementor → Page Settings (gear icon) → Custom Cursor → On or Off for this page.
4. For effects, select a button, card, image or container and open Advanced → Interaction Effects. Turn on Magnetic, Spotlight, Tilt or Reveal image on hover and adjust the settings. The editor preview shows the effects as you change them.
5. Use "Custom cursor on hover" to make the cursor grow, show a label such as "View" or "Drag", or hide over that element.

Notes

• Touch screens and visitors who ask their device for reduced motion get the normal pointer and no effects. Text fields always keep the normal text cursor.
• The custom cursor never appears in the Elementor editor, so it cannot get in the way of editing. Preview the page to see it.
• Cursor labels are easiest to read with the Normal blend mode. Difference inverts everything under the cursor, including the label, which looks striking over empty areas but mixes with text underneath.
• Tilt and Magnetic move the element with a CSS transform. Avoid combining them with Elementor's Transform, Motion Effects or 3D Tilt on the same element; put the effect on a parent container instead.
• Magnetic moves the button inside a Button widget. To move another part, enter a CSS selector under "Part that moves". Spotlight works best on containers with a dark background.
• Developers: window.ltxeCursorEffects.scan( element ) starts effects on markup added after the page loads.