DIAGONAL CONTAINERS MOVE UP&DOWN ON PAGE SCROLL - Elementor Wordpress Tutorial Flex Container
Vložit
- čas přidán 24. 07. 2024
- CODE: www.notion.so/CODE-Diagonal-c...
Reset container padding to 0 globally from site settings ~ layout ~ container padding
Timestamps:
00:00 Intro
00:23 Building the feature
08:36 Adjustments for mobile devices
11:17 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
Building this feature was easier than I thought it would be I might maka an update in the future with some GSAP image effect on scroll but until then...this would do
You're tutorials are awesome ❤
your tuts are alway most useful !!!
Glad to hear that, Teo!🤩
Really nice effect! Thank you for this
Glad you like it, John!🤓... and you're very welcome!
Loved the design. You are one of those great designs who even make the designs responsive.
Thank you very much! I'm fulfilling my duty as a designer😁 what is a web design if it's not responsive, right?
Very cool ! I follow all your videos, probably one of my favorite channel. Thanks a lot for your work and sharing, nice mind set ! 🙏❤
Thank you so much, Baptiste! Comments like yours keep me going tbh😉
actually it was so great for me i learned so much simple things that i didnt we can do in elementor like overflow: hidden!!! so much confused before when i see horizontal scroll, thanks soooooooooooooooooo much.
Another AMAZING modern $tyle! Totally agree on scroll styling is priceless
it's freaking amazing😁
Your channel is a goldmine. Thanks Andrea
Thank you so much, Clinton! Let me know if there’s something you would like to see in the channel 😉
Crazy i just got a project that needs this and this showed up on my feed i definitely needed this. Thanks Andrea
😄 you are very welcome!
Love your work ! 💫❤💯
Thanks Andrea, another great tutorial. It's great! You look great in red 😊
You are welcome & thank you very much, Martial☺️
You are such an adorable web designer I've ever seen. Wheneve I saw you and your work, literally I feel happiness because you are cute and good as your work.
Great Work Andrea, Really need this right away lol, thumbs up
Thank you 😊 awesome!
Oh yeah.. I'm waiting!
🤩
Bro!!! Keep up the amazing work! Really showing some new stuff which can't be found anywhere!!!
Thanks! Will do!😁 In the meantime, let me know if there's anything you'd like me to recreate...
@@andreaegli Hi Andrea, I sat down to create this effect on my website but I have the elementor free version so the scroll won't work. I will use it without the effect for now.
This made me realize that how important is to learn how to code. I could have used the marquee code you created on the images to find a work-around but I don't know how.
I will learn css now. Wish me luck.
Super smart!
Thank you, Imran!😁
ahhh can wait for this banger
hehe, I hope it will not disappoint😁
thanks ma'am for the best tracks
Welcome 🙏
EXCELENT
Thank you
You’re welcome ☺️
Bravo! 👌👍❤️👏👏👏
🤓 danke!
yeeeeah I will sit in the front, we love elementor
love it! don't forget to grab some popcorn 😁
best
thank you🤓
Thank you Andrea 🙌 And you are so beautiful 🌺🌺🌺❤️
Thank you, Jean☺️
@@andreaegli Tu es belle comme la rosée du matin 🌺
OMG fcking amazing! Huuge thank you for your work.
Best comment ever!!! 😅 thank you so much, Sebastian!!! Lemme know if there’s smth you’d like to see me recreate 😎
Im here for the dress actually
I can't even with your comment!!!😂
Hi, The linked code is for a different effect/video "text over video"
hey, thanks for that, fixed!
Thanks for amazing effect! Can we accomplish this with sections instead of containers?
Thank you so much! I honestly don't know, I've stopped using sections since containers were introduced. You can mix containers with sections on the same website if you want to implement this effect...
@@andreaegli thanks! I converted the website to containers, and voila it works :) Thank you and keep it up!
@@sumeramughal fantastic! you are very welcome
For when a tutorial on how to make the header that is on your website with glassmorphism?❤
Will see if I can make it soon...
@@andreaegli❤
hi there! just a question please: what program is the one you are using? thanks a lot.
hey! What do you mean by program? Are you referring to the software/page builder? If so, it's Elementor...
@@andreaegli yes, thanks: I meant that software.
Is it possible to make it in a way that you can change the photos without replacing them individually inside Elementor?
You could try doing that with ACF, it should work just fine 😉
Hiya, amm quick question related to the non design elements of a website. Wouldn't this slow down the website because of the number of images? Also if it is converted to webp, would that be better then to use?
Hey! Definetly always use webp. If you optimize images as best as you can, nope. Imagine working on a photography website and telling your client not to put too many pics up because it will slow down the website? I would recommend checking @websquadron channel for the best image optimization tips
@@andreaegli ohhh that is an excellent response. I complete hear you. My stratergy was to put a few images on the home page and then have all th bulk of the images on a whole new page. And yaa i do follow websqadron and infact my concern of using too many images was from there. But you are absolutely right, there will be scenarios where images are the main part of the website and we cant shy away from giving it the best design. Thank you, Andrea.
What if I add lenis scroll on that is that gonna work ?
I dunno if I use lenis motion effect from elementor don’t gonna work
I know when you use locomotive scroll the motion effects not working
Just tested with lenis scroll and it works!
Yeah, I prefer lenis over locomotive for this reason...plus, lenis supports sticky/fixed positioning which is great, especially for navbars...
@@andreaegli ngl you saved my ass for figuring out scroll triggers for thouse 😀😀 ( which I still need to learn how to use it 🫠)
Thank you 🙏🏼🙃
You doing great job on CZcams btw . 💜
@@turekmateusz hehe, you're welcome!
Aww, thank you so much!
I liked the dress
😉
Thanks!
Notion is saying page doesn't exist or i don't have permission to access it
Wonderful video btw
You're literally amazing
Ufff, I need to find a better solution than Notion, should be ok now😉 lemme know if all good!
Thank you so much!
@@andreaegli one thing I love about you is you reply to comments and engage with your community
Most other CZcamsrs just ignore comments
@@andreaegli thank you
Your really underated and you have amazing content
Promo*SM
What does that mean?
marry me lol
lol indeed