In todays video tutorial I’m going over how to add a custom cursor to your Squarespace 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 Squarespace, if you need directions on how to add it to your DIVI 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 Squarespace site 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 Squarespace:
1. Create a graphic you’ll use your cursor. Make sure it’s around 30px by 30px and in JPG or PNG format.
2. Go to Design > Custom CSS
3. Copy and past code into Custom CSS section
4. Below the Custom CSS section (scroll down a little) select Manage Custom Files
5. Upload your custom cursor files here by either uploading or drag and dropping.
6. Scroll back up to where you pasted your code and click between the parentheses ( )
7. Then click the custom cursor file you just uploaded under Manage Custom Files. It should automatically copy and paste the link inbetween the parentheses.
8. Click save
9. Check out your page and see your new custom cursor!
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
