Do you want your site to be customised 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:
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 recognise. 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 .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.
3.3 - Customise your links
Now apply your class to some links within your text.
- Insert a link on your text, as usual.
- Switch the editor to "Text" mode
- Ajoutez votre classe CSS au sein de la balise <a> (balise de lien). Notez qu’ici on saisit <strong><em>class= »cursor-loupe »</em></strong> et non <strong><em>class= ».cursor-loupe »</em></strong>. Il convient donc de ne pas mettre le point « . » devant le nom de la classe.
That's it! Your mouse cursor is fully personalised when you hover over a link!
4 - Personalize 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.
Dans ce cas, vous n’avez pas besoin de créer de classe CSS, vous devez directement agir sur la balise HTML <a>.
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 the 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 delay! 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):
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:
- List of all natively available cursor states
- How to add a stylized and inverted slider to your Divi page
- Understand how to change the mouse cursor
- How to turn your cursor into a button when hovering over an item using Divi
- Change the mouse cursor only for your computer (not for your site)
- How to change an image on hover with Divi
Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme effectively with my Divi training !
0 commentaires