How to Change the Default Cursor on the WordPress Site with Elementor (Without Add-on)

Updated: October 8, 2022

As a movable indicator on a computer screen, the cursor shows the point where work is being done. You can move the cursor either by using the mouse or the touchpad. By default, the cursor shapes an arrow and an index finger when we point to the clickable object. Luckily, with Elementor, you can easily change the default cursor on your WordPress site with any shape you want.

How to Change the Default Cursor using Elementor Pro (Without Add-on)

Before continuing the tutorial, we would like to ensure that you already have Elementor Pro because you need the Custom CSS feature, only available on Elementor Pro. Well, let’s get started!

First, you need to upload your favorite cursor in a PNG or SVG format to your Media Library. On your WordPress Dashboard, go to Media -> Add New. Make sure the maximum size has a 100-pixel weight and height. This example uses a PNG file with dimensions 32 by 32 pixels.

Once you have finished uploading your file, don’t forget to copy the link by clicking the Copy URL to the clipboard button.

How to Change the Default Cursor on a Single Page

This method will affect and inherit only on a page you’re editing.

Go to your Elementor editor; you can create a new page or open your existing page. Click the Page Settings button (⚙️) and then go to the Advanced tab. Next, click the Custom CSS; on the Custom CSS field, type the following CSS below:

html{
cursor: url('paste your link here', auto

Voilà, now your cursor has changed. Feel free to experience many cursors and find the best cursor for your site (shapes, size, etc.).


How to Change the Default Cursor on the Entire Site

Next, we will change the default cursor for the entire site.

Go to your Elementor editor; you can create a new page or open your existing page. On the Elementor settings panel, click the hamburger menu, then click the Site Settings menu.

Once you click the Site Settings menu, you will see that the header is blue. It indicates that you’re editing globally throughout the web, not only on a page. Scroll down and click the Custom CSS button.

Write the following CSS (same as you do on the first method) below:

html{
cursor: url('paste your image URL here', auto

Now the cursor has changed, don’t forget to click the UPDATE button to save the progress, and the changes will be inherited entire site.

The Bottom Line

This tutorial shows how to easily change the default cursor on your WordPress site using Elementor. You can change the cursor as your preference. But, we would like to remind you that any cursor you choose doesn’t let over the functionality.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.