Peter
If you would like to learn how you can overlap sections in Elementor to not only give you quick access and navigation but also create a layered impression of your sections or widgets on your website, then this is the tutorial for you!
Overlapped sections can be blocks or templates that you import into your Elementor design canvas. To work with section overlaps, you need to make the most use of the Z-index, -margins, and the Elementor navigator.
Create Your Elementor Sections
01
In your dashboard, go to pages and open up any page with Elementor.
When your page opens up, under Page Settings set Page Layout to Elementor Canvas. Then click the (+) icon to create a new section with one column
In your new section, add a widget; click on the widget’s icon and in the search, type divider to get the divider widget, drag it to your section
Overlapping Two Sections in Elementor
02
Now that you have your two sections, the next step is to overlap them. First, I’ll show you how to put the blue section on top of the red section.
For this, you’re going to need the Elementor Navigator. The navigator icon is at the bottom of your Edit Section on the left
When you click on the navigation icon, your navigator shows up. The navigator gives you quick access to your sections and helps you navigate through them. And when you click on the ‘eye’ beside a section it’s hidden.
Overlapping Three Sections/Widgets In Elementor
03
Now, let’s say you have more than 2 sections.
To see how this works, you need to create another section.
Select the blue section and duplicate it, select the duplicated section and under Advanced, set its Z-index to 0, and Margins to 0 pixels. Under Style, you can give it a different color.
What I want to show you in this tutorial is to be able to learn how you can overlap sections in Elementor to not only give you quick access and navigation but also create a layered impression of your sections or widgets on your website.
Check out more on this story on the link below.