--- title: EB Custom Cursor description: "Step-by-step process of how to add a custom cursor in Gutenberg website with Essential Blocks." url: "https://essential-blocks.com/docs/eb-custom-cursor/" updated: "2026-10-15" category: Configurations --- # EB Custom Cursor Want your website to feel more interactive and memorable? With **[Essential Blocks](https://essential-blocks.com/)**, you can now add a **Custom Cursor** to any section of your Gutenberg page. Choose from eye-catching animated cursor effects like Neon Ribbon, Particle Comet and Aurora Field, or replace the default pointer with your own custom image. It's a simple way to make landing pages, portfolios and promotional sections stand out and keep visitors engaged, without writing a single line of code. ***Note:*** *Make sure you have Essential Blocks and* ***[Essential Blocks PRO installed and activated](https://essential-blocks.com/docs/install-activate-essential-blocks-pro/)*** *on your WordPress website.* ## **Step 1: Open the Custom Cursor Settings** Open the page you want to edit in the Gutenberg editor and select the block where you want the custom cursor to appear. In this example, we are using a **'Wrapper'** block. From the block settings panel on the right, go to the **'Advanced'** tab and expand the **'Custom Cursor'** section. Under **'Cursor Type'**, you will find two options: - **Cursor Effects:** Adds an animated cursor effect that follows the mouse inside the block. - **Custom Image:** Replaces the cursor with an image you upload. ![Custom Cursor Settings](https://essential-blocks.com/wp-content/uploads/2026/10/image-10.png) ## **Step 2: Configure Cursor Effects** To add an animated cursor, select **'Cursor Effects'** as the cursor type and follow the steps below. ### **Step 2.1. Enable the Cursor Effect** Toggle on **'Enable Cursor Effect'**. This activates the animated cursor for the selected block and reveals the effect settings. ![Enable the Cursor Effect](https://essential-blocks.com/wp-content/uploads/2026/10/image-11.png) ### **Step 2.2. Choose Your Cursor Effect** Click the **'Effect'** dropdown and pick the style that suits your design. You can choose from 12 effects: - Neon Ribbon - Particle Comet - Liquid Blob - Magnetic Grid - Smoke Ghost - Spirit Echo - Smoke / Fluid - Geometric Shards - Ripple Waves - Aurora Field - 3D Depth Tunnel - Tentacle Sync ![Different Cursor Effects](https://essential-blocks.com/wp-content/uploads/2026/10/image-14.png) ### **Step 2.3. Adjust Color And Motion Settings** Toggle on **'Auto Color Cycle'** to make the effect cycle through the full color spectrum instead of using a single chosen color. Then fine-tune how the effect looks and moves: - **Speed:** Controls how fast the effect animates. - **Size:** Sets how large the effect appears. - **Opacity:** Controls how transparent or solid the effect looks. - **Trail Length:** Sets how long the trail behind the cursor stretches. You can click the reset icon next to any setting to restore its default value. ![Adjust Color and Motion](https://essential-blocks.com/wp-content/uploads/2026/10/image-12.png) ### **Step 2.4. Set the Backdrop** The cursor effects are designed to look best on a dark background. From the **'Backdrop'** dropdown, choose one of the following: - **None:** Keeps your block content fully visible behind the effect. - **Solid:** Adds a solid backdrop to restore the effect's original look. ![Set the Backdrop](https://essential-blocks.com/wp-content/uploads/2026/10/image-13.png) ### **Step 2.5. Hide Or Show the Default Pointer** Toggle on **'Hide Default Pointer'** if you want only the cursor effect to be visible. This applies on the frontend only, so the editor keeps the normal pointer and your block stays easy to select. If you hide the default pointer, we recommend keeping **'Show Pointer on Links & Buttons'** enabled. This brings back the hand pointer over links and buttons inside the block, so visitors can still tell what's clickable. The effect only runs inside the selected block. It is automatically skipped on touch devices and for visitors who prefer reduced motion, so accessibility and mobile usability are not affected. ![Hide or Show Default Pointer](https://essential-blocks.com/wp-content/uploads/2026/10/image-16.png) ## **Step 3: Configure A Custom Image Cursor** If you'd rather use your own graphic, such as a brand icon or logo, as the cursor, select **'Custom Image'** as the cursor type. ### **Step 3.1. Enable And Upload Your Image** Toggle on **'Enable Custom Image Cursor'**, then click the image area to upload or select the image you want to use as your cursor. ![Upload Your Image](https://essential-blocks.com/wp-content/uploads/2026/10/image-15.png) ### **Step 3.2. Choose the Cursor Style** From the **'Cursor Style'** dropdown, choose how the image behaves: - **Native Pointer:** Replaces the system pointer with your image. Browsers cap this at 128px, so keep your image within that size. - **Follower:** Displays your image as a cursor that follows the mouse movement. ![Choose Cursor Style](https://essential-blocks.com/wp-content/uploads/2026/10/image-17.png) ### **Step 3.3. Set the Size And Hotspot** Adjust the following settings so your image cursor looks right and clicks accurately: - **Size (Px):** Sets the size of your cursor image. - **Hotspot X:** Sets the horizontal point inside the image that actually clicks. - **Hotspot Y:** Sets the vertical offset of the click point, measured from the top of the image. Setting the hotspot correctly matters. For example, if your image is an arrow, place the hotspot at the arrow's tip so clicks land exactly where visitors expect. ![Set the Size And Hotspot](https://essential-blocks.com/wp-content/uploads/2026/10/image-18.png) Once you're happy with the settings, click **'Publish'** or **'Update'** to save your changes. ## **Final Outcome** By following these steps, your block now displays an animated cursor effect or a custom image cursor whenever visitors hover over it on the frontend. ![How to Add a Custom Cursor with Essential Blocks?](https://essential-blocks.com/wp-content/uploads/2026/10/10.-Final-Outcome-1-scaled.gif) This is how, with the help of Essential Blocks' Custom Cursor, you can create a more interactive and engaging browsing experience on your website. Getting Stuck? Feel free to contact our **[Dedicated Support Team](https://wordpress.org/support/plugin/essential-blocks/)**.