Sticky Sections Overlap Effect with Elementor PRO

Hi everyone and welcome to this Elementor Pro tutorial In this video we’re going to be having a look
at how it can create similar overlapping sections effect The topic for this tutorial has been suggested
by one of our viewers So if you guys have any other ideas If you have any suggestions maybe you have seen
some cool effect on some other website Let us know and we can see if we can do
a tutorial on it So this is the website we have used as a reference And now we’re going to try and recreate this same effect using Elementor Pro Unfortunately in the free version of Elementor I haven’t found anything like that that could replicate this effect And make it look nice and work properly
So we’re gonna have to use the pro version of Elementor So on my website I have tried to recreate the same layout We’re going to use three cards
and we’re going to try and make them overlap Now let me show you how I build these cards So I’m using navigator
and I totally recommend that you do that too Because now you’re going to see
once we start animating these cards You’re going to see
how helpful navigator can actually be So let’s just put it here for now Alright so this is the section
that is boxed and I have set the width And the width is going to determine the size of your card if you’re going to be animating cards By the way if you’re interested in making
the full page sections overlap Like the sections that take up
the entire width of the page It’s also coming soon on our channel So here you simply set the width of your
card Like that So it doesn’t take up all the width of your page Then also the minimum height Here are my settings
but you are free to set your own values in here Then I created the inner section Using the inner section widget And inside I have created two columns And in the style settings of this particular section have set my backgrounds In my case it’s gradient background But I can also use the solid color of course or
the image as a background of your section We’re pretty much done with the setup All the cards on this page
have been made the same way I’m only using
three of them for this tutorial Just so it’s a little bit quicker to finish with
the animation But you are totally free to make as many cards as you need So let’s look at the example once again As you see here as you scroll down
the next card Scrolls on top of the previous card And the card underneath it
like shrink down and fades out First we are going to create
the simpler version of this animation Where the cards are simply going to slide on top
of each other without the shrinking and fading out This is going to be simple and quite fast And then in order to enhance this animation I’m also going to show you how we can add those effects too And as you see here the last card simply keeps up
scrolling with the rest of the page So now let’s get back to our editor and try
and do that So the backgrounds of this section like the parent section You can see it in the Navigator
that this is the parent section And inside we have the inner section
with the rest of the contents of this section So it has no background
so this thing here is transparent It’s absolutely transparent
and we need the parent section to be transparent Because if you said the white background
for this section it’s gonna look a little odd Because you’re gonna see this white line here as this card is going to slide on top of this one So since we’re using Elementor Pro
now we’re going to enable this ticket option Let’s click on the settings of this section Click in right here
go into advanced And I’ll have motion effects tab here
we need to click on this one And we’re going to have this ticket option
and we have decided to top But probably it is better to switch it off on mobile But we’re going to see how it works
on the mobile device as well So here’s that the offset
if you increase it, if we look closely We see that here we now have some more
space between the top of the page and this section So this is what the offset is
but we don’t want any offset here So let’s set it to zero like that it jumps
a little bit So let’s see it in action
we have made our first part sticky Let’s see
so we’re here above this card and we’ll scroll down As you scroll down
it looks a little bit jumpy in the editor But once we’re in the preview
it’s gonna work smooth This is what it is and we scroll down
there is the second card And we see that it slides underneath our card Which is obviously not what we want
We want it to slide on top of it So what we are doing here
is we need to go to advanced and set the z-index Let’s set it to 10 here Not the highest value,
just some value that we have something to start with So as you see in the Navigator I have named my cards: “Card1”, “Card2” and “Card3” And now I want to access the settings of the second card but I kinda It’s not really comfortable because this card The first card is been on top of the second card So I can do it using an Navigator,
I simply click on the Card2 And here I am in the settings for the Card2 Let’s go to advanced and now
increase the Z index for the first card We have set the ten and for the second
card we need to set the higher value So the second card is on top of the first card,
let’s say 20 Good! Now this card is on top, So it slides right on top of the previous card Okay, now it works fine Alright now we should make
the second card sticky as well So we go to motion effects, sticky and set it to the top Okay, let’s see how it works So scrolling down, the first card sticks
to the top of the viewport Then the second card slides on top of it
and also sticks there And there comes the third card
and also have to set the Z index for it And the value in the Z index has to be higher than the value And is at index of the second card
so if it was 20 that time has to be 30 Alright now it’s on top And if we want this card
to slide on top of the two previous cards And then keep scrolling as we scroll down
the page and reveal the rest of the page Like the sections that are placed down the page So we don’t have to make the third card sticky So you don’t have to make the last card
of these sticky cards You don’t have to make it sticky.
So let’s just keep scrolling So yeah we have set descent index for the card
but we forgot to set descent index for the next section Let’s go here and set it to 30 as well And for the next section too So this is what happens And it would be
pretty much that for this effect If it wasn’t for these two first cards which
you can clearly see as we scroll up So there are two ways we can get rid of this We can either cover them in some way
or we could make them disappear Let’s try and see if we can cover
this card here that is picking out What I would do is to go to the settings of this section The section that goes right after the third card And increase the top padding Like really increase it to probably 800,
maybe 600 to start with And then try and add some negative
margin Let’s say minus 200 Or minus 300 All right just to play around
with the values and see how it fits And the z-index I would bring the
value down a little bit So this third card is on top So it covers this card underneath this third card
so it covers the second card This card has to be on top of the second card
but underneath the third card So try and set the Z-index values that way So it feels like we could add some more negative margin This might be a little bit tricky to figure out And you might be afraid it might not work on other screen resolutions But we could see and figure this out And I would not expect any problems
because we’re not doing anything really risky here Simply changing the paddings, margins and Z-indexes So let’s go to the preview and
see how it works As you see it works a lot smoother in the preview And as we keep scrolling
we don’t see the cards peeking out anywhere So this was sort of
the simpler version of this animation You still have the cards they still
overlap But there is not much going on like not much animation movement not that exciting So now let’s see how I can make it
a little bit more lively and interesting By the way once again want to mention that all the rest of the sections that you have on your page Down below the page have to
have the higher Z-index than your cards Because something like that might happen So make sure that
the rest of the sections like here Just go to the settings of those sections
go to advanced and just increase the Z-index So it is higher than the Z-index of your cards And also make sure that your
sections have a background Now let’s see if we can adjust it
to the smaller screen somehow For example for a mobile device The stick effect is going
to work on mobile devices for sure But the sections themselves might look a little bit weird So what I can do here
is to access the responsivity settings For example let’s click on this section Let’s go to advanced and just drop all
of the settings that we already have here Also I want to go and hide
this particular image on the mobile devices This is how I can do it go to a responsive mobile and this is for this particular image Then change the
settings for each elements Make sure that they all look nice and they
are centered Like that this is how we can drop
the margins and paddings for your elements This does not erase the settings
that you have on your desktop layout already It only effects these settings for the mobile devices So don’t be afraid you’re not going to lose
any of the settings that you already have And I’m going to do the same with the rest of the cards Now once we’re done with the cards
let’s work on that negative margin that we have set here Let’s increase the padding for the mobile version now Like that might be 300 and add the negative margin again So we cover these cards that are underneath It works pretty fine
and I don’t see any problem with it for now But it’s not always the best idea
to use something like this Something like sticky sections
for your mobile layouts So before you use something like that
make sure it is tested and it works properly All right now when we want to add some animation
to these cards it might be a little tricky And the bad news here is that you will have
to figure out some of the values yourself Depending on the size of your page
and the number of the cards on your page Let’s see what I mean actually So what I want to do here is to go to the
settings of this inner section now So not the parent section which is card one
but the inner section that is inside our card one There it is
so as we click on it It is now selected we can see that it’s
actually that particular card here the styles And if we go to advanced and motion effects Now we are going to need
to work with the skirling effects a little bit The reason why it might be tricky
to pick the values for these cards Is because we are going to have their effects relative
not to the viewport but to the entire page Let’s see the difference If you set the effects to be relative to the viewport The height of your viewport is going to
be 100% and Here have these sliders and this is the hundred percent this is your height of the viewport The viewport is what you can actually see on your screen Everything that is outside your viewport that is not visible for you at the moment it is not considered But if you set the effects to be relative to the entire page Then it means that the height of your page Your entire page is 100% And since our elements become sticky As we reach them, as we scroll down the page They are going to stay at the top of the
viewport all the time It means that no matter what settings we set for this
particular effects They’re not going to affect the card because the card is not going to be moving at all It’s going to be stuck here at the top of the viewport This is why we need to set the effects to be relative to the entire page This is why it becomes tricky a little bit because
you will need to pick different values Your values are going to be different
from mine Because the height of your page is going to be different,
the length of your page is different, The number of cards you’re using is different, the size of the elements you’re going to be using will be different So I can only show you the workflow And you’re going to adjust it to your needs depending on the size of your page, The size of your elements and the number of your cards Let’s see what we can do here So first set the effects to be relative to the entire page And not the viewport and not
default because default is usually the viewport And let’s set it to the entire
page Then let’s start with the transparency So we’re going to make this card disappear As the second card reaches it
and covers the bigger part of the first card Okay So let’s click on transparency and choose fade out Set the level to see 100%
not 10 but to 100 So we have to add the extra null So it’s a little Jaggi here in the editor
but it works fine in the preview The first car disappears because I have said the 35% If I said the higher value It is going to disappear a lot later or if I said the smaller value It is going to disappear a lot earlier As you see we haven’t even reached it yet
but it has already disappeared So the first slider in this case is this point
at which this card is going to start fading out The level is 100 and we set the 100 to make sure
that the card is going to totally disappear And not become a little bit transparent but totally disappear And the first point has to be 35% in my case Because if I open my entire page I’m going to see
that This particular card the first card is placed somewhere At this point at the 35 percent of the entire length of my page I hope it makes sense Now I have to do the same for the scale Let’s click on the scale property, Direction, scale up, not scale down but scale up Because if we said scale down it is gonna do something completely different not what we need So we need to set it to scale up so for now as our viewport reaches the 35% It started scaling up and disappearing I get 35% and now I’m going to bring this
slider down to minus 10 And this is here the card becomes smaller
now instead of growing bigger And for now as our second card reaches our viewport The first card is almost completely gone,
like that Okay, now let’s try to do the same with the second card But for now as you can guess we’re going
to need to apply different values Because this card is a little bit down
the page and it’s not going to be 35% this time But it’s going to be around 50% Let’s see what we can do here Effects relative to entire page not the viewport Then transparency set it to fade out Slider up to 10 and then add
one extra node And then the first slider has to be moved around 50,
let’s say 53 this time And now let’s try and scroll down Maybe a little suit early, let’s say 55 I think 54 will do Maybe let’s send back to 53 So as you see it is totally dependent on the case on the particular page on the particular set of cards On the particular effect that you are going after And I have to adjust my values depending on the position of these cards
on my page And the actual length of my page So you have to simply figure the
workflow out and then it’s going to be easy Now let’s change the scale settings for this section So it is scale up Bring the speed down to minus 10 And the first slider see you the same value that we have set for the transparency it was 53 53, like that And now as we scroll up the
second card slowly shrinks down and disappears Now let’s see it on the
preview There we go this is what it looks like all smooth and nice
now our animations totally work So this is pretty much it for this tutorial Let me know if you liked it,
if you found something useful and valuable for you And go and try this on your website and let me know how it worked out By the way if you need a pre-made design for your web projects check out Where can find thousands of ready-made
website themes for any purpose and any business Suitable for both absolute beginners and seasoned web developers Or if you want to buy WordPress themes and plugins in bulk check out One subscription by TemplateMonster Where can find over 10,000 products
for website building Including WordPress themes, CMS templates, ecommerce templates, illustrations, plugins, graphics and much more All available for unlimited number
of downloads for unlimited number of your projects And I thank you so much
for watching – see you in another tutorial


Add a Comment

Your email address will not be published. Required fields are marked *