MODERN LAYOUT WITH INVERTED BORDER - Elementor Wordpress Tutorial Flex Container
Vložit
- čas přidán 17. 07. 2024
- Download Figma file: www.figma.com/community/file/...
Timestamps:
00:00 Intro
00:49 Demo masking with SVG shapes
10:30 Making of the SVG shapes in Figma
16:01 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
I've been playing around with masking as well and I found out that you don't have to upload any svg image when you use the webkit-mask-image property in CSS and convert the svg into a Data URI with a SVG to CSS convertor. You can place this converted SVG code directly into CSS and you don't have to upload any image, great for cutting down on the server requests.
You can do really cool stuff with masking when you start animating them. 😉 You can even build custom shape dividers with masks.
Really worth to explore.
This is genius. Although i knew this and have explored this area this is actually so fun to do.
Oh yeah, I completely forgot that you can actually do that too!! More brains are better than one 😁 thanks for this, Frank!
How do I do this?
@@campusconnecttv170
Do what?
Looking supper modern, thanks for the tutorial!
Thank you, John!😉
Oke this is legit very cool! Got a new sub!
Fantastic tutorial Andrea!
Thank you so much, Mauro!
Excellent content!
Glad you enjoyed it
Thanks this was really helpful!
Glad it was helpful!
Thanks, great idea :)
You are very welcome!
Great work
Thank you so much 😀
Good job! 👌😊❤👍👍👍👏👏👏
Thank you! 😃
great tutorial thank you very much! is it possible to combine that with a parralax straight from elementor?
I haven't tried that but I think so.
Good mam ❤
Thanks a lot
❤
oh i didnt know that the image widget has the custom shape mask.. nice!
Hehe, now you know 😁
Thanks for this good tutorial. Is it possible to use mask in Elementor for videos?
You're welcome! Yes you can!
this tutorial is great 🔥how do you get this dark theme style ?
thank you myke! Go to Dashboard > Elementor > Settings > Features, scroll to Editor Top Bar and set it to active, save changes and Voila!😉
Would you mind making a video about a header that changes its colour on scroll? I basically want it to be transparent and only give it a background colour when scrolling. I've seen that exact effect like a million times with an image that's underneath the header but I can't reproduce it 100% bug-free. When using the background colour and transparency scrolling effect it works but it that has the disadvantage of the background colour being loaded when visiting the first time. It literally flickers. That's the video from Elementor about it with the bug I described: czcams.com/video/PJp87rmeLcI/video.html
You are absolutely crushing it theres a lot i want to ask and I would love to connect to you on instagram. Please share
I can't share links here but you can find it on my about section here. Also, thanks!!!!! 😁