Thanks kaycinho this is exactly what i was looking for.. Can you please make more videos on elementor pros custom codes feature? Because i wanna know how to add javascript from cdn.. thanks
@@KayCinho sir i followed your video and got the same result which is awesome thanks for that.. but i want to report an issue i am facing.. issue is that it works great on desktop but it create horizontal scrollbar on mobile and tablet.. looking forward for help.. thanks
@@shashikantsingh6555 you're welcome ;) Now regarding the issue you have it may be something else on your page because the code has media queries so that it should not be applied on mobile and tablet. I just checked on my end and mobile version does not have horizontal scrollbars. Maybe try on a fresh install / very simple page?
Great Tutorial. Works like charm. But is there a way to get rid of the hand icon when you hover over a button or link? maybe to get it animated to indicate that this is a clickable item?
@@KayCinho I Had found Your Channel only like a month ago. Since then Youre my webdesign Superhero. Dropped my webdesign Career before it really started around 2012. Now im comming back. Crazy how satysfing that is 🙂 Cheers
Hey thank you for your video, question for the community: when hovering on buttons and CTAs I still see the old default cursor (the small hand with the finger up) how can I get rid of that?
Great tutorial! I found two other resources for creating a similar effect (one video, one blog) but neither one of them was as easy to follow yet still in-depth enough to understand the CSS and customize on our own. Big fan! Thank you!
Hi! I did everything as explained and the cursor does not show up.However it does show up once I set the text smaller on Chrome by using Ctrl - and set it to 90% or smaller. When I put it back to 100% it does not show up. Any ideas? It looks great BTW.
hello! No idea to be honest. I've used it on several websites and never got this behavior. Have you tried on a different browser (in private mode) to troubleshoot?
@@KayCinho I figured it out. The problem was in the first line on Step 3. I says: (min-width: 1367px). I just had to set it to lower px and it worked. I was using my 14" laptop so it did not work. Do you know what needs to be changed so the background is not dragging behind the dot so much?
Very nice tutorial and very easy to follow. Thanks. But I noticed a problem with the elementor custom code. As I installed it, it created a white gap on the top of my webpage. Do you have any idea why it happened or how to avoid/repair it?
Hi there! thank you for this cool mouse customization. I tried it and it works perfect with Chrome, but not on Firefox. On Firefox I can't see the mouse and it adds a big white space at the end of the page. Is there anything I can do to fix it? Thanks!
hey first of all should say thanks for all tutorial I have a problem in this tutorial, i did everything like video but mouse cursor steel show can u help me ?
I had the same problem, the old cursor showed above the custom cursor. After adding the code in Site Settings - Custom code as directed in this video, I added the code: selector .elementor-column-wrap { cursor: none; }
Great question ! i tried to add the CSS code to a specific Elementor section on the page, but it was applied to the whole page ! still looking for a solution too
Hi KAYCINHO, It was an amazing tutorial. Watched complete till end but will also watch while practicing. I have a query that in some websites the cursor is same but on hover over different elements, its background becomes inverted. Can you please explain how it's done. And once again thanking you for such a great tutorial. Hoping to see more tips and tricks from your channel about Elementor. Thanks, ALI FAWAD KHAN
hello Ali, glad you enjoyed it and thanks for the kind words! Actually you can do it with this tutorial by altering the css values of the respective cursor and pointer classes with ":hover". But yeah maybe an idea for a follow up to this tutorial 😀
Hi ! really nice work and huge tutorials... But I have an issu with the pointer... Below a resolution of 1366px I lose it ! Do you know why or do you have a solution ? Best regard
thank you for this! found a few hiccups though - 1. doesnt work on popups.... 2. if you resize the browser the cursor disappears unless you refresh the browser after resizing... 3. doesnt work on some windows laptops :/
Hi, kaycinho!! I am using the Elementor GPL version. I didn't see any custom code option on my Elementor. Is there any way to use this code on the Elementor GPL version?
Hey there! Thanks for your tutorials, I love them! I am having an issue where for links, the curor shows both the MagicMouse and the default hand. Is there a way to hide the default pointer globally to just show this custom one? Thanks!
@@aydesignart Oh ok… Generally the last rule takes precedence so there might be another !important indicating hand cursor somewhere after. I’m just presuming but also guess worth to take a look at it.
Did anybody manage to get it working on popups? The square hover doesn't work for me with popups for some reason. Thank you for the amazing tutorial by the way!
hii, sir it's not working on oceanwp and elementor. I had check each and everything I had watch your this video 15 Time. I follow each and every step. I have oceanwp and elementor pro premium. but it's not working may be have error in header js please check please 🥺🥺🥺
Hey there, I'm having an issue for displays smaller than min width: the magicPointer is not shown, but neither is the default cursor - so I have no pointer at all. Please help!
This is great Kaycinho! BUT when i try to save in elementor the js custom code i get this error message: "Unexpected token < in JSON at position 0". I have Elementor Version 3.5.5 & Elementor PRO Version 3.6.0. Any ideas? Thanks for sharing!
Love this video. Just one query - how do i give a class to a form button in elementor. I can give it an id can't give it a css class. how do i make that happen?
Why not put everything is one custom code, wrapping the css in style tags, and the other to in script tags, works like a charm, and all the code is in one single place!
Awesome video! You just got a new subscriber! Just one question. How can I change the color of the circle that appears above the menu? The CSS class of it is 'magic-hover'? Thank you!
hi great video! is there an option no make the pointer snappy? i would like to use only the pointer and not the circle around but would like it to be snappy? thanks in advance
Hey Kaycinho! great Tuto thank you so much for this. I was able to do it on 2 websites. however I have a white gap that now appears at the bottom of both websites. when i disable the magic option code. then the white gap disappear. any thoughts? much appreciate
Great Tutorial thanks!! I do want to know with this code who can we achieve mixed blend mode - difference setting and get black on white and vice versa mouse movement.
Thanks Jose! I guess anything is possible when it comes to the web but what you are looking for is on a whole different level - backend / software /web app stuff
@@KayCinho thanks for your answer. I investigated since I wrote you the comment and the web application I already have it, I am only missing some details, thank you very much
I had the same problem and after looking in all the comments here I got it. This is because when you are in the editor of elementor your website screen size is decreasing. You can skip the problem with either decrease the minimum screen size in the script or making smaller the elementor editor panel.
@@KayCinho btw as an experienced graphic designer who also creates websites, edit videos and do motion graphics. I think that your tittle: The Digital Alchemist is so cool
@@KayCinho Thanks, that’s works well. I put "z-index:10000000!important;" for "#magicPointer" too, because the red dot wasn't display on the popup menu. now it’s working well.
The website design shown in this tutorial initially came from this video: th-cam.com/video/0edlhTpfn9k/w-d-xo.html
Thanks kaycinho this is exactly what i was looking for..
Can you please make more videos on elementor pros custom codes feature?
Because i wanna know how to add javascript from cdn.. thanks
@@shashikantsingh6555 thanks for the kind words. Good idea for future videos ;)
@@KayCinho sir i followed your video and got the same result which is awesome thanks for that.. but i want to report an issue i am facing.. issue is that it works great on desktop but it create horizontal scrollbar on mobile and tablet.. looking forward for help.. thanks
@@shashikantsingh6555 you're welcome ;) Now regarding the issue you have it may be something else on your page because the code has media queries so that it should not be applied on mobile and tablet. I just checked on my end and mobile version does not have horizontal scrollbars. Maybe try on a fresh install / very simple page?
@@KayCinho you are right .. i should analyse my page .. thanks
Great Tutorial. Works like charm. But is there a way to get rid of the hand icon when you hover over a button or link? maybe to get it animated to indicate that this is a clickable item?
Nice finding. Thanks for this tutorial bruh :)
Happy to help
@@KayCinho I Had found Your Channel only like a month ago. Since then Youre my webdesign Superhero.
Dropped my webdesign Career before it really started around 2012. Now im comming back.
Crazy how satysfing that is 🙂
Cheers
Really nice video! But how can I use a custom icon for my cursor? Maybe a specific icon or something like that.
Hi! For some reason, cursor does show on chrome and firefox, but not on safari, what could be the problem? Got all my plugins/theme's updated
Hey thank you for your video, question for the community: when hovering on buttons and CTAs I still see the old default cursor (the small hand with the finger up) how can I get rid of that?
How to remove the default cursor in code? I keep seeing it when I move the mouse. Thank you
You website is not working. Can anybody please provide the code of this tutorial. It will be very helpful for me. Thanks in advance
Hi - Website shows "Account suspended" when browsing to the companion blog post.
This is awesome! thank you :) Works, but the original cursor doesn't go away, so I have both now. Any idea?
My pleasure! Have you cleared your cache? That would be the first step in troubleshooting.
Did you ever fix this? I'm running into the same issue :)
Nice, but can't change the red dot in the middle! any ideas?
Great tutorial! I found two other resources for creating a similar effect (one video, one blog) but neither one of them was as easy to follow yet still in-depth enough to understand the CSS and customize on our own. Big fan! Thank you!
Very good video! I would like to see more technical things like this with more Css and Js combine with elementor! Great again!
Glad you enjoyed it :) Yeah I like this kind of simple projects too
It not work in OCEANWP themes
Hi!
I did everything as explained and the cursor does not show up.However it does show up once I set the text smaller on Chrome by using Ctrl - and set it to 90% or smaller.
When I put it back to 100% it does not show up.
Any ideas?
It looks great BTW.
hello! No idea to be honest. I've used it on several websites and never got this behavior. Have you tried on a different browser (in private mode) to troubleshoot?
@@KayCinho I figured it out. The problem was in the first line on Step 3.
I says: (min-width: 1367px).
I just had to set it to lower px and it worked. I was using my 14" laptop so it did not work.
Do you know what needs to be changed so the background is not dragging behind the dot so much?
@@druckenpumpe thanks man. i had the same issue. thanks again.
Very nice tutorial and very easy to follow. Thanks. But I noticed a problem with the elementor custom code. As I installed it, it created a white gap on the top of my webpage. Do you have any idea why it happened or how to avoid/repair it?
the plugin is elementor pro
AMEEEEEI!!! Procurei por isso em muitos lugares, queria muito fazer isso. muito obrigada, ganhou nova seguidora
Hi there! thank you for this cool mouse customization. I tried it and it works perfect with Chrome, but not on Firefox. On Firefox I can't see the mouse and it adds a big white space at the end of the page. Is there anything I can do to fix it? Thanks!
You're welcome Sonia. Hard to say, I got it working on Firefox. Is it on a fresh intall?
hey
first of all should say thanks for all tutorial
I have a problem in this tutorial, i did everything like video but mouse cursor steel show
can u help me ?
be sure you add it to (body end )
I had the same problem, the old cursor showed above the custom cursor. After adding the code in Site Settings - Custom code as directed in this video, I added the code: selector .elementor-column-wrap { cursor: none; }
@@josephbibi2416 Thanks a lot!
Great tutorial thanks!!!
how can i use it on specific items and not on the entire site?
Great question ! i tried to add the CSS code to a specific Elementor section on the page, but it was applied to the whole page ! still looking for a solution too
Hi KAYCINHO,
It was an amazing tutorial. Watched complete till end but will also watch while practicing.
I have a query that in some websites the cursor is same but on hover over different elements, its background becomes inverted.
Can you please explain how it's done.
And once again thanking you for such a great tutorial. Hoping to see more tips and tricks from your channel about Elementor.
Thanks,
ALI FAWAD KHAN
hello Ali, glad you enjoyed it and thanks for the kind words!
Actually you can do it with this tutorial by altering the css values of the respective cursor and pointer classes with ":hover".
But yeah maybe an idea for a follow up to this tutorial 😀
@@KayCinho I will wait for the next tutorial but will do this with hover properties also.
Thanks Again
@@iamalifawad as Kay said just add a psuedo class ":hover" for example
.magicursor:hover {
background: #000;
}
@@rightpadding Thanks
so the custom cursor is adding white space at the bottom of my site on mobile and tablet version of my site any fix for that.
No idea sorry. Try to activate another theme just to test if it happens with the other theme too?
How do I target a button which is part of a form. If I apply the class to a form of course the cursor highlights the whole form
Hi !
really nice work and huge tutorials... But I have an issu with the pointer... Below a resolution of 1366px I lose it !
Do you know why or do you have a solution ?
Best regard
Great...which do you need for framing the website?
Amazing!, it's work!, how can I make the cursor circle bigger?
Glad you liked it! In the css code, change the "height" and "width" values within "body #magicMouseCursor"
@@KayCinho Hello Kaycinho! Do you know how can I remove the transition of the big circle following the red point?
Thanks!
it word but appears and old cursor.. SOLUTION????
thank you for this! found a few hiccups though - 1. doesnt work on popups.... 2. if you resize the browser the cursor disappears unless you refresh the browser after resizing... 3. doesnt work on some windows laptops :/
Hi, kaycinho!! I am using the Elementor GPL version. I didn't see any custom code option on my Elementor. Is there any way to use this code on the Elementor GPL version?
Hey there! Thanks for your tutorials, I love them! I am having an issue where for links, the curor shows both the MagicMouse and the default hand. Is there a way to hide the default pointer globally to just show this custom one? Thanks!
Dunno if you already solved this, but try this
a { cursor: none !important;
}
@@pantene313 Yeah, I tried this but it still does not work for the hand cursor for some reason! thanks :)
@@aydesignart Oh ok… Generally the last rule takes precedence so there might be another !important indicating hand cursor somewhere after. I’m just presuming but also guess worth to take a look at it.
@@pantene313 You'll need a:hover{cursor:none;} for the hover hand to be gone, is that helping with your issue?
Did anybody manage to get it working on popups? The square hover doesn't work for me with popups for some reason. Thank you for the amazing tutorial by the way!
I'm getting an 'Options is not defined' in Custom Code when using Step 2.
Any clue?
hii, sir it's not working on oceanwp and elementor. I had check each and everything I had watch your this video 15 Time. I follow each and every step. I have oceanwp and elementor pro premium. but it's not working may be have error in header js
please check please 🥺🥺🥺
Really nice but now the cursor disappears on the pages editor. Any fix for this ?
Hey there, I'm having an issue for displays smaller than min width: the magicPointer is not shown, but neither is the default cursor - so I have no pointer at all. Please help!
This is great Kaycinho! BUT when i try to save in elementor the js custom code i get this error message: "Unexpected token < in JSON at position 0". I have Elementor Version 3.5.5 & Elementor PRO Version 3.6.0. Any ideas? Thanks for sharing!
Hello, when i use this cursor there is a white space in the bottom of my responsive page (phone / tab) how can I fix it?
Thank you
Hello, thank you for this tutorial. For some reason the hover effect doesn't seem to work on pop-up. Does anyone have the same issue?
Love this video. Just one query - how do i give a class to a form button in elementor. I can give it an id can't give it a css class. how do i make that happen?
Why not put everything is one custom code, wrapping the css in style tags, and the other to in script tags, works like a charm, and all the code is in one single place!
This worked perfectly - thank you!!
Awesome video! You just got a new subscriber! Just one question. How can I change the color of the circle that appears above the menu? The CSS class of it is 'magic-hover'? Thank you!
hi great video! is there an option no make the pointer snappy? i would like to use only the pointer and not the circle around but would like it to be snappy?
thanks in advance
Sir,there is no blog post link in the description.Would u plz help me
I don't why but I followed the steps and in the end the circle was there and so was the arrow!
What do I have to do so the arrow disappears?
I have tried both videos for the cursor but nothing works.
Thank you sir your video is very helpful
Awesome! WIll you ever do a how to on a svg cursor?
It doesn't Snaps I followed your steps :(
Amazing!!! Kisses from Brazil
Glad it helped! Thank you for the kind words 😀
@kaycinho hey could we add text inside the circle cursor
Awesome video thanks, sadly mine comes up with a critical error when I try to save it
Hey Kaycinho! great Tuto thank you so much for this. I was able to do it on 2 websites. however I have a white gap that now appears at the bottom of both websites. when i disable the magic option code. then the white gap disappear. any thoughts? much appreciate
Great CSS , how do i make it work on IOS Safari Browser ?
Thanks Kaycinho, That was excellent 👍
My pleasure Saman!
What a really good content, that´s what I was looking for !!!
Great! How can I add the CSS class to the button on the menu and the site logo?
great tutorial, thanks!
Glad it was helpful!
Thank you for this tutorial, it certainly helped solve a problem. Is it possible to add text under the red circle based on what page is being viewed?
you got yourself a new sub kay! thanks for uncovering these tricks!
amazing,good job Kaycinho
Glad you enjoyed it Hervé ;)
Great Tutorial thanks!!
I do want to know with this code who can we achieve mixed blend mode - difference setting and get black on white and vice versa mouse movement.
Doesn't work for me, my cursor just disappeared. I have macOS Mojave, I did what you said but doesn't work.
Same here
Outstanding video, it was really easy to follow and implement. Thanks for sharing and keep up the good work...
great video, I just used it, looks just greeeeeeeat !!!
Hi, thanks for the cool tutorial, is it possible that the hover effect does not work on buttons included in a popup? Thanks again!
I had the "z-index:10000000!important;" added. And the mouse works fine, only the hover effect is not working :-( thanks!
This is entirely new
Great thank you!!!!!
Can it be used with the free version? By adding code in the editor theme?
Yes, it can be done! :D it works perfectly, thank you so much.
auto subssssss!!!!!
:p
Just love you bro
excellent tutorial !!
I want to place an element where a person completes the url and gives him an SEO analysis, is it possible?
Thanks Jose! I guess anything is possible when it comes to the web but what you are looking for is on a whole different level - backend / software /web app stuff
@@KayCinho thanks for your answer. I investigated since I wrote you the comment and the web application I already have it, I am only missing some details, thank you very much
thankyou
Thanks a lot , and How can I change it back to the normal one?
Just reverse-engineer the steps.
Great video! How can we exclude this from running in the Elementor editor? There's no cursor when editing because of the media query.
I had the same problem and after looking in all the comments here I got it. This is because when you are in the editor of elementor your website screen size is decreasing. You can skip the problem with either decrease the minimum screen size in the script or making smaller the elementor editor panel.
@@davidzax5271 But when you edit the responsive screen sizes of tablet and mobile it will still disappear.
Just adjust the min-width to a different number
this is amazing. thank you for sharing
My pleasure!
@@KayCinho btw as an experienced graphic designer who also creates websites, edit videos and do motion graphics. I think that your tittle: The Digital Alchemist is so cool
@@mouadhboukefa560 Thanks! I see you are one too!
Thanks, but it doesn’t work on popup menu.
You're welcome! Works fine on my end. You mean you don't see it over the popup menu ?
@@KayCinho Exactly, I don't see the cursor when the popup menu opens!
@@komeilasli must be the z-index. I've just added one line for that in the css code ( check the blog post). I hope it helps!
@@KayCinho Thanks, that’s works well. I put "z-index:10000000!important;" for "#magicPointer" too, because the red dot wasn't display on the popup menu. now it’s working well.
@@komeilasli Yes I had already updated it between this comment and the previous one :)