Elementor Glassmorphism Design Styles - Glass Headers & Cards

[@dmar4501]

This mans about to take over the wordpress tuts.. 100%!!.. 🔥content homie!

[@LytboxStudio]

Haha thanks 🤣

[@SaeedMasri]

Thanks, Jeff. Your work is always inspiring.

[@LytboxStudio]

I really appreciate this! Thanks 🙏

[@jnayeem08]

Damnn, that's awesome!! Love you, Jeffrey. Love from Bangladesh.🤗

[@LytboxStudio]

Thanks and much love for 🇧🇩

[@alimranmayeen9156]

Lovely 😍 Keep up the good work 💪 Take love from Bangladesh 🤝💛

[@LytboxStudio]

Awesome thanks!

[@ICUAT]

so good, thank you very much

[@NooNaLaluna]

This is awesome ✨✨

[@LytboxStudio]

Thanks! Glad you're digging it 😎

[@kiatubers]

it's awesome sir, congratulations ❤, I'm grateful

[@Rafa_Diogo]

Love your videos Jeffrey! I added the glassmorphism effect to my header container with success. But now I also want to add it on my wordpress menu dropdown, but it does not work while I have it on the header container. Im using this to the dropdown: selector { backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); }

[@LytboxStudio]

Thanks! You’ll need to target the drop down for the css. Give it a class and target class-name ul {css snippet here }

[@SuperABOALAA]

underrated channel !!

[@jaseyarm]

Great tutorial! Thanks mate

[@LytboxStudio]

Awesome thanks!

[@CronYcK1]

this guys smash the tuts lol

[@LytboxStudio]

Thanks! Got lots more on the way 😉

[@CronYcK1]

@@LytboxStudio just awesome 🌟

[@Eitan.Franco.Dabara]

I love this so much.

[@LytboxStudio]

That’s awesome thanks!

[@jack2media]

Love the content! I followed the instructions to the T - However.. I got a container in the background with a background image and a container inside with a higher z index. It works fine on the editor and shows the effect but when published there is no effect and i see the image clearly. Ive tried resetting css in elementor and purging the site and cache too!

[@LytboxStudio]

If can been seen in the editor but not the front end it’s usually because something is still caching. Try changing browsers and using in incognito.

[@Mahin_katariya]

amazing video !

[@LytboxStudio]

Thanks 🙏

[@kesterdestiny7315]

Amazing stuff here mehnn🎉

[@LytboxStudio]

🙏

[@Fazmindex]

Thank you, its great video, Can you say its website which is Font is used , I like it that font please

[@lahirudesilva885]

Awesome,,,Thank you

[@LytboxStudio]

Thank you!

[@FireMonster445]

Wich landing page is that can we get it PLS

[@zhareYT]

On desktop, there is no problem. But the submenu on tablets does not apply the glassmorphism effect.

[@LytboxStudio]

Make sure to have -webkit-backdrop-filter: blur(16px) saturate(180%); (the webkit is for iPhone and iPad) along with backdrop-filter: blur(16px) saturate(180%);

[@zhareYT]

​@@LytboxStudio Thanks for replying. I tried it, and it doesn't do anything. But the menu (without the -webkit) does work. However, the submenu... doesn't. I don't know, I don't understand anything.

[@mdqmatias]

Why the absolute position on header? With selecting sticky to the top and zindex is enough...

[@LytboxStudio]

Good question. If no position absolute, then the header would be on top of the banner and layered over it. For a transparent header you need either to set the head to absolute or use negative margins.

[@mdqmatias]

@@LytboxStudio oh ok, yeah.

[@kesterdestiny7315]

how do i achieve this card layout used here?

[@LytboxStudio]

It’s all in the tutorial 😉

[@torosmedia007]

It would be awesome but for a wpform!!!

[@nitishkumar-sf3yo]

How does it look like in a mobile view?

[@LytboxStudio]

The same. I suggest trying and testing to see how it looks on your phone. I do all my mobile testing and optimizations this way

[@Aren-t2m]

Please give me template

[@LytboxStudio]

I’ll be sharing templates in the LA community for pro members 😉

[@zestygecko]

You should create css classes like .glasslight, .glassmedium and set in custom css. Adding as selector is a bad idea as adds a lot of extra code to the page for replicated css. Should teach best methods not just cool effects.

[@LytboxStudio]

You must be new to my channel. Check out the other vids including the ones adding CSS. I always use classes. This is the 2nd video I made using the selector. In some cases the selector is useful. Especially for beginners. You can edit the values and see the effects change live. For those of us that know CSS well, we can take that and put it in a class. Adding all CSS in selectors is bad, but for rare occasions it’s ok. Even Bricks added roots and that’s the ‘best practice’ tool.

[@happy9955]

it would be good if slower

[@LytboxStudio]

I was planning on making this under 8 minutes lol If the header build went too fast, check out my other header tuts. I have quite a few that shows the header and menu build in detail.