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.
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: Overlap Sections in Elementor Tutorial
1. Create Your Elementor Sections
In your dashboard, go to pages and open up any page with Elementor. (00:34)
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 (00:50)
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. (01:00)
Select the section and in the Edit Section area on the right, under Layout, set Height to Min Height of 400 pixels. Then under Style, give it a background color (i’m giving mine red). Select the divider and also under Style give it a white background (01:24)
Also Read: How to Compress Web Images for Free by upto 94% (JPEG, PNG and WebP Image Optimization)
Select the section, right-click on it and Duplicate it. (01:39)
Select the duplicate section and under Style give it a different background color (blue in my case).
2. Overlapping Two Sections in Elementor
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 (02:10)
When you click on the navigation icon, your navigator shows up (02:18). 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.
To Read: Is WordPress Outdated or Worth Using?
To overlap the blue section on top of the red, select the blue section, in the Edit Section area on the left, go to Advanced; under Margins give it a Top margin of -100 pixels, this moves it into (on top of) the first section. (03:24)
If you want the red section to be on top of the blue instead, select the red section and go to Advanced, go the Z-index and set it to 10, (03:49). This automatically overlaps the red section on top of the blue section.
The blue section originally overlaps the red because it has priority. If the red section has a Z-index of 0, the blue by default has a Z-index of 1, therefore it’s on top. Basically, whichever section has a greater Z-index automatically moves on top of the other.
To Read: How to Add Custom Fonts in Elementor and Generating Font Pairs
3. Overlapping Three Sections/Widgets In Elementor
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. (06:12)
If you want for example the blue section to be on top of both sections, you would have to give the blue section a Z-index that’s greater than both the red and the green sections.
For example, the red section has a Z-index of 1 and the green has 1 too (the default). So select the blue section and give it a Z-index of 3.
To see this change clearly, select the green section and under Advanced, give it a Margin of -20, so it can move into the top section. Then you can be able to see that the blue section is on top of both sections. (07:10)
This overlapping effect even works in responsive settings. You can for example select the mobile device under Responsive Mode (04:48), and choose to make whichever section you want on top a greater Z-index.
Also Read: How to reCreate Websites with Elementor based AI Builder – 10Web
That’s how you can overlap sections in Elementor and even have the overlap working on other devices.
For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and the Youtube channel for tips and tutorials.
