Overlapping Sections With Sticky Header and Footer with Elementor

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 Monstroid The best multipurpose modular Elementor WordPress theme Which shows you to customizeheaders and footers for your website And provides thousandsof ready-made pages and sections And also a dozenof 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 themesand plugins in bulk check out One by TemplateMonster One is a subscription servicethat 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 Template Monster 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 hereand we need to select the header And this is how we’re going to see a classin my case it is called page title What I need to do here is to select it copy itand then jump to


the WordPress dashboard In the desk board go to Elementor setting sand 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 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 ways 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 view port is this section because intakes up all the width and all the height of my page And now this is the only thing that I can see in my view port 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 butte 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 value sand 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 haven 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 template sand 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 cases 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 topof all the other sections on the page This is done but how can we achieve thathidden footer type of effect Let’s now get back to the theme builderand go to footer sticky edit with Elementor And we’re going to see what settings we canadjust there to make the footer sticky too Yes we’re actually going to make it sticky but it’s goingto 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 becauseit’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 itbut 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 footers it is not transparent But if we do just that this is what is going to happen This footer is going to stain the view port 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 ta band 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 herein 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 Monstrosity on And One subscription by Template Monster 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

Leave a Comment