---
title: "How to Add a Custom Cursor in WordPress?"
url: https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/
date: 2024-12-16
modified: 2026-04-14
author: "Aditya Sharma"
description: "Sometimes the default cursor might not match your website's design aesthetic. In such cases, adding a custom cursor can enhance the overall user experience and make your website more unique..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Custom-Cursor-in-WordPress_-1024x519.jpg
word_count: 623
---

# How to Add a Custom Cursor in WordPress?

## Key Takeaways

- Nexter Blocks includes a Mouse Cursor block that allows users to add a custom mouse cursor to their WordPress website.
- The Mouse Cursor block offers multiple cursor types, including cursor icon, follow text, follow image, and follow circle.
- Users can target a custom cursor for specific areas such as body, row, column, or block using the Cursor Area feature.
- The Mouse Cursor block requires the PRO version of Nexter Blocks to be installed and activated.

Sometimes the default cursor might not match your website's design aesthetic. In such cases, adding a custom cursor can enhance the overall user experience and make your website more unique and visually engaging.

With the Mouse Cursor block from Nexter Blocks, you can easily add a custom mouse cursor to your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-custom-cursors/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Mouse Cursor block is activated, to verify this visit Nexter → Blocks → and Search for Mouse Cursor and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=2_Z0ZN4jvvc&t

## How to activate the Mouse Cursor Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name** **and** turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/mouse-cursor-activation-new-1.png)

## Key Features

- **Cursor Area** - You can target a custom cursor for a column, section, container, widget and body.

- **Multiple Cursor Types** - You can choose from multiple cursor types such as cursor icon, follow text, follow image and follow circle.

- **Two Pointer Type** - You can use predefined icons or custom images as a mouse pointer.

## How to Use the Mouse Cursor Block?

Add the Mouse Cursor block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/mouse-cursor-design-type-1024x191.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

By enabling the **Backend Design Box** toggle, you can see the custom cursor in the backend.

From the **Cursor Area** dropdown, you have to select the area where you want to add the custom cursor. Here you’ll find five options - 

- **Body** - This will change the mouse cursor for the entire body.

- **Row** - To [change the mouse cursor in a row](https://nexterwp.com/docs/change-the-mouse-cursor-for-a-row-in-wordpress/) only. This will only work with the Container block of Nexter Blocks.

- **Column** - To change the mouse cursor in a column only. This will only work with the Container block of Nexter Blocks.

- **Block** - With this option, you can [change the mouse cursor for a block](https://nexterwp.com/docs/change-the-mouse-cursor-for-a-block-in-wordpress/) only.

Select the option as per your requirements, let’s select the Body here.

Then from the **Type** dropdown, you have to select the cursor type. Here you’ll find four options - 

- **Cursor Icon** - To use an icon or image as a cursor.

- **Follow Image** - To [create a follow image cursor](https://nexterwp.com/docs/add-a-follow-image-cursor-in-wordpress/).

- **Follow Text** - To [create a follow text cursor](https://nexterwp.com/docs/add-a-follow-text-cursor-in-wordpress/).

- **Follow Circle** - To [create a follow circle cursor](https://nexterwp.com/docs/add-a-follow-circle-cursor-in-wordpress/).

Select the option as per your requirements, let’s select the Cursor Icon here. 

From the **Icon Type** section, you have to select the icon type. Here you’ll find two options - 

- **Predefined** - To add predefined icons.

- **Custom** - To use a custom image as a mouse cursor.

You’ll find different options to add the cursor based on your selection. Let’s select Custom here.

In the **Cursor Icon** section, you have to add your image.

Then, by enabling the **Mouse Cursor Click** toggle, you can add a different mouse cursor image for click.

## How to Style the Mouse Cursor Block?

To style the Mouse Cursor block, you’ll find all the options in the Style tab. 

**Follow Text** - You’ll see this option only when the Follow Text type is selected. From here, you can style the cursor’s follow text.

![](https://nexterwp.com/wp-content/uploads/2024/12/mouse-cursor-style-new.png)

**Follow Circle** - You’ll see this option only when the Follow Circle type is selected. From here, you can style the cursor’s circle. You’ll see different styling options based on the selected follow circle style.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Mouse Cursor block doesn't activate?**
A: If the Mouse Cursor block isn't activating, ensure that the Nexter Blocks plugin is installed and that you have the PRO version. You can check this by going to Nexter u2192 Blocks, searching for the Mouse Cursor block, and turning on the toggle. If the block is still not active, verify that the default WordPress Block editor is enabled.

**Q: What are the best practices for styling the Mouse Cursor block?**
A: When styling the Mouse Cursor block, consider the type of cursor you choose. For instance, if you select the Follow Text type, you can customize the follow text's appearance. Always ensure that the cursor style complements your website's design for a cohesive look. Explore the Style tab for various options to enhance the cursor's visual appeal.

**Q: What types of custom cursors can I create with the Mouse Cursor block?**
A: The Mouse Cursor block offers multiple cursor types, including cursor icon, follow text, follow image, and follow circle. This variety allows you to select a cursor that best fits your site's aesthetic. For instance, using a follow image cursor can create an engaging interactive experience for users.

**Q: How can I import a preset template for the Mouse Cursor block?**
A: To import a preset template for the Mouse Cursor block, click on the Import Pre-Designed Template button after adding the block to your page. This feature allows you to quickly customize the cursor layout without starting from scratch, saving you time while ensuring a professional look.

**Q: Does the Mouse Cursor block work with other page builders?**
A: The Mouse Cursor block is designed primarily for the Gutenberg Block editor. While it is built for WordPress, it also supports Elementor and Bricks, but its full functionality is best utilized within the Gutenberg environment. If you're using other builders, you may not have access to all features.