In this tutorial I want to show you how to use the Elementor Z-index option and I will explain what it’s for and why you should use it.
The Z-index can be used for everything that you can select in Elementor, for example a section, column or a widget.
With the Elementor Z-index option you can manage which widget has to be displayed on top of another widget.
Watch tutorial on YouTube
Elementor Z-Index settings
To manage the Z-index options you need to select an element and go to the Advanced tab.
Below the margin and the padding options you will see the Z-index option being displayed.
The Z-index is a very helpful future and let me show you an example.
On the image below you can see that this button is now displayed in front of the text.
How to use the Elementor Z-Index
But if I want to place the text in front of the button then I can select it and go to the Advanced tab over to the Z-index. Here you can enter a value and you have to make sure that it’s higher than the Z-index that is now being display in front of the element.
By default the Z-index for all the elements is always set to zero. So any given value is higher than zero. So for example I will change the Z-Index to 10 this and change the text to a red color to make it better visible. Now you can see that the red text is in front of the button because that Z-index is set to 10.
In the video tutorial I will explain everything in more detail and you can watch it on YouTube over here.
In the tutorial I will show you another example for the Z-index settings.
In other tutorials I have explained how to create cool effects such as:
- Sticky header scroll effect with Elementor
- Scroll effect (paralax for sections) with Elementor
- Motion effects with Elementor
- Pop ups with Elementor
- Open Pop up on button click with Elementor
- PDF Download button with Elementor
Check out this tutorial to learn the Elementor basics in 7 minutes.
That was everything for this tutorial. I hope you found it helpful, please make sure to like, subscribe to the channel and hit the notification button. Thanks and I hope to see you back in the next tutorial!