Cursor Effects

How to use Cursor Effects Extension of Sky Addons for Elementor

The Sky Addons Cursor Effects extension replaces the plain arrow pointer with a custom cursor that follows the visitor around the page — a small dot with a trailing ring, a text label, an icon, an image or even a looping video. What sets it apart is that the cursor reacts: it grows over links and buttons on its own, and you can tell it to swap into a “View” label over your portfolio images, pull magnetically toward a call-to-action button, or disappear entirely over a map. Set it once in Site Settings and it applies to every page, post, archive, search result and 404 page on your site — then override it on any single page, switch it off there, or give one container a cursor of its own. This documentation will guide you through enabling and configuring the Cursor Effects extension on your website.

Features:

1. Three levels of control — a site-wide cursor from Site Settings, a page-wide cursor from Page Settings that overrides it (or turns it off for that page), and a container-specific cursor that takes over inside that section only
2. Five trail types — a classic Ring, a Text label, an Icon, an Image or a muted looping Video
3. Four hover reactions — Grow Cursor, Show Text, Magnetic Pull and Hide Cursor — mapped to any element you choose
4. Automatic reaction on links, buttons and form fields with no setup at all
5. Blend modes — Difference and Exclusion give the colour-inverting cursor seen on award-winning agency sites
6. Adjustable follow speed, from a snappy pointer to a lazy trailing orb
7. Performance-minded — images and videos are only downloaded once the visitor moves the mouse, and the effect never loads on touch devices or for visitors who prefer reduced motion

Enable the Cursor Effects Extension

The Cursor Effects extension ships with Sky Addons Pro — there is nothing to install. You only need to decide where the cursor applies: to the whole website, to one page, or to a single container. The three levels stack, and the most specific one always wins — a container cursor beats a page cursor, and a page cursor beats the site-wide one.

For the whole website (recommended):

1. Open any page in the Elementor Editor
2. Click the hamburger menu at the top-left of the panel and choose Site Settings
3. Pick Cursor Effects from the settings list (marked with the Sky Addons icon)
4. Toggle the Enable switch on, configure it, then click Save Changes
5. The cursor now runs everywhere — every page and post, plus blog archives, search results and the 404 page. Reload the preview to see it on the canvas.

For one page only:

1. Open the page in the Elementor Editor
2. Click the settings gear at the bottom-left of the panel to open Page Settings
3. In the Settings tab, open the Cursor Effects section (marked with the Sky Addons icon)
4. Toggle the Enable switch on, then save the page and reload the preview to see it
5. Whatever you set here replaces the Site Settings cursor on this page. To have no cursor on this page instead, leave Enable off and turn on Disable Site Cursor at the top of the same section.

For a single container:

1. Select the container in the Elementor Editor
2. In the Advanced tab, open the Cursor Effects section
3. Toggle Enable on — changes preview live on the canvas
4. The container’s cursor takes over whenever the pointer is inside it, and the page cursor returns as soon as the pointer leaves

Configure the Cursor

The cursor is always made of two parts: a small dot that tracks the pointer precisely, and a trail that lags behind it. The Cursor tab decides what that trail is and how it behaves.

1. Cursor Trail – Choose what follows the dot. Ring is the classic outlined circle. Text shows a small label such as “Scroll” or “Explore”. Icon uses any icon from the Elementor icon library, including your own SVG uploads. Image and Video attach media to the pointer, which suits portfolios and showreels.
2. Text / Icon / Image / Video – The matching input appears once you pick a trail type. For video, keep the file short and small — it plays muted on a loop.
3. Follow Speed – How quickly the trail catches up with the pointer. Lower values give a lazy, floating orb; higher values make it stick close to the dot.
4. Hide Native Cursor – Removes the system arrow so only your custom cursor is visible. Recommended for a fully custom look, but keep it off if your visitors rely on the standard pointer shapes.
5. Blend Mode – Difference and Exclusion make the cursor invert whatever is beneath it, so a light dot turns dark over white backgrounds and light over dark ones. This is the trick behind the colour-shifting cursors on high-end agency sites.

Set Up Interactions

A cursor that never changes is decoration. The Interactions tab is what turns it into a guide, telling visitors what is clickable and what is worth a look.

1. React to Links & Buttons – On by default. The cursor grows whenever it passes over a link, a button or a form field, with no configuration at all.
2. Grow Scale – How much the cursor grows when it reacts. A value of 2.5 means two and a half times its normal size.
3. Hover Targets – A repeater where you decide which other elements the cursor reacts to, and how. Each item is one rule.

Using Hover Targets

A Hover Target says: when the cursor is over these elements, do this. You identify the elements with a CSS class you assign yourself, so the rule can cover one image or fifty at once. Here is the complete flow for the most common case — a portfolio grid where the cursor becomes a “View” label.

1. Select the element you want to react to — for example an image widget in your portfolio grid
2. Go to its Advanced tab and type a name of your choice into CSS Classes, such as my-work. Repeat for every element that should behave the same way, using the same name.
3. Back in the Cursor Effects Interactions tab, click Add Item under Hover Targets
4. In Target (CSS Selector) type .my-work — note the leading dot, which means “class”. For an element ID you would write #hero instead.
5. Choose the Reaction and, for Show Text, type the words you want — for example “View”
6. Save and preview. Hovering any element carrying that class now triggers the reaction.

The four reactions and where each one earns its place:

1. Grow Cursor – The cursor scales up. Use it on cards, images and anything clickable that is not a standard link or button.
2. Show Text – The cursor becomes a text chip. Perfect for “View” over portfolio items, “Drag” over sliders, or “Play” over a video thumbnail.
3. Magnetic Pull – The target element leans toward the cursor as it approaches, then springs back. Save it for one or two key call-to-action buttons — used everywhere it becomes noise.
4. Hide Cursor – The custom cursor disappears over that element. Useful for embedded maps, video players and forms where the standard pointer is more helpful.

If you would rather not manage a list of rules, you can also set the reaction directly on an element. In that element’s Advanced tab, under Attributes, add data-sa-cursor-text|View to show a “View” label, or data-sa-cursor|grow and data-sa-cursor|hide for the other two behaviours. This needs no Hover Target entry at all.

Style Your Cursor

The Style tab holds the appearance controls, grouped by the part of the cursor they affect. Options that do not apply to your chosen trail type stay hidden, so you only ever see what is relevant.

1. Dot:
   Colour and size of the small dot that tracks the pointer exactly. Keep it small — this is the part that acts as the real pointer.
2. Ring:
   Colour, size and border thickness of the trailing circle, shown when the trail type is Ring.
3. Cursor Text:
   Typography, colour, background, border, padding and border radius of the text chip. These apply to the Text trail type and to every Show Text reaction, so styling it once covers both.
4. Icon:
   Colour and size for the Icon trail type. Note that uploaded SVG files keep their own colours — the colour control affects font icons only.
5. Media:
   Width, border radius and opacity for the Image and Video trail types. A generous border radius turns an image cursor into a soft floating thumbnail.

Because the cursor sits above the page rather than inside a section, its colours should be checked against every background it will travel over — or set a Blend Mode and let it adapt on its own.

Save and Preview

1. Click the Update/Publish button to save your changes
2. Preview the page on a desktop computer and move the mouse across your sections, links and hover targets to check every reaction

Best Practices

1. One cursor identity per site: a single well-styled cursor across the whole page reads as craft. Switching trail types between sections reads as an accident — reserve container-level cursors for genuinely different areas, such as a portfolio grid or a showreel section.
2. Keep the dot small and the trail soft: visitors still need to point accurately. The dot does the aiming; the trail does the personality.
3. Use Show Text to answer a question: the best labels tell visitors what happens next — “View”, “Drag”, “Play” — rather than describing what they are already looking at.
4. Keep media light: an image cursor should be a small file, and a video cursor a few seconds long. They load only after the first mouse movement, but they still have to download eventually.
5. Check contrast, or use Difference: a dark cursor vanishes on a dark section. Either verify it against every background or let Blend Mode handle it automatically.

Troubleshooting

1. Nothing happens on my phone or tablet: this is intentional. Touch devices have no pointer to follow, so the effect never loads there. It is also skipped for visitors whose system is set to reduce motion.
2. Site Settings or Page Settings changes are not showing: those cursors are built when the page loads, so save and reload the preview. Container-level changes update live on the canvas without a reload.
3. One page still shows the site cursor after I turned it off: make sure you used Disable Site Cursor in that page’s Page Settings. Simply leaving Enable off does not switch off the site-wide cursor — that is what lets an untouched page inherit it.
4. My Hover Target does nothing: check the selector punctuation — a CSS class needs a leading dot (.my-work) and an ID needs a hash (#hero). Then confirm the class is actually assigned in the element’s Advanced tab, spelled identically.
5. My icon is invisible: font icons need the icon font loaded on that page. If the page has no other icon on it, either upload the icon as an SVG or place any icon widget somewhere on the page.
6. The cursor sits behind a popup: the cursor is drawn above normal page content, but some popups and modals are stacked higher still. Hide the cursor over that area with a Hide Cursor target if it gets in the way.

Conclusion

The Cursor Effects extension gives your site the custom pointer that used to require a developer — and, more importantly, one that responds to what the visitor is hovering. Style the dot once, add a handful of Hover Targets, and every link, portfolio image and call-to-action starts guiding people through the page. If you run into anything this guide does not cover, the Sky Addons support team is happy to help.