How to customise the mouse cursor on your site?

Published on 19/10/2021 | 0 comments

Do you want your site to be personalised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised:

curseur souris personnalisé
Create your own mouse cursors

You can use emojis or even use your logo for a neat branding! Plus, it's so easy, even without any knowledge you'll achieve an immediate result in less than 5 minutes...

Let's go!

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Why customise the mouse cursor?

I think the coolest part of creating a website is customising the design. With a little imagination and some knowledge, you can do anything... It's also the goal of Divi Tips to give you all the keys to achieve this. However, there was one topic that hasn't been covered here yet: custom mouse cursors.

The good news is that the following tutorial is suitable for all sites: WordPress with or without Divi, and even non-WordPress sites!

So why customize your sliders? Simply to :

  • Leave no stone unturned,
  • to add some fun,
  • to create astonishment
  • and, if done well, to improve the user experience!

Here are 4 good reasons to implement this on your site.

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

2 - The video tutorial

To begin with, I suggest you watch the video that explains everything, then you will find the details in the rest of the article...

3 - Create your custom slider in 3 steps

You don't need any skills to create your own custom slider, but the hardest part is choosing the right image. Also, you will probably need image editing software to set the right size.

3.1 - Prepare your images

Don't forget that the image must have a transparent background to get a better rendering = use images .png.

If you want to use emojis, go to a site that allows you to download the emoji in PNG. Not all of them do, but I suggest Emojipedia.org.

You can use your logo(s).

The ideal size seems to be around 25px to 32px wide.

Once you have your images, you can upload them to your site's media library.

3.2 - Define your CSS classes

Now go to the Appearance > Customise > Additional CSS tab and add the code below to create your CSS class:

/* changer l'apparence du curseur */

.my-cursor {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

You can also create multiple CSS classes to use various custom sliders on your site, so it would look like this:

/* changer l'apparence du curseur */

.cursor-loupe {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

.cursor-licorne {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

.cursor-curieux {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

.cursor-fusee {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

Go here to find out more about adding code to your site.

Of course, don't forget to enter the URL of your image. To find it, go to the media library in "grid" mode, click on the image and then copy its URL to the clipboard. Then paste it into the code of your CSS class.

url des medias
Retrieve the image URL to customise your slider.

3.3 - Customise your links

Now apply your class to some links within your text.

ajouter classe css
Assign a CSS class to one of your links.
  1. Insert a link on your text, as usual.
  2. Switch the editor to "Text" mode
  3. Add your CSS class within the tag ( link tag). Note that here you enter class="cursor-loupe" and not class= ".cursor-loupe". It is therefore advisable not to put the dot "." in front of the class name.

That's it! Your mouse cursor is fully personalised when you hover over a link!

4 - Customize the cursor on all your links!

Another possibility is that you do not want to edit all your links to add a CSS class. You don't want to customise SOME of your links but ALL of them.

In this case, you do not need to create a CSS class, you must act directly on the HTML tag .

Go to the tab Appearance > Customise > Additional CSS tab and add the code below to change the slider throughout the site:

/* changer l'apparence du curseur sur tous les liens du site */

a {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

Now all links on your site will have a custom cursor on hover.

5 - Customise the cursor throughout the site (always visible)

Custom cursors can be fun, and I had a lot of fun myself. However, if you watched my video introducing theIrregular Choice site, you may have noticed that the mouse cursor was a magic wand and that it was different when hovering over the links.

If you want to change the mouse cursor throughout your site, even when the user is not hovering over the links, then you should use this code:

/* changer l'apparence du curseur sur tout le site */

* {
cursor:url(URL DE VOTRE IMAGE),auto;
}

But be careful, by doing this you reduce the user experience, as your visitor will not see any difference when hovering over the links and will not know if they can click, so you should set a cursor state for the whole site and a different state when hovering over the links (using 2 images) :

/* changer l'apparence du curseur sur tout le site (UX) */

* {
cursor:url(URL IMAGE 1),auto;
}

a {	
cursor:url(URL IMAGE 2),auto;
}

Now that's really custom 😉 !

Don't wait any longer! Discover the Divi theme here !

6 - Or, use an extension

Of course, there are also extensions that allow you to implement a custom slider within your site. You will certainly find more customisation options, but is it worth it? It's up to you to see (and test):

plugins custom cursor
Find all the custom slider extensions here.

7 - Take your cursors!

Well, that's it! With a little CSS, you can do great things, you know that! But there are also other ways to modify the mouse cursor on your site, notably in JavaScript...

To go further, here is a reading list:

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme efficiently with my Divi training !

1,140 words

5

You should like it too:

La bibliothèque des Snippets pour Divi

The Snippets Library for Divi

This article offers you a summary of code snippets that you can copy and paste into your site to fix some visual/graphical details. You'll love it!

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This