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

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 our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to start a profitable blog with WordPress? OF COURSE!

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Haven’t used Elementor Pro yet?
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.