Overlapping Sections + Sticky Header and Footer with Elementor | Elementor PRO Tutorial


Hi everyone and welcome to this tutorial In this video we’re going to have a look
at how to create a similar page With sticky overlapping sections,
a sticky header and a sticky footer That is revealed once you scroll
till the very end of the page To create such a layout
we’re going to need to use Elementor Pro Because unfortunately sticky functionality is not available for the free version of Elementor page builder But before we start a quick reminder
that on Elementor marketplace by TemplateMonster You can download hundreds of WordPress themes and page templates built with Elementor page builder Choose from a dozen
of Elementor add-ons and get Monstroid2 The best multipurpose
modular Elementor WordPress theme Which shows you to customize
headers and footers for your website And provides thousands
of ready-made pages and sections And also a dozen
of Elementor add-ons all in one package If you’re interested check out
the links in the description In case you need to buy WordPress themes
and plugins in bulk check out One by TemplateMonster One is a subscription service
that offers over 10,000 products for website building For only $17 per month you can download an unlimited number of products and unlimited number of times And use them for an unlimited number of projects Check out the link to One subscription by TemplateMonster in the description under this video And now let’s proceed to the tutorial This is what we are starting with We have a header which is not sticky for now,
we have three sections and a footer I’m going to walk you through the entire process step by step And we’re going to start with this layout I have already pre-made a header
using Elementor Pro and also a footer But usually when you start editing
your pages on the default page layout Not on the Elementor canvas button default page layout you’re going to have a Seidel also visible underneath your header And for this particular case we do not want to have this title here so you can enable the high title option It might be that this is not gonna work for your theme because in some themes headers have different classes It is pretty easy to fix just go to the preview of your page And here we’re going to need to
access the inspector You can either right-click and choose inspect or you
could also use hotkeys Which is F12 for Windows
and Command+Options+I for Mac And here let’s choose this icon here
and we need to select the header And this is how we’re going to see a class
in my case it is called page title What I need to do here is to select it copy it
and then jump to the WordPress dashboard In the deskboard go to Elementor settings
and then in the style tab And in the page title selector field insert
the class you have copied after the dot Now this all should work great
let’s test it Here we go, now our title is hidden And what I want to do here is to grab this section
and move it so it is underneath the header The minimal height that I have set
to the header was 70 pixels So I’m going to try and insert
the negative margin here of minus 140 pixels So this is how the top of the section matches
the top of the header so this is done Now we have a navigator here and if you are not using navigator I totally recommend you to start using it Because it’s a really convenient tool and for some
workflows it is absolutely necessary to use it Because it’s a huge time saver
let’s see how we can open a navigator The first option is to go and click on
this icon here It can also close it the same way another way is to right-click anywhere on your page and choose navigator First of all let’s see
we can benefit from using a navigator In our case if I want to change the order of my sections
I can simply drag the sections here in the Navigator So I don’t have to drag the actual sections on my page I simply can’t drag them over here So it works pretty much the same way
as let’s say layers in Photoshop We can also rename any section and any
elements you have inside your sections And for us it will be really helpful that we can access all the settings of this section from here Because once we’re going to make them sticky
and once we’re gonna make them overlap This is gonna be pretty tricky to access the settings for certain sections or certain elements on this section So once we are all set let’s work on the
actual sections and let’s try and make them sticky I will start with the first section And first of all if you’re working on the default layout Also make sure
that you have enabled the stretch section options Because if you don’t is gonna look like this
it’s not gonna take up the entire width of the page But what you want is the section that is fully stretched to the entire width of your page Also to make sure that your section
takes up all the height of your page Set the height of the section to fit to screen Now let’s go to the Advanced tab And in the motion effects in Elementor Pro you have the sticky option and we need to choose the top option here This is what happens and here as you can see I scroll down But all I can see in my viewport is this section because it
takes up all the width and all the height of my page And now this is the
only thing that I can see in my viewport We’re pretty much done with the motion
effects Here let’s see what we can do with the Z-index So that index is essentially the thing that allows you to order your sections on the page from top to bottom The items with the higher Z-index will be on top
of the other items with the lower Z-index So let’s start with five here It means that if I go to the section number two Here it is you can see this bounding box sliding up but
we don’t see the actual section Because it’s Z-index is lower by default it’s zero
now it is lower than the Z-index of the first section So let’s just set a higher Z-index, let’s set six Even if we say six
it is going to already be on top of the first section So for now it looks something like that We have achieved the sticky overlap in effect And let’s proceed doing that
we’re still in the settings of the second section So Z-index is set in the motion effects
again sticky to top Now the third section Go to advanced and we need to set Z-index at this higher than is Z-indexes of the first two sections Which will be in our case seven You can pick your own values depending on how many elements you have and how you want to arrange it Organize them, this are just my values
and you don’t have to use the same ones So there it is This is what it looks like on the full screen So this one looks pretty nice but we have
no header right now at the moment How can we fix that? First we need to get back to the WordPress dashboard and go to the theme builder It is under templates theme builder and here we can access all of the theme parts that we have Including headers, footers, single page templates
and archive page templates Header sticky edit with Elementor First of all we’re going to make it sticky to you so it stays at the top the patients would scroll down And we’re also going to change its Z-index so it
stays on top of our elements on the page So let’s select this section,
go to advanced and in the Z-index We need to set the value that is higher than the highest Z-index that our elements on the page have In our case it was 7 Let’s set it to 10 just in case
so it is the highest value for sure Then motion effects and I’m also going
to make it sticky to the top and update Now if we go to the preview
and refresh the page this is what we see As you scroll down
the header stays at the top of the page And it also follows us and it is on top
of all the other sections on the page This is done but how can we achieve that
hidden footer type of effect Let’s now get back to the theme builder
and go to footer sticky edit with Elementor And we’re going to see what settings we can
adjust there to make the footer sticky too Yes we’re actually going to make it sticky but it’s going
to be sticky according to the bottom of the page This is our footer, you can customize it the way you like But don’t make it too huge because
it’s not gonna look so good on this type of layout Now let’s select this section in advanced the Z-index should be somewhere In between the Z-index of the second card on our page and the third card So it is on top of the second card so it covers it
but the third card is on top of it So once we scroll down to the end of the page the third card will reveal our footer So I hope it makes sense and now let’s try and set it to seven in the motion effects tab It is sticky to bottom But we also don’t want to see the second
card picking out there somewhere So let’s set the background color for the footer
so it is not transparent But if we do just that
this is what is going to happen This footer is going to stay
in the viewport the entire time And the third card is going to cover it and then review it again But what we don’t want is this footer being visible
while we’re scrolling past these two first sections This is an easy fix, let’s see what we can do First off while in the Advanced tab
and the motion effects tab We want this footer to be hidden or to be not visible while we are somewhere around to first sections And we may allow it to And we can allow it to appear once it is behind the third section and we cannot see it anymore Let’s enable scrolling effects and
enable the transparency option But these are the values that worked for me Fade in, I set 10 as a value for the level And I move the sliders this way the this
sliders stays on 100% And the position of this slider
will depend on the length of your page So you try and figure out the values yourself For my layout it worked somewhere around 55% This what it’s gonna look like
you’re gonna see how this effect works You won’t be able to see it in action here in the editor
while we’re edit in the footer Another important thing here
is to set effects relative to entire page We don’t see the footer anymore This is where you can use the navigator if you want it to access this settings again So this is pretty much it I’m done with this settings Here it means that this footer is gonna be fully transparent Is going to be fully not visible somewhere around 55% of my entire page And it is gonna appear once we reach
it is gonna start to appear once we reach 55% And it is going to be fully transparent around the every end of the page This is what I figured out playing around with the values you could try your own values and see how it works Before we update as you remember we have moved our top section underneath the header So it had to add the negative margin Now in order to put everything in place and have no extra space in between our footer and our third section We need to add the margin, negative margin again
and this time it will be minus 70 Like that and click update And if we go to the preview we’re going
to see that header is staying on top Cards overlap each other
and we don’t see the footer And once we reach the first section and once
we scroll down And we see that our footer is being revealed This is what it looks like And this is the result that was our goal
that we were going to achieve And we’re pretty much done with this tutorial If you liked it leave us your thumbs up, subscribe to our channel And leave your ideas for the future
tutorials Also don’t forget to check out Monstroid2 on templatemonster.com And One subscription by TemplateMonster Which offers you over 10,000 products
for website building at only $17 per month And if you’re lucky you can even
get the subscription at a discount So I hope you found this tutorial useful
thank you for watching, see you in another video

5 Comments

Add a Comment

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