09:23 You can keep the last container on the screen for a few pixels longer by adding a bottom-padding to the parent container. It basically means that you have added more space between the end of the last container and the end of parent container and 'stay in column' option will give it a little room to scroll before hitting the end of the parent 'column' and lose sticky effect. Thanks for the video, The idea is pretty simple but very creative and Im going to use it in one of my designs.
Thanks for the video, I saw this effect on a website and thought it was something difficult and now I'm happy that radomly found you while looking for elementor motion effects on youtube and it's so simple.
You are very welcome! Yup, this is one of those effects that make you think you need to be a coder to know how to make it but in reality is so stupidly simple 🤓
I just found you on accident and watched maybe every one of your videos! I'm on RUclips for more than a decade and have never posted any comment on any video ever, but I am amazed by you and your content and the value you are giving! You are doing amazing work, keep going like that and I'm sure you will be going places in no time!
Very nice feature - very cool tutorial! My only pitfall that I can't seem to fix no matter how many times I've watched this, is that the top container does not stay 'sticky' and stays 'sticky' when the 2nd container hits the bottom of the image (in 1st container). I've set the Z index to 1 and ...never mind 🙂I fixed it by totally changing the Offsets to: 1st: 200 2nd: 250 3rd: 300 At least that's what worked for me to get the desired effect!!! Thank you so much again!!!!
ohh man...i just now made this stacking container for the process section in a clients website - its pretty cool to see this tutorial now - i used some custom code to achaive this though - really awesome
I loved that tutorial, thank you! I found that on a MacBook this effect runs smoothly, but as soon as i test it on a Microsoft device it's kind of jumpy and not really working. Did you run in any similar problems?
Awesome, thank you! I haven't tested it on Widnows, I didn't even think that this wouldn't work on other OS. I guess we need to blame Elementor for that 😂 I need to get a windows laptop for test now..ugh
You have great tutorials i love them and helpt me a lot, the only thing is that i cant follow in which container you are because you dont see the navigator.
Hey Corina! You are very welcome 🙏 well, you could apply an overlay smooth scroll to the website. Search for Lenis on my channel. I use Lenis on all my websites and scroll experience in general is so much better. Hope this helps 😉
It works but if I scroll down too fast the container goes over the place where it is supposed to stop and then goes down to the offset point creating an awkard jump effect
have you tried a fourth container and make it invisible. when you scroll past three, it locks to second and when fourth scrolls, it continues up. aside from that, this works for me!
your tutorial is amazing! but I have a problem with the stacking of the containers... When I get to the process of pressing the "stay in column" button, the containers end up following the scroll of the page until the end, not stopping where the end of each section should be. Is there any way to resolve this?
mam in this stack container I need to add dot nav buttons to move prev and next I did it with icons boxes its working for closing container but not not opening
I'm unable to add the motion effect for the container, otherthan container the motion effect is showing but whenever i click container the option goes disappear, how can i turn that option on? or is it something with my elementor pro?
You did a really great job exlaining everything. I was easily able to recreate the design but I am having a hiccup. My each container has alot of text and it is not able to be visible in mobile. I can't reduce the text. I am figuring out a way in which this text become scrollable with removing the effect
Not sure I fully understand. Do your cards stay at the top even after you have scrolled to the very bottom of the page? If you want you can send me a loom of what you have built so far
@@andreaegli I can follow the video, but I'm having difficulty finding the precise slider option in Elementor to adjust the gap. It appears that the options available only allow for setting gap sizes for rows and columns individually, rather than the same slider you were using.
That is strange! I once had an issue with having three of these stacking containers in another container glitching on me. What do you have inside the two stacking containers? Elementor has these issues sometimes and it's so annoying
Hey everything goes well on desktop but mobile version to me it appears super wierd ..its like you cannot see the container info, everything its halfway on mobile! And it has a lot of space on the bottom.
You need to adjust it on mobile devices, including the content inside the containers: here's the template if you want to buy it or simply see how it looks on mobile: ohwow.club/template/
Hi ! I don't know why but when the parent container getting sticky the content goes full witdh. The padding on the left and right (95 px) disappear. My 2 containers with the text and the image 'stretch' and take all the width of the parent container....
I made my stacking containers but the contents on mobile devices aren't scrollable it just stacks the containers and I can't scroll to see the full content within each container? Do you perhaps know any solution to that?
Hey! I have elementor pro but when I try to add motion effects they are not appearing at container level. Do you know why? Thank you so much for the video!!
Hey! Hmm, that's indeed strange. What theme are you using, what version of elementor do you have, what plugins do you have installed? These are some of the things I look at when I'm having issues with elementor. Caching might smth you could do as well as deactivating plugins. Other than that, if nothing works, get elementor support on the line, they need to fix this for you asap. If you fix it, let us know what was the issue, just in case someone else has the same issue in the future ;)
@@andreaegli Thank you very much for your answer! I'm using Hello Elementor Theme, elementor version is 3.18.3 and Elementor PRO 3.5.2. I have deactivated all plugins and cleared cache but I still don't see the option :( Should I change any of this?
Hello, I have a problem, on computer it works correctly but on tablet and phone, no reactions and containers just disappear. Do you know what can I do ? thank you by advance
@@andreaegli can u teach us how to create a customized panel for our users where they can have access to their personal information / send ticket / we as admin could send notifications to them / thing they have bought / comments they have sent.... in one word a modern user panel but without any additional plugin only elementor and like jet engine
Hi there - at the very end you optimized the scrolling effect for mobile (image size, font size, etc) - isnt there an option to copy the style to the other containers?
Hey Pedro! Yes, absolutely, in the Structure (formerly known as the Navigator) click right on the container, image, font etc and select copy, then go to the element you want to apply the style, click right on it and select paste style. I sometimes forget that this option even exists😁
09:23 You can keep the last container on the screen for a few pixels longer by adding a bottom-padding to the parent container. It basically means that you have added more space between the end of the last container and the end of parent container and 'stay in column' option will give it a little room to scroll before hitting the end of the parent 'column' and lose sticky effect. Thanks for the video, The idea is pretty simple but very creative and Im going to use it in one of my designs.
Thanks for the tip!😉
Copy the element/container and use "paste style" on the other ones to duplicate the styling.
Great tutorial. Thank you!
Thanks for the video, I saw this effect on a website and thought it was something difficult and now I'm happy that radomly found you while looking for elementor motion effects on youtube and it's so simple.
You are very welcome! Yup, this is one of those effects that make you think you need to be a coder to know how to make it but in reality is so stupidly simple 🤓
I just found you on accident and watched maybe every one of your videos! I'm on RUclips for more than a decade and have never posted any comment on any video ever, but I am amazed by you and your content and the value you are giving! You are doing amazing work, keep going like that and I'm sure you will be going places in no time!
Oh my god, Victor! This is by far the best comment I’ve receive until now 🥰 thank you so much for your kind words 🤗
Very nice feature - very cool tutorial!
My only pitfall that I can't seem to fix no matter how many times I've watched this, is that the top container does not stay 'sticky' and stays 'sticky' when the 2nd container hits the bottom of the image (in 1st container). I've set the Z index to 1 and ...never mind 🙂I fixed it by totally changing the Offsets to:
1st: 200
2nd: 250
3rd: 300
At least that's what worked for me to get the desired effect!!!
Thank you so much again!!!!
i have never posted any comment on any video but your tip is so amazing as you are looking amazing thank you ma'am
ohh man...i just now made this stacking container for the process section in a clients website - its pretty cool to see this tutorial now - i used some custom code to achaive this though - really awesome
Hehe, they’re so cool, right? Thank you 🙏 why did you need to use code?
OMG you nailed, i was looking just how to achieve this for my services cards
thanks
You are very welcome 🙏
7:59 you can also set the more z-index to other columns to make the effect perfect
what do you mean exactly?
Amazing
🤓
Very nice feature - very cool tutorial!
recommender always
Really nice! I keep forgetting about the z index and its possibilities.
Thank you for providing great content for us!
Thank you so much, Kjell! It's crazy how powerful it can be, right?🤓
What a valuable and fantastic video Andrea. Thanks for sharing.
Guys if you are using free version of elementor you can still do it!!! Followe the tutorial and add id css to the elements, mine are: sticky-1, sticky-2, sticky-3 and sticky-4 and add custom css (appearance -> customize -> additional css). Just copy this and customize it
#sticky-1 {
position: sticky;
top: 50px;
}
#sticky-2 {
position: sticky;
top: 100px;
}
#sticky-3 {
position: sticky;
top: 150px;
}
#sticky-4 {
position: sticky;
top: 200px;
}
@media (max-width: 1024px) {
#sticky-1 {
top: 40px;
}
#sticky-2 {
top: 80px;
}
#sticky-3 {
top: 120px;
}
#sticky-4 {
top: 160px;
}
}
@media (max-width: 768px) {
#sticky-1 {
top: 25px;
}
#sticky-2 {
top: 50px;
}
#sticky-3 {
top: 75px;
}
#sticky-4 {
top: 100px;
}
}
Thanks for the value you bring here ! Can't thank you enough :)
what a treasure of channel i have found my goshness!
very helpfull video
Thank you 😊
@@andreaegli i like your content very it very helpful for me and you gain follower from Pakistan love you
Always beautiful and quality tutorials, thank you very much
Thank you so much, Luca!🤓
It is a useful video, keep up the good work. But what software/platform did you use to design those stacked up flexbox like containers?🙏
thanks! Elementor
I loved that tutorial, thank you! I found that on a MacBook this effect runs smoothly, but as soon as i test it on a Microsoft device it's kind of jumpy and not really working. Did you run in any similar problems?
Awesome, thank you! I haven't tested it on Widnows, I didn't even think that this wouldn't work on other OS. I guess we need to blame Elementor for that 😂 I need to get a windows laptop for test now..ugh
You have great tutorials i love them and helpt me a lot, the only thing is that i cant follow in which container you are because you dont see the navigator.
Wonderful tutorial. Can you please make a tutorial on how how to do the same via custom css in wordpress??
Thank you 😊 why would you want to do that with custom css when you can do it this way?
@@andreaegli actually this feature required elementor pro. And i do not have that.
@@nishit9766 ah ok, now I understand 🤓 I’m afraid I won’t be making a video on that tho
@@andreaegli ohkaay. No problem with that😇
Thank you very much for this video. Love it!
Great tutorial. It would be faster if you just copy and paste style if you want the other element have the same style
Thanks 😊 yeah, at that point I was still not used to copying styles
Beautiful! Luv this style
Stoked to just subscribe 🎉
..and we don't even need code to achieve it...Welcome aboard!🥳
Hello Andrea. Thank you so much!!! Is it possible to let them scroll a bit more smoother? Maybe applying a javascript?
Hey Corina! You are very welcome 🙏 well, you could apply an overlay smooth scroll to the website. Search for Lenis on my channel. I use Lenis on all my websites and scroll experience in general is so much better. Hope this helps 😉
@@andreaegli Thank you for reply. I will try it out. in the past i've had some conflicts with lenis...lets see
Very high quality videos lately! Love them!❤
Lately? 🥹😅 thank you, John! …and this is just the beginning 😉
the best of youtube channel!
It works but if I scroll down too fast the container goes over the place where it is supposed to stop and then goes down to the offset point creating an awkard jump effect
yeah, that's an elementor issue, it does that sometimes....
@@andreaegli Thanks for responding, do you know how it could be solved? or is it a matter of time for elementor to solve the issue?
thank you very much
have you tried a fourth container and make it invisible. when you scroll past three, it locks to second and when fourth scrolls, it continues up. aside from that, this works for me!
Oh hey, I didn't even think about that but I will give it a try as I'm using this feature on a project right now ;)
Oh, how would you make it invisible? Tried minus Z-indexing, but it still showed...lol...! Thanks for letting me know🙂
Did you find a solution for this? Plus on mobile, the scroll is a little glitchy.
your tutorial is amazing! but I have a problem with the stacking of the containers... When I get to the process of pressing the "stay in column" button, the containers end up following the scroll of the page until the end, not stopping where the end of each section should be. Is there any way to resolve this?
mam in this stack container I need to add dot nav buttons to move prev and next I did it with icons boxes its working for closing container but not not opening
When browsing on mobile, I get a bug.
Each card jumps, and we won't scroll smoothly like on a desktop. What to do?
Are you able to share the link to your project? I could have a look at it...
I'm unable to add the motion effect for the container, otherthan container the motion effect is showing but whenever i click container the option goes disappear, how can i turn that option on? or is it something with my elementor pro?
Wow! fantastic
🤓
love you 😍💗💓💗(Thank u soooooooooooooooooooo much)😎
You're welcome 😊
I love this, really nice. Out of curiosity, can you make this Carousels?
Great info.
Thank you.
You're welcome🤓
great one
thank you
It's an amazing❤ video
Thank you so much!😀
Very helpful tutorial 🔥
Love from india❤
You did a really great job exlaining everything. I was easily able to recreate the design but I am having a hiccup. My each container has alot of text and it is not able to be visible in mobile. I can't reduce the text. I am figuring out a way in which this text become scrollable with removing the effect
Make it text friendly. If you can’t shorten the text then use that info elsewhere and do something else with that specific design
awesome
Hello Andrea :), could you please advise me how to get the cards to scroll up and not stay at the top of the page? Thanks for help.
Not sure I fully understand. Do your cards stay at the top even after you have scrolled to the very bottom of the page? If you want you can send me a loom of what you have built so far
hey, i tried this and it works but once you refresh the page its static again and wont stack while scrolling
i enjoy your videos, It would be even nicer if/when you would share the json files of these projects.
Thank you so much, will keep that in mind😉
Perfect video
thank you, Ricko!
Hi,
How to get Gap Between Elements Slider? Plus, did you got the solution to stop the section at 50 offset and the rest?
Can you please guide me.
hey! I think the video is very thorough but you can get the template here: ohwow.club/template/?e-filter-3316ef6-template-category=stacking
@@andreaegli I can follow the video, but I'm having difficulty finding the precise slider option in Elementor to adjust the gap. It appears that the options available only allow for setting gap sizes for rows and columns individually, rather than the same slider you were using.
Each of my containers hwen I set them to sticky and set the offset, they move up but the two containers inside lose padding. Idk what's going on.
That is strange! I once had an issue with having three of these stacking containers in another container glitching on me. What do you have inside the two stacking containers? Elementor has these issues sometimes and it's so annoying
Thank u so much✌️
You’re welcome🤓
Hey everything goes well on desktop but mobile version to me it appears super wierd ..its like you cannot see the container info, everything its halfway on mobile! And it has a lot of space on the bottom.
You need to adjust it on mobile devices, including the content inside the containers: here's the template if you want to buy it or simply see how it looks on mobile: ohwow.club/template/
Great tutorial!!!!😍😍😍😍
Thank you!! 😊
Thanks for the great tutorial! What was the wordpress theme used in that video?
I always use the Hello theme
Wow awesome 👍
As always infomative video
Thank you, Naweed 😉
"Stay in Column" i have not this option Then how I can fix
Are you using elementor pro?
@@andreaegli Yes, I messege on your IG account but your response is Nill
Great tutorial! - Shame it didn't work for me
Thank you! how come? You can get the template here: ohwow.club/template/
Hi ! I don't know why but when the parent container getting sticky the content goes full witdh. The padding on the left and right (95 px) disappear. My 2 containers with the text and the image 'stretch' and take all the width of the parent container....
That's is a bit weird, what version of Elementor do you have?
@@andreaegli Nevermind, I was with the 3.16.2, after update to 3.16.4 it's fix. Sorry and thanks for the answer :)
I made my stacking containers but the contents on mobile devices aren't scrollable it just stacks the containers and I can't scroll to see the full content within each container? Do you perhaps know any solution to that?
Hey! I have elementor pro but when I try to add motion effects they are not appearing at container level. Do you know why?
Thank you so much for the video!!
Hey! Hmm, that's indeed strange. What theme are you using, what version of elementor do you have, what plugins do you have installed? These are some of the things I look at when I'm having issues with elementor. Caching might smth you could do as well as deactivating plugins. Other than that, if nothing works, get elementor support on the line, they need to fix this for you asap. If you fix it, let us know what was the issue, just in case someone else has the same issue in the future ;)
@@andreaegli Thank you very much for your answer! I'm using Hello Elementor Theme, elementor version is 3.18.3 and Elementor PRO 3.5.2. I have deactivated all plugins and cleared cache but I still don't see the option :( Should I change any of this?
love you amazing idea!!
Simple but cool nonetheless :D Thank you! 😊
Hello, I have a problem, on computer it works correctly but on tablet and phone, no reactions and containers just disappear. Do you know what can I do ? thank you by advance
I can send you a video for showing you
No idea, it works on my end
Cool 😊
Thank you ☺️
Just checking if it's on Elementor Pro as I can't find a sticky option on a free version.
Hi do you need a website
I have a doubt, I can't find Sticky option under Motion effects. Is it a Pro feature?
Hey! Yes, it seems like the sticky feature is only available in the Elementor pro version.
I don't have those settings in the motion effects. Is this the pro version? Or maybe I didn't install some plugin?
Yes, this is the pro version
ahh man.. i was trying to do this in free version :/@@andreaegli
i dont know why the 3rd container does not work
all works before i put stay in collum check
That could be an elementor thing, empty the cache, regenerate the css and try again. If all fails you can get the template from here: ohwow . com
@@andreaegli thank you very muuch!
Always great video 🎉
Thank you, Ahmed!🤩
You are using elementor pro? Cause nowadays in elementor there's no sticky option in the advanced options. How could this be solved?
Yes, always! Of course there is, check under motion effects. If you can't see it, make sure to update to the latest version of Elementor.
thx
welcome!
@@andreaegli can u teach us how to create a customized panel for our users where they can have access to their personal information / send ticket / we as admin could send notifications to them / thing they have bought / comments they have sent.... in one word a modern user panel but without any additional plugin only elementor and like jet engine
Nice !!!
Yay! So happy you like it! 🤓
Hi there - at the very end you optimized the scrolling effect for mobile (image size, font size, etc) - isnt there an option to copy the style to the other containers?
Hey Pedro! Yes, absolutely, in the Structure (formerly known as the Navigator) click right on the container, image, font etc and select copy, then go to the element you want to apply the style, click right on it and select paste style. I sometimes forget that this option even exists😁
@@andreaegli This is great thanks... that is a nice thing they did. that way I can copy and paste and bring in some quick variations in animation
@@PedroMPerpetuoYou're welcome! It's fantasric, it can save you so much time...if you don't forget that the option exists like I did yup!
Elementor free or pro?
I always use elementor pro but this can be done with elementor free
@@andreaegli Not really Andrea. Free doesn't have sticky option
just add additonal container with empty content. 25 vh haha
Id like you to see the link ive sent linkedin
Oh, yes, I did. I will reply to you there by Monday 😉
@@andreaegli Sure Thank you
Could have been aslower talking and more clear
Bruh use the playspeed and reduce it. Use ur brain, or you need tutorial for that too
@@captainsparky5839 Thank you mam.Good day.
Quit hatin