Cursor settings live in Theme → Cursor. They show in Preview and on the live site, only on computers with a mouse. They don't run while you edit, so switch to Preview to try them. (For the text-character trail behind a section's background, see How to add a cursor trail.)
How to add a custom cursor
- Open Theme > Cursor and turn on Custom cursor.
- Choose the Type: Dot, Ring, Icon or Picture.
- For an icon, click Choose icon…. For a picture, pick a small PNG or SVG with a see-through background.
- Set the options below, then click Preview to try it.
Custom cursor settings
- Color (Ring color for a ring, Icon color for an icon): defaults to the Primary theme color.
- Size: 10 to 40 px. Default 20.
- Invert blend: on by default. The cursor inverts the colors under it, so it shows on light and dark backgrounds.
- Grow over links & buttons: makes this cursor bigger over every link and button, including buttons that don't have a link yet. 1× to 4×; at 1× it's off.
- Glow on click: a soft glow in the cursor color when someone clicks.
- Hide the normal pointer everywhere: hides the normal arrow, also over links and buttons. It's never hidden over text fields.
Cursor effects
Effects work with or without a custom shape.
- Label over buttons & links: a small label follows the pointer over buttons and links. Label text is "View" by default (up to 24 characters). To give one button its own label, select it and fill in Cursor label under Design → Animations & Effects, just below Hover effects.
- Trail: fading dots follow the pointer. Trail length sets how many, 4 to 20. Default 10.
- Magnetic buttons: every button pulls toward the pointer as it gets close, whichever way the button is lined up and however the page is scrolled or zoomed. Strength sets how far, 10 to 60%. A button's own Magnetic pull setting still works too.
A different cursor on one page
- Open Pages, click a page's ⋯ menu and choose Page settings.
- Open the General tab. Under Cursor, choose:
- Inherit: uses the site-wide cursor setting.
- Override: use a different cursor and effects on this page (the same settings as above).
- Disable: no custom cursor on this page.
- Click Save.
See Pages panel for the rest of Page settings.
Examples
- A photographer's portfolio: a white Ring with Invert blend on, Grow over links & buttons at 2.5×, and Label over buttons & links saying "Open".
- A playful kids' brand: an Icon cursor (a star) in the brand yellow with Glow on click.
- A calm checkout page: keep the site's custom cursor everywhere, but set the checkout page to Disable.
- A bold call to action: Magnetic buttons at 40% so buttons lean toward the pointer.
Limits and what it can't do
- Computers with a mouse only. Phones and tablets keep the normal touch behavior.
- Effects don't run on the editing canvas; use Preview.
- Visitors whose device asks for less motion don't see the trail, label or magnetic pull.
- A Pause motion button is added automatically to any page with cursor effects. Choose where it sits in Theme → Motion.
Good to know
- The normal pointer always stays usable (unless you turn on Hide the normal pointer everywhere), and the text cursor still shows in form fields.
Who can use it
Agency people with the Mount Olympus tool. Client people need the Editor permission for the Theme panel and Page settings.
Troubleshooting
- I can't see my custom cursor: cursor effects don't run while you edit. Click Preview. On a phone or tablet they never show.
- The cursor doesn't show on one page: that page's Page settings → General → Cursor is set to Disable, or to Override with different settings.
- The cursor disappears on white areas: turn on Invert blend, or choose a color that contrasts with the page.
- The label says "View" on every button: change Label text, or give a button its own Cursor label in Design → Animations & Effects.
- Effects stopped on my own computer: you may have clicked Pause motion on the site (it's remembered), or your device is set to reduce motion.