DIAGONAL CONTAINERS MOVE UP&DOWN ON PAGE SCROLL - Elementor Wordpress Tutorial Flex Container
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 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 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.
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.
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 😉
You're tutorials are awesome ❤
Another AMAZING modern $tyle! Totally agree on scroll styling is priceless
it's freaking amazing😁
Thanks Andrea, another great tutorial. It's great! You look great in red 😊
You are welcome & thank you very much, Martial☺️
Love your work ! 💫❤💯
your tuts are alway most useful !!!
Glad to hear that, Teo!🤩
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😉
Super smart!
Thank you, Imran!😁
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!
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?
Really nice effect! Thank you for this
Glad you like it, John!🤓... and you're very welcome!
Great Work Andrea, Really need this right away lol, thumbs up
Thank you 😊 awesome!
Oh yeah.. I'm waiting!
🤩
yeeeeah I will sit in the front, we love elementor
love it! don't forget to grab some popcorn 😁
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.
ahhh can wait for this banger
hehe, I hope it will not disappoint😁
thanks ma'am for the best tracks
Welcome 🙏
EXCELENT
Thank you Andrea 🙌 And you are so beautiful 🌺🌺🌺❤️
Thank you, Jean☺️
@@andreaegli Tu es belle comme la rosée du matin 🌺
Thank you
You’re welcome ☺️
Bravo! 👌👍❤️👏👏👏
🤓 danke!
best
thank you🤓
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!
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 😎
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❤
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 😉
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.
I liked the dress
😉
Thanks!
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 TH-cam btw . 💜
@@turekmateusz hehe, you're welcome!
Aww, thank you so much!
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 TH-camrs 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