New Elementor Design Trick - Glowing Cursor on Card Hover

Подписаться 24 тыс.

Просмотров 39 тыс.

50% 1

Link to code snippets👇
lytboxacademy.com/card-hover-...
===================================
🟣 ////// Learn Powerful SEO for WordPress
lytboxacademy.com/seo-for-wor...
===================================
🟢 ////// Master Elementor with Better Designs
lytboxacademy.com/design-with...
===================================
🔵 ////// Learn to Build and Sell WordPress Maintenance & Care Plans
lytboxacademy.com/maintenance...
===================================
🏆 ////// Become a Lytbox Pro Member
lytboxacademy.com/the-academy/
===================================
🌟 ////// Personal 1-On-1 Elementor Training
tidycal.com/lytbox/elementor-...
===================================
////// The Hosting I use:
👉 Hostinger (Best for beginners & smaller budgets)
www.hostg.xyz/SHDX8
👉 Cloudways (Best for scaling web businesses)
www.cloudways.com/en/?id=485185
👉 RunCloud (Best for professionals)
runcloud.io/
////// WordPress Tools I use:
👉 Bricks Builder
bricksbuilder.io/
👉 Elementor
be.elementor.com/visit/?bta=4...
👉 Breakdance
breakdance.com/ref/390/
👉 Crocoblock
crocoblock.com/?ref=2021
👉 SEOPress Pro
www.seopress.org/?ref=854
👉 Perfmatters
perfmatters.io/?ref=1230
👉 WP Umbrella
wp-umbrella.com/?fpr=jeffrey83
👉 InstaWP
instawp.com/?via=jeffrey
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial #elementortricks

Хобби

Опубликовано:

5 дек 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 138

@LytboxStudio 6 месяцев назад

The link to the code snippets has been here, here it is - lytboxacademy.com/card-hover-effect-glowing-cursor-with-elementor/

@RC.Official7 2 месяца назад

Adding template in blog it useful

@adnankamen6470 2 месяца назад

Love your Tutorials man, this effect is beautiful.

@LytboxStudio 2 месяца назад

Thanks! 🙏

@atici 6 месяцев назад

This was the best Elementor tutorial I've seen. Please continue with more videos like this.

@LytboxStudio 6 месяцев назад

Got many more fun ones on the way!

@timvankoningsbruggen5962 6 месяцев назад

Really great tutorial, great pace, explanation, etc. Like and follow for sure!

@abinmahtab 6 месяцев назад

Just Amazing Jeff! I love this video and surely you've done an awesome job. Thanks a lot for sharing this wonderful tutorial with us. Much appreciate it.

@LytboxStudio 6 месяцев назад

Thank you, I really appreciate this! 🙏

@gotbassmusic 6 месяцев назад

Thanks so much Jeff! These videos are very inspirational, and informative. Really appreciate you for making these. Definitely going to be adding these effects to my own site🙏🏽

@LytboxStudio 6 месяцев назад

That’s awesome! Thanks!

@djmonty8137 2 месяца назад

I love it! Thank you so much!

@LytboxStudio 2 месяца назад

Thanks! 🙏

@AdityaBhatt 4 дня назад

This is dope. Thanks for sharing!

@LytboxStudio День назад

Cool man thanks! 😎

@michafrica 2 месяца назад

Thank you. Learned a lot from just one post.

@LytboxStudio 2 месяца назад

That’s great thanks!

@markbratton111 4 месяца назад

Nice tut!

@Havsland 6 месяцев назад

It looks awesome. Thanks for sharing!

@LytboxStudio 6 месяцев назад

Thanks!

@claravalente9855 3 месяца назад

Amazing! Thank you for that. New subscriber :)

@Luzenify 3 месяца назад

Just rebuilt it. Thanks! Love to see more fun-stuff ;)

@LytboxStudio Месяц назад

I'm ready to have more fun too and got more on the way. Thanks!

@sichflo9380 3 месяца назад

Thank you ! And keep it up!

@LytboxStudio 3 месяца назад

Thanks and will do!

@alirezasahami1175 18 дней назад

Very very perfect teaching. Appreciate that

@LytboxStudio 17 дней назад

Thanks! 🙏

@south-airbrush 2 месяца назад

thats a outstanding video !

@LytboxStudio 2 месяца назад

Thanks!🙏

@wmartin047 6 месяцев назад

Thanks so much for sharing!!!

@LytboxStudio 6 месяцев назад

🙏

@wmartin047 6 месяцев назад

This is AWESOME!!! Thank you!!!

@LytboxStudio 6 месяцев назад

Thanks! I really appreciate this. Cheers!

@learnwithnorwebs 6 месяцев назад

This is so cool. Thank you for this.

@LytboxStudio 6 месяцев назад

So good to hear!

@MIZAN112 Месяц назад

wow love from Bangladesh💜

@LytboxStudio 7 дней назад

Much love 🇧🇩!

@WebsiteStudiosOfficial 6 месяцев назад

Nice little tutorial Jeff!

@LytboxStudio 6 месяцев назад

Thanks!🙏

@herman.b 6 месяцев назад

Great tutorial ❤

@LytboxStudio 6 месяцев назад

Thanks!

@harbourdogNL 3 месяца назад

That's pretty spectacular...maybe not suitable for the mindfulness meditation website that I take care of but I'm going to play around with this anyway just for fun. Thank you!

@LytboxStudio Месяц назад

It's all about having fun!

@mdgolamrabby56 4 месяца назад

love bro

@FrBarretto 2 месяца назад

Wow... tank you !

@LytboxStudio Месяц назад

🙏

@llampp 5 месяцев назад

Well done!! Can we do this in Gutenberg?

@danzy4474 6 месяцев назад

Love this, Im trying to use it with a loop grid but the containers after the first one do not get the effect? Is there any reason why? Would be awesome to use this on a loop grid.

@icodywise 4 месяца назад

Hey Jeffrey, Can you PLEASE create a tutorial for this effect on white BG?

@sojibone 6 месяцев назад

Excellent

@LytboxStudio 6 месяцев назад

🙏

@user-hr6rr1xg2l 5 месяцев назад

Great video, the effect looks simply amazing! I've watched your video several times now, but unfortunately, I'm encountering an error. The effect works very well in Elementor, but when I open the website in a new private browser tab, the opacity of the cursor effect is at 100 percent, and it looks like a long circle.

@maryaxel3571 5 месяцев назад

Super tutorial... but when i duplicate the card the effect doesn't work on the first card. Are you know how to fix this problem ? Thanks

@tal7atal7a66 6 месяцев назад

pro tuto , nice tricks 🎉, thanks bro ❤. can you make some beautiful tricks like this , in the future, for mobile devices! thanks again

@LytboxStudio 6 месяцев назад

For sure! Got more a;ready lined up 😎

@yann3771 4 месяца назад

Hey thanks for the tuto ! The effect is really cool. Perhaps, I have trouble getting the first card working. When I first saw the tutorial and followed it on my website everything was working really fine. And recently, I have no freakin idea why. My first card doesn't want to glow. The hover effect applied on the card work but the glowing effect doesn't want to work and I really don't know why ! I hope you can help me about it :))

@jason.durocher 6 месяцев назад

I really like these tutorials. They are just excellent! Q: how would this effect work on a tablet or phone screen? I’m guessing since you can’t hover over it, this wouldn’t really work on those devices, right?

@LytboxStudio 6 месяцев назад

Hey thanks Jason! It wouldn’t do anything on mobile. If you have an iPad with Apple Pencil. You can see hover effects by hovering the pencil close to the screen. I’m not sure about Android tablets.

@SleepySweetDreams 4 месяца назад

how can i filter this card by category in a dashboard style where the category are on the left

@kelvinahante747 3 месяца назад

thanks alot, but can this be done on the free version of elementor?

@emvee2916 2 месяца назад

Hi! Thanks for the trick :) Question : what do you use to have the left sidebar 14:49 that fives you access to current tabs and apps?

@LytboxStudio Месяц назад

That's the Arc Browser. You gotta check it out, game changer!

@emvee2916 Месяц назад

@@LytboxStudio Yeah I figured it out in the meantime! I'm on Windows, it's not 100% perfect for now but a great experience that changes my usage. I need to adapt to that new experience, for now I'm keeping Chrome aside because I'm faster with it for web dev. Thansk for your reply :)

@hogerfarhan3423 3 месяца назад

If you dont mind sharing, what font is being used recording this video? Thanks for the amazing tutorial!

@LytboxStudio Месяц назад

It's called Stabil Grotesk

@kpviper7 6 месяцев назад

Okay I figured the container part out, but how are you getting them so they are side by side? Mine want to be one underneath the other. Can't figure out how to make them so they are just side by side like you are showing in the video? Thanks

@LytboxStudio 6 месяцев назад

It’s all I. The container settings. Look for the 3 bars in the first tab.

@BhanuKiran123 5 месяцев назад

Is elementor pro needed for this?

@jacobodi 24 дня назад

Wow, excellent, how could I add to a header? Greetings!!! thx!!

@LytboxStudio 7 дней назад

The same, just add to the container wrapping your header like you did the card

@fatokifemiemmanuel8565 4 месяца назад

Waooow, short of words

@LytboxStudio 4 месяца назад

😎

@t0mwhazzup 5 дней назад

Great feature. I just tried to implement it step by step. Works fine, except for that my blob is not circular, but more oval with more stretch in the vertical axis. What could that be? I think I followed along each step of your tutorial. And another question (not related to my problem): what does the fakeblob do?

@LytboxStudio 5 дней назад

Sounds like something is off with the border-radius. The fake blob acts like a mask to cover the blob.

@t0mwhazzup 4 дня назад

@@LytboxStudio 50% all the way round for both the blob and fake-blob. Thanks for your great work, I'm just getting into your channel. Really great content on there for people starting out like me. Well-paced, great explanations and easy to understand and follow along. Subscribed!

@t0mwhazzup 4 дня назад

@@LytboxStudio When I put in the CSS that the --blob-size: 500px instead of 250 px, it get's almost round. Seems to be that the height is not relative to the width. No clue.

@t0mwhazzup 4 дня назад

@@LytboxStudio Okay, I tailored the solution myself. I think in your case it works out circular because 250px width and 80% height (of the container) is almost the same dimension. But if that's not the case, it will be oval, not circular. In order to avoid that, I needed to give the same attributes for selector .blob to width and height as well as left and top: width: var(--blob-size); height: var(--blob-size); left: calc(50% - calc(var(--blob-size)/2)); top: calc(50% - calc(var(--blob-size)/2));

@maybenotthebest2935 4 месяца назад

It looks amazing. But how can i change size of a blob? My card is kinda long and blob looks like huge oval and i dont know how to fix it. I hope you can give me a hint!

@TomBraeuer711 Месяц назад

same! any solution for this? @LytboxStudio

@user-cp5tn7hu3d 4 месяца назад

That's really amazing Jeff. But there is a issue with mobile responsiveness . That is- Suppose there is three cards and just refresh the page from mobile then when you click a card for the first time then it's not showing the glowing effect just but then if i click another card then here it's working well. Please tell me about this issue i will be very greatfull to you.. Thanks Jeff...

@LytboxStudio 4 месяца назад

Thanks for reporting this. I’ll check it out and make updates to the code asap

@artimity 4 месяца назад

how to make border visible? (it appears only when hovering)

@muadmz 4 месяца назад

Hi, thanks for the great tutorial. A question from my side: I have done this effect within my Crocoblock's Jetengine Listing, using Elementor Pro. Everything works fine when I preview the listing within the template editor. However, when I add the listing to my site page and view it on the front end, the hover effect does not seem to work.

@timvankoningsbruggen5962 3 месяца назад

same...

@babakb5366 2 месяца назад

Same

@muadmz 2 месяца назад

According to Crocoblock support, it seems the issue is that the code doesn't work in a listing where multiple containers are shown. But they can't help on this as this is not related to their plugin scope. Maybe you can help in this.

@WebhustleDE Месяц назад

Hey, I have a question. When I duplicated it, it doesn´t have the hover effect anymore. What did I do wrong? The original container still has it though, just not the duplicate. Anyway cool tutorial and super helpful

@LytboxStudio 7 дней назад

Check the css and class and make sure that's all there. And thanks!

@zerox9646 6 месяцев назад

veey cool

@LytboxStudio 6 месяцев назад

Thank!

@justaguynamedleo 6 месяцев назад

Dude...why? When i think, ok, let dedicate a little more time to learn tha basics, and a little bit more, you come up with these gems and get me all lighted up like the boxes 😂😂

@LytboxStudio 6 месяцев назад

Haha nice! The creativity is sparking, mission accomplished 😉

@MFX-Trading 4 месяца назад

I did everything, step-by-step, exactly the same and for some reason its not working for me. Been trying and adjusting for hours.

@mahadkaluuma2010 4 месяца назад

you did not do everything step by step then. Make sure you added the right spellings of ids. For the css

@RC.Official7 2 месяца назад

Adding template in blog it easily for work

@LytboxStudio Месяц назад

Cool!

@edwardvillamizar-is4sl Месяц назад

gracias, tengo un error con selector { --blob-size:250px; } porfa ayuda

@LytboxStudio Месяц назад

I'd love to help but need to know much more about the error. Join the Lytbox Academy community and get support 😎

@leonbrostmeyer5111 5 месяцев назад

something goes wrong when I try to copy the Card Section into another page

@PayamJianTV 6 месяцев назад

Thank you for the tutorial, I used this effect in practice and followed every step. The effect works in the preview but not in the final URL. I am using localhost. Is there any reason for that? thanks again

@leonbrostmeyer5111 5 месяцев назад

Im having a similar problem

@user-hr6rr1xg2l 5 месяцев назад

same @@leonbrostmeyer5111

@leonbrostmeyer5111 5 месяцев назад

My problem was that I was already using the class name "card" for another custom css code snippet earlier in my page .

@PayamJianTV 5 месяцев назад

I used on final production server then it work @@leonbrostmeyer5111

@babakb5366 2 месяца назад

Same

@MdRehan-fe5fp 3 месяца назад

Am facing a problem.. I can see the effect in elementor builder but not on the frontend of the website..

@timvankoningsbruggen5962 3 месяца назад

same here... :/

@kpviper7 6 месяцев назад

First off, I love this affect, however... Where the heck are you finding this feature "Container"? I have elementor pro and I'm not seeing it anywhere? AM I just blind or am I missing something? I use columns, but I've never seen containers? I started to follow along but got stuck really fast when I did not see containers or how you were editing the gap size? I went to the gaps from the main column (container), but once there the option to edit is "Layout" not container? Again, am I missing something? Thanks

@LytboxStudio 6 месяцев назад

Sounds like you’re using the old version with Sections and Columns. To switch to containers, go to your dashboard > Elementor settings > Features and turn on containers. But also, look up changing from sections to containers, it’s a big change in Elementor

@kpviper7 6 месяцев назад

@@LytboxStudio How do you get the containers to be side by side? I can only get them to stack on top of each other. In your video they are side by side?

@LytboxStudio 6 месяцев назад

@@kpviper7 you need to use the flex controls in the container widget. Going from sections to containers has a learning curve but it’s well worth it. I’d check out a few containers videos. Living with Pixels has a really good one. Basically, is your containers, in the first tab you’ll see a bunch of options, those are your flex controls. To get the content side by side loom for the option with 3 bars vertically stacked.

@kpviper7 6 месяцев назад

@@LytboxStudio thanks again. Love your videos

@franktielemans6624 6 месяцев назад

I did the same thing on my channel but use a different method and code.

@LytboxStudio 6 месяцев назад

Nice! Feel free to share your video link, I’m sure it will help. I always like to see the different ways of creating something, it’s a great way to learn

@franktielemans6624 6 месяцев назад

@@LytboxStudio Unfortunately RU-vid removes comments that contain external links. It's on my youtube channel, last video from 2 weeks ago. There are also three demopages. One with a card design created with containers, similar to what you did. A second demo that works with the iconbox widget and a third demo with a loop-grid-widget. All code is on the page

@LytboxStudio 6 месяцев назад

@@franktielemans6624nice one. Just checked it out (and subbed) looks good

@jack2media Месяц назад

It works but the mouse is long and overall shape instead of circle.

@LytboxStudio 7 дней назад

I'd need to see it to figure out what is happening.

@user-ip4wd2qx6q 10 дней назад

unfortunately my blob effect apppears for the whole page and not only the cards section .. any help?

@user-ip4wd2qx6q 10 дней назад

got it! forgot to switch overflow to hidden. LFG

@LytboxStudio 7 дней назад

Glad to see you got it!

@BartAndrzejewski 6 месяцев назад

Link is not working Jeff :)

@GnuLegax 6 месяцев назад

You're right

@LytboxStudio 6 месяцев назад

It's fixed 😅

@GnuLegax 6 месяцев назад

@@LytboxStudioGreat, thanks!

@aasiaakram8230 6 месяцев назад

It lecture is so good but i want to know scripting what logic you have use.

@LytboxStudio 6 месяцев назад

Check out the blog post on this, the code was broken down more and explained how it works

@SimX9000 6 месяцев назад

I mean this is super cool but like why doesnt anyone ever cover designing for mobile then scaling up to desktop. Most your audience including me love desktops but many people aka visistors don't use a desktop. Would love to see some cool mobile stuff in this category.

@LytboxStudio 6 месяцев назад

Good question. The thing about effects on mobile, they can work against the user experience and need to be very carefully implemented. I have some effect videos coming up and will highlight when it’s also good for mobile.

@PatricioTomas 18 часов назад

It's a shame everyone now uses phone and not desktop version.

@LytboxStudio 18 часов назад

I'm reading this on my desktop so not everyone 🤣

@Bari2023 3 месяца назад

But sorry to say The Glowing effect not Mobile Responsive

@LytboxStudio 3 месяца назад

I think I mentioned that there's no cursor on mobile...but if you tap the box the borders still glow. But this is a desktop cursor effect.

@heyyounotyouyou3761 5 дней назад

Bruh what is this wierd ahh editor, why don't you use simple css?

@LytboxStudio 5 дней назад

Why don’t you share with us the ‘simple’ css to achieve this effect with all of us? Feel free to drop your snippet in the comments and add value to everyone here.

@heyyounotyouyou3761 5 дней назад

Well one of the first video of hyperplexed does this with simple html, css and js. I just didn't know why you need GUI editor as a programmer, it just makes it more time consuming and restrictive to write code.

@LytboxStudio 5 дней назад

@@heyyounotyouyou3761 just add code the way it works best for you. It’s that simple. Some of us add all our code in a child theme, some in a code management plugin. Some of us build our own MU plugins. If you’re a programmer, then use the method then use what works best for you. But keep this in mind, if I only show the most advanced way for adding a code snippet into a Wordpress site, most people would get lost and overwhelmed. Many here are beginners trying to learn. I want to make sure everyone has a chance to learn and for those of use more advanced already, then use your own advanced methods.