How To Add Custom Cursor to DIVI Site with CSS (Easy) #customcursor #divi #wordpress #csstricks

hello uh this is marcy from dragonfly avenue um today i'm going to show you how to add a custom cursor like this dragonfly um into your divi wordpress website with a little bit of code um so i have since i already have this on mine i'm gonna actually use my other site to add a cursor so our regular cursor should like this like pointer right here um and we are going to change that so we're gonna go to the back end dashboard and go down here to theme options okay um and here under custom css we're gonna do um we're gonna add this code so just copy and paste this code um it will be on my blog post if you're on the blog post scroll down a little um okay and then you can save um then i'm gonna go to where am i going um oh media and add new and you are going to i'm going to add these two so um these are going to be the cursors um when you are designing the cursor make sure it's around 30 by 30 pixels it can be slightly bigger but i should you know keep it small um okay go to edit and you want to copy this file url so just copy the clipboard and then let's go [Music] back down to divi theme options again scroll all the way down and right between these parentheses you're gonna paste that in and then just hit save so this is just for the main cursor um and then let me see if i can open this up and now you can see like this m as a cursor which is kind of cute um okay now as you can see uh the cursor kind of changes when you're gonna hover to again the same one that there was before if you want to change the um cursor for a hover effect we're gonna go back here i'm going to grab this purple one because i want to see it actually like change again we'll copy oh wait yes in a second um we're gonna go to theme options one more time scroll down um we're gonna grab this code where it says hover paste that in and then let me just go back here again copy url again this is like the image that you want chosen to copy that link and then paste it again hit save and then let's see how this looks so now you have this m and when you hover it changes colors so it's kind of cool um again you can do kind of whatever you want with it like you'll see um like the hover effects and everything my site is like fairly simple um but it's cute and it works so now you have like the custom cursor add the code i will say one thing to note is um and that i would be a bit cautious of when you're doing the hover is sometimes depending on the actual cursor or whatever you're putting it it can at times make it difficult to um like click the link and so just make sure that you're testing especially the hover feature that it still allows you to easily click all the links without having any issues um primarily for like user experience and things like that so just double check that um but if you're all good then like i see go for it um on my dragonfly avenue one like i don't have any like major like all my links change back to the normal so you should have that so just keep that in mind but that is how you have a cursor you can have you can again um upload any image so it could be like your brand logo your letter your color like a circle like whatever it is that you want um just go for it and have fun um again blog uh the blog post contains all the code that you can just copy and paste and then if you have any questions or comments feel free to leave that below and don't forget to check out dragonfly avenue.com and also follow along for more tips and tutorials and resources awesome thanks bye

Channel: Dragonfly Ave

Views: 1,001

Keywords: DIVI, wordpress, custom cursor, tutorial, how to, elegant themes, dragonflyave, css tricks

Id: aSnI2pzw5DY

Length: 6min 12sec (372 seconds)

Published: Tue Jan 26 2021