eb and flo digital logo

How to Use Z-Index in Elementor

So you’ve designed your beautiful new website and are about to start building it. There’s a lot of things to know at this phase, and sometimes the things that seem the most simple are often the hardest to do.

Let me bring you to a common part of web design, which is stacking things on top of each other. If you’re not a web designer or developer by profession, this one may be a little tricky to do. In Elementor it’s easy enough, but I often get questions from people on how to do so. I partially believe it’s just because it’s named Z-Index, rather than anything usefully named or related to stacking, layering or placement!

So if you’re looking to stack things on Elementor, you’ve come to the right place. Here’s just how to do it!

The Z-Index function will tell Elementor the stack order of elements, and how you want them to be placed. Think of them like layers.

  1. Navigate to the side editor in Elementor on the page you want to make edits to
  2. Open the ‘Advanced’ tab on the  top right
  3. Under ‘Element style’ find the ‘Z-Index’ section
  4. Any element with a greater layer order will always be in front of an element with a lower layer order
  5. So that means any element with a Z-index of 20 will sit on top of (or in front of!) an element with a Z-index of 5.
  6. Order the objects with numbers how you want them to be displayed
  7. Save your changes, publish (make sure they’re ok on mobile!)

And ta-da! You can now layer things on your website.

 

Source: Elementor

More Recent Work + Projects

How to Use Z-Index in Elementor

So you’ve designed your beautiful new website and are about to start building it. There’s a lot of things to know at this phase, and