Custom cursor (per element)
The custom cursor itself is a site-wide feature — its style, size, colours, trail and click
effect all live in one place; see
Custom cursor settings for that side of it. This
page is about what you can do per element, once the site-wide cursor is turned on: plain HTML
attributes (no data- prefix) that change what the cursor shows while it's over a specific
element.
With the site-wide feature switched off, these per-element controls don't even appear in the builder, and the attributes do nothing on the front end.
The custom cursor never runs on touch devices, below the site's configured minimum screen size, in wp-admin, or inside the Bricks/Etch builder canvases. Always check it on the published front end, with a mouse.
See it live: Custom cursor on fancyanimations.com.
Attributes
| Attribute | Effect while the pointer is over the element |
|---|---|
| Cursor text | The cursor grows and shows this text |
| Text size | Overrides the site default text size, in px |
| Text box size | Overrides the cursor's box size while showing text, in px |
| Cursor image | The cursor shows this image instead of text |
| Image size | Overrides the site default image width, in px |
| Image aspect ratio | Overrides the site default ratio, e.g. 16 / 9 |
An image wins over text if both are set on the same element. Neither shows at all if the site-wide cursor style is set to dot-only. Links and buttons automatically get the site's hover effect — you don't need to set anything for that.
- Bricks
- Etch
- Gutenberg
Style tab → Custom Cursor: Cursor text, Text size, Text box size, Cursor image (pick from the media library or paste a URL), Image size, Image ratio. Size and box fields only have any effect once the matching text/image field is also set.
Set the attributes directly on the element from the Fancy → Cursor panel.
With the site-wide feature on, the block sidebar's Custom Cursor panel has the same text/ image/size/ratio fields, saved as the attributes above.
Site-wide targeting selectors
These three selectors are configured once, site-wide (see Custom cursor settings) — add the matching class to any element you want to opt into them:
| Default selector | Add this class to… |
|---|---|
.cursor-invert | A dark section, so the cursor switches to its inverted colour scheme there |
.disable-cursor (inputs and textareas are already excluded by default) | An element where the native system cursor should show instead |
.disable-hover-cursor | A link or button that shouldn't trigger the cursor's hover effect |
Always confirm the site's actual selectors in Custom cursor settings before relying on these defaults — they're fully editable per site.
Video walkthrough
Common problems
- Nothing happens while testing in the builder. The custom cursor never loads inside the Bricks or Etch canvas by design — test on the front end, on a desktop with a mouse.
- The cursor disappears entirely over a form field. Inputs and textareas are excluded from the custom cursor by default, on purpose.
- An attribute seems to do nothing. Double-check it has no
data-prefix — these are plain HTML attributes, notdata-*attributes.