STACKING CONTAINERS ON SCROLL - Elementor Wordpress Tutorial Flex Container

Let's stack the deck! :) Here's a cool feature you can use to spice up your website. I forgot to mention, make sure you have the same layout size-wise in each container otherwise the effect will not work!
Timestamps:
00:00 Intro
00:21 Demo desktop
11:04 Demo tablet & mobile
15:1 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
[e-mail]
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

[@victorvichev2553]

I just found you on accident and watched maybe every one of your videos! I'm on KZbin 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!

[@andreaegli]

Oh my god, Victor! This is by far the best comment I’ve receive until now 🥰 thank you so much for your kind words 🤗

[@Mohammadr_m]

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.

[@andreaegli]

Thanks for the tip!😉

[@Sirhlande]

Thanks for the value you bring here ! Can't thank you enough :)

[@asfandyar_ali]

What a valuable and fantastic video Andrea. Thanks for sharing.

[@alessandroloayzaperez2193]

what a treasure of channel i have found my goshness!

[@maridsil]

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.

[@andreaegli]

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 🤓

[@kayquebritoo]

the best of youtube channel!

[@JohnXionidis]

Very high quality videos lately! Love them!❤

[@andreaegli]

Lately? 🥹😅 thank you, John! …and this is just the beginning 😉

[@ilyasasseban]

Very nice feature - very cool tutorial!

[@Boostsamma]

Always beautiful and quality tutorials, thank you very much

[@andreaegli]

Thank you so much, Luca!🤓

[@thewebstylist]

Beautiful! Luv this style Stoked to just subscribe 🎉

[@andreaegli]

..and we don't even need code to achieve it...Welcome aboard!🥳

[@studioalius27]

Thank you very much for this video. Love it!

[@kanpette]

Really nice! I keep forgetting about the z index and its possibilities. Thank you for providing great content for us!

[@andreaegli]

Thank you so much, Kjell! It's crazy how powerful it can be, right?🤓

[@andonisr]

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!!!!

[@niranjanneeru6489]

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

[@andreaegli]

Hehe, they’re so cool, right? Thank you 🙏 why did you need to use code?

[@wissambaltaji2317]

Very helpful tutorial 🔥

[@ar_dani_]

OMG you nailed, i was looking just how to achieve this for my services cards thanks

[@andreaegli]

You are very welcome 🙏

[@Waqas_Afridii]

i have never posted any comment on any video but your tip is so amazing as you are looking amazing thank you ma'am

[@user-xj2pq6zx3n]

Great info. Thank you.

[@andreaegli]

You're welcome🤓

[@ElDatoRD]

Great tutorial!!!!😍😍😍😍

[@andreaegli]

Thank you!! 😊

[@Maniq_0]

Wow awesome 👍

[@AllenLu]

love you amazing idea!!

[@andreaegli]

Simple but cool nonetheless :D Thank you! 😊

[@NaveedAhd]

As always infomative video

[@andreaegli]

Thank you, Naweed 😉

[@user-if6vh3zt1o]

Wow! fantastic

[@andreaegli]

🤓

[@designricko]

Perfect video

[@andreaegli]

thank you, Ricko!

[@AhmedMagdy-lf4nr]

Always great video 🎉

[@andreaegli]

Thank you, Ahmed!🤩

[@Art-01]

Thank u so much✌️

[@andreaegli]

You’re welcome🤓

[@kanchonroy5657]

awesome

[@javedomor7284]

7:59 you can also set the more z-index to other columns to make the effect perfect

[@cq6846]

what do you mean exactly?

[@izhaarmianbscs-1402]

love you 😍💗💓💗(Thank u soooooooooooooooooooo much)😎

[@andreaegli]

You're welcome 😊

[@porushpuri]

great one

[@andreaegli]

thank you

[@teuccio73]

Nice !!!

[@andreaegli]

Yay! So happy you like it! 🤓

[@Mateen-Sardar123]

It's an amazing❤ video

[@andreaegli]

Thank you so much!😀

[@ebube4god]

I love this, really nice. Out of curiosity, can you make this Carousels?

[@zohairhussain1341]

very helpfull video

[@andreaegli]

Thank you 😊

[@zohairhussain1341]

@@andreaegli i like your content very it very helpful for me and you gain follower from Pakistan love you

[@pumoyai168]

Cool 😊

[@andreaegli]

Thank you ☺️

[@pumoyai168]

Just checking if it's on Elementor Pro as I can't find a sticky option on a free version.

[@user-rz5tg9he6p]

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

[@deepsandhuvlogs6254]

Love from india❤

[@gilliano_hp]

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.

[@chillboy49]

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?🙏

[@andreaegli]

thanks! Elementor

[@deepanshusetia3492]

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

[@NALIHub]

Make it text friendly. If you can’t shorten the text then use that info elsewhere and do something else with that specific design

[@OmarMohamed-bb1np]

Thanks for the great tutorial! What was the wordpress theme used in that video?

[@andreaegli]

I always use the Hello theme

[@corinagrether]

Hello Andrea. Thank you so much!!! Is it possible to let them scroll a bit more smoother? Maybe applying a javascript?

[@andreaegli]

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 😉

[@corinagrether]

@@andreaegli Thank you for reply. I will try it out. in the past i've had some conflicts with lenis...lets see

[@PhantomRayV]

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?

[@infx846]

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?

[@andreaegli]

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

[@PedroMPerpetuo]

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?

[@andreaegli]

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😁

[@PedroMPerpetuo]

@@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

[@andreaegli]

@@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!

[@studioalius27]

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.

[@andreaegli]

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

[@arnaudduthoit9886]

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....

[@andreaegli]

That's is a bit weird, what version of Elementor do you have?

[@arnaudduthoit9886]

@@andreaegli Nevermind, I was with the 3.16.2, after update to 3.16.4 it's fix. Sorry and thanks for the answer :)

[@erling5148]

i enjoy your videos, It would be even nicer if/when you would share the json files of these projects.

[@andreaegli]

Thank you so much, will keep that in mind😉

[@ZaranDhullaHirachand]

I have a doubt, I can't find Sticky option under Motion effects. Is it a Pro feature?

[@andreaegli]

Hey! Yes, it seems like the sticky feature is only available in the Elementor pro version.

[@mahdiandalib186]

thx

[@andreaegli]

welcome!

[@mahdiandalib186]

@@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

[@damienbradshaw]

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.

[@andreaegli]

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

[@user-kf4gl6to7p]

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!!

[@andreaegli]

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 ;)

[@user-kf4gl6to7p]

​@@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?

[@Sushiiieee]

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.

[@andreaegli]

hey! I think the video is very thorough but you can get the template here: ohwow.club/template/?e-filter-3316ef6-template-category=stacking

[@Sushiiieee]

@@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.

[@elenakutluchurinaru]

I don't have those settings in the motion effects. Is this the pro version? Or maybe I didn't install some plugin?

[@andreaegli]

Yes, this is the pro version

[@ClickEnglish1]

ahh man.. i was trying to do this in free version :/@@andreaegli

[@holliswebb1800]

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!

[@andreaegli]

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 ;)

[@andonisr]

Oh, how would you make it invisible? Tried minus Z-indexing, but it still showed...lol...! Thanks for letting me know🙂

[@user-vr3pe8ht4q]

Did you find a solution for this? Plus on mobile, the scroll is a little glitchy.

[@FaqihShofyan12]

Great tutorial. It would be faster if you just copy and paste style if you want the other element have the same style

[@andreaegli]

Thanks 😊 yeah, at that point I was still not used to copying styles

[@BusinessButler]

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

[@BusinessButler]

I can send you a video for showing you

[@andreaegli]

No idea, it works on my end

[@julianrojas2180]

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

[@andreaegli]

yeah, that's an elementor issue, it does that sometimes....

[@julianrojas2180]

@@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?

[@Mikimk]

When browsing on mobile, I get a bug. Each card jumps, and we won't scroll smoothly like on a desktop. What to do?

[@andreaegli]

Are you able to share the link to your project? I could have a look at it...

[@user-ip4wd2qx6q]

hey, i tried this and it works but once you refresh the page its static again and wont stack while scrolling

[@nishit9766]

Wonderful tutorial. Can you please make a tutorial on how how to do the same via custom css in wordpress??

[@andreaegli]

Thank you 😊 why would you want to do that with custom css when you can do it this way?

[@nishit9766]

@@andreaegli actually this feature required elementor pro. And i do not have that.

[@andreaegli]

@@nishit9766 ah ok, now I understand 🤓 I’m afraid I won’t be making a video on that tho

[@nishit9766]

@@andreaegli ohkaay. No problem with that😇

[@user-gv7fg7cv8u]

You are using elementor pro? Cause nowadays in elementor there's no sticky option in the advanced options. How could this be solved?

[@andreaegli]

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.

[@jack2media]

Great tutorial! - Shame it didn't work for me

[@andreaegli]

Thank you! how come? You can get the template here: ohwow.club/template/

[@Coachwithfavour]

Elementor free or pro?

[@andreaegli]

I always use elementor pro but this can be done with elementor free

[@NaveedAhd]

Id like you to see the link ive sent linkedin

[@andreaegli]

Oh, yes, I did. I will reply to you there by Monday 😉

[@NaveedAhd]

@@andreaegli Sure Thank you

[@everydaylifeasitis]

Could have been aslower talking and more clear

[@captainsparky5839]

Bruh use the playspeed and reduce it. Use ur brain, or you need tutorial for that too

[@everydaylifeasitis]

@@captainsparky5839 Thank you mam.Good day.