In this tutorial, I’m going to show you how to work with the Z-Index in Elementor.Â
The Elementor Z-index works just like layers for example in Adobe programs like Photoshop, Indesign or Illustrator. You can use the Z-Index to position and or overlap sections in Elementor.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Using the Z-Index In Elementor
I’m going to use a template in my Elementor website with 3 hero sections that are independent of each other; in the Edit Section area on the left, Advanced > Margin, they all have 0pixel margins (00:33).
1st Hero Section (Dark Blue)
2nd Hero Section (Black)
3rd Hero Section (Light Blue)
If I select the second section then under Advanced > Margin add -70pixels for the Top margin, this second section will take up some space from the first one (overlap it).
Select the third section and also under Advanced > Margin give it -70pixels for the Top margin, the third section also overlaps the second (01:14)
As I mentioned earlier, the basis of the Elementor Z-index is like layers of Adobe programs like Photoshop, Indesign or Illustrator.
So in this case sections 1, 2 and 3 are layers, and you can give priority to, for example, layer/section 1 to be on top of 2 even if layer 2 is already on top of layer 1.
To make that happen, you’d make use of the Z-index feature by giving the layer you want to be on top a greater Z-index than the other.
In this case, section 2 is on top of section 1, but if you select section 1 and go to Advanced > Z-index then give it a 1, section 1 automatically moves to the top of section 2 (02:14).
In the same way; if you for example want to put section 2 on top of section 1, you give it a Z-index greater than that of section 1, that’s a 2.
When you go to the third section, it’s overlapping the second by 70 pixels, it is on top (02:45).
To put the second section on top of the third section and the first section as well, you give it a Z-index that is greater than that of both the first and the third sections.
Select the second section, use the navigator (icon at the bottom) to do so since it is below the first section, making it hard to select it.
Under Advanced > Z-index, give it a 2. This places it on top of both the first and third sections (04:09)
In closing
That’s how you can make use of the Z-index in your sections on your Elementor website.
For any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.
