A Web design studio for kind, badass humans

Creating unforgettable web design experiences that turn your website into a powerhouse online presence.

A Web design studio for kind, badass humans

Creating unforgettable web design experiences that turn your website into a powerhouse online presence.

Add A Custom Cursor To Your DIVI Website

Design

In todays video tutorial I’m going over how to add a custom cursor to your DIVI website with a little bit of CSS. But don’t worry, even though we’re adding a bit of code, it’s still easy to do. Adding a custom cursor to your website creates a more engaging experience, add a nice touch of branding and helps make your site unique and unforgettable. Again, this is for DIVI, if you need directions on how to add it to your Squarespace website, go here.

Affiliate Disclaimer: Please note this post contains affiliate links. If you go through them to make a purchase, I will make a commission at no cost to you. Thanks for your support!

Code Disclaimer: Please note that code can break upon updates or other errors can occur. If you are choosing to add this code, you are responsible for doing so & for any errors that may occur. Thank you.

Create your custom cursor

Before you start adding the code, you first need to create an image for your cursor. This can be anything you’d like but keep it fairly simple so it doesn’t overwhelm the entire experience. Keep the image / graphic size to around 30px by 30 px – it won’t work if it’s much bigger than that. Then export the graphic to be in PNG or JPG format.

 

Watch the video for How To Add A Custom Cursor to your DIVI Website below:

copy & Past Code below

 

For Cursor:

body {

margin: 0;

height: 100vh;

cursor: url(), auto;

}

 

For Cursor on Hover:

 a:hover{

cursor: url(), auto;

}

Here are the steps to add a custom cursor in DIVI:

1. Create a graphic you’ll use your cursor. Make sure it’s around 30px by 30px and in JPG or PNG format. 

2. Upload graphic into media on the WordPress Dashboard.

3. Go to Dashboard > DIVI > Theme Options and scroll down to Custom CSS

4. Copy and past code into the Custom CSS section 

5. Go back to your graphic / image in your media library and copy and past the URL. You can go to Dashboard > Media > *Select Graphic* > File URL link is on the lower right hand side > Copy to Clipboard

6. Paste the URL inbetween the parenthesis ( ) of the code

7. Click Save

8. Check your page and your cursor should be live! 

 

Tip: If you decide to add a cursor that works on hover, make sure you test it out. In some instances it makes clicking the links more difficult. If so, remove the hover code and keep the body cursor. 

Want some free custom cursor graphics?

I’ve created some free custom cursor graphics to get you started, so sign up to gain access to them in the digital library here. They are available in Adobe XD so you can easily customize to your liking by updating the colors and the font & letter (in the text option). If you don’t have Adobe XD, you can download it for free here. Enjoy!

 

Don’t Forget To

Pin Your Favorite

translate

Pin It on Pinterest