How To Use Z-Index in Elementor

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)

rMf1 a7iNQlN8s4DylRFJtzf0yCD7vga9Mt2fncUAgBAZBMrgdV0zk0YDz1NwPE6a5n0P0XRkeU L1in9uB7weXJr6 8 IrldmIlRSskTOEC0EAQGUSrFJDii78XdcquHjS2ekw9

2nd Hero Section (Black)

Nxs1lqu3R8tMfZbLWUFzm3izuVuGfAS34U2fouDe7t FzGe DBgN5z8UO3ZXcZEQLj16r2OuPtOFvZcvFuwKLqYuVrh9NVeSURNanLnyMnPHFK aY72R7bkwBeGiqcFNRvJbZKuV

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)

4opHjKRH46Is26UPUn50V1o9 dIaNzqFKN7V uCqAcm WEB5pCu8VEC7T4wzBxhSajLoWb9ntNXkNsG1p9lDhRcVs 4wiTTgl B1Gv8yTgYb2UllA3BOFAWt8 FVKrC1jjqIZ

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

X inKTy wYN3oc8lYTRLduyEQlNd5PDZOkGq5q lMYgkXt5ChpJ8uM91 3aapzwgrivU3U BJwkOZbr o7ZXnU5pV9Nl65vNLYqkH3eor84 JywB jbaPmXHkeKqTCf9H BZOYZo

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)

making using of the z-index in elementor

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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users