Do you want to add a follow circle cursor in WordPress? This type of cursor displays a circle that follows mouse movement, creating a visually engaging touch that increases the interactivity of your website.
With the Mouse Cursor block from Nexter Blocks, you can add a circle that follows the mouse cursor on your WordPress website and customise its style, size, and hover behaviour directly in the block editor.
To check the complete feature overview documentation of the Nexter Blocks Mouse Cursor block, click here.
Requirement – This block is a part of Nexter Blocks, make sure it is installed and activated to enjoy all its features.
To do this, add the Mouse Cursor block to the page and follow the steps:
1. Select the appropriate cursor area from the Cursor Area dropdown. This controls which part of the page the circle cursor is active on. Use this when you want the cursor effect only on a specific section rather than the entire page.
2. Then select Follow Circle from the Type dropdown.
3. From the Circle Cursor Type section, select the pointer type. You will find two options:
- Predefined – To add a preset icon as the cursor. Use this for a quick setup when you want a standard icon that matches the block’s built-in styles.
- Custom – To use a custom image file as the cursor. Use this when you want to match the cursor to your brand or use a unique graphic.
Different options will appear depending on your selection. For this example, select Predefined.
4. From the Select dropdown, choose the cursor icon you want to display inside the circle.
5. From the Circle Style section, select the circle type. You will find three options:
- Border – Displays a circle with a visible border outline around the cursor. This is the most common choice for a clean, minimal cursor effect.
- Progress – Creates a progress circle cursor that animates as the page scrolls. Use this on long-form content pages where you want to show reading progress.
- Blend – Creates a blend circle cursor that uses a CSS blend mode to invert or mix colours against the background. Use this for creative or portfolio sites where a high-contrast cursor effect adds visual interest.
Select the option that matches your design. For this example, select Border.
From the Circle Max Width and Circle Max Height sections, set the width and height of the circle. Increase these values if you want a larger circle that is more noticeable on wide desktop screens.
Adjust the circle’s position offset from the mouse pointer using the Cursor Left Offset and Cursor Top Offset sections. These control how far the circle sits from the actual cursor position.
From the Circle Z-Index section, set the stacking order of the circle. Increase this value if the circle does not appear above other elements on the page.
In the List of Tags for Hover Effect section, add the HTML tags on which you want the cursor hover effect to activate. This lets you trigger a visual change in the cursor when the visitor hovers over specific elements such as buttons, links, or headings.
Note: You can add multiple tags separated by a comma (,) and you have to add transform CSS for the hover effect in the Style tab.
Style the circle further from the Style tab to control its colour, border, opacity, and transition speed.
Once configured, you will see the circle following the mouse cursor on the page.
