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?
@@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
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?
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.
