How to Overlap Sections in Elementor

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)

2ietuYdoi0ukaoWgvTos5HlMERdnDxxS5 ylCUdp5Iqazi 4Sa5a5YtnmCUeITVf49s8XaHXL16S3Lr 60oJROr COrhZEMPbANb7OUMtOAfk VDRiEJ5ou0gttNH1NJ9ntAi
yN6dpA4I3VCSy4jVvORySwDMuRgHOUdSWOfnyGgPDrlHccZUSwYZqhTShWaJd043L7hubYExZg4meGuXw5zSH8e7JrFAHTEGbEJjXWOq8D4MzE0Ces91wNKydGY7wnVPKx TtFWp

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)

hvJwHIkywMYnSHv6ND2nToY3Op4j9oh2dFEjgAQndzLdXA5eDx WybK6EOhkGEJvqLHc
BkHMEG70Oajl0PzOFE3C L bc9 q1Aqg1AuV4gXKsUFnzmuLoJFtfsYOKzdHpjTdxSJuEAZ4UOADUblxwZM1HVf3jNazZywGbsrIlmOuzXgoW4ZvoS98p 9CWPHcPdeV1j0TH2hl

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)

XbNjZ9IAD0phNwXMUh4VoITqC5ymPdm49CBWNokCrj0vhLuffhqoRkoo6v2mOtirrVgubGGt4RtvIRh2CjmbY5I46w18ma7JVcmRubu3unL1vlrh1Q8Hr83Eewgvab7pOPDmTgiQ

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)

zH4 gojZoN2arLYbwox8p2i1 hYvFvjosZAGc4kQ1grTx0Ha3IHVojN0SbNpwDHIIRC3CteqLYv66Fqkg8oWoSgA6v1RWxcs N1GIBUh3e0cbQclk7gHhESWovyZyjhsE WoW2k

Select the section, right-click on it and Duplicate it. (01:39)

3v5cTopNPYJxIPbteItYvXrOv16PbFrrUNI2nmhWbYoyrsYVpn NA4JJurj6ukkbT9i8RDH7KaJ5oTqxyad6

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)

i9OpSosoxkraC yBZtnHtDjk7c8mngICyZc1eM

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?

bXOQ x0ZHP4ereHhD84PR r 6L58jUi7KX6lrW4A2UHh1E4QMdeztHOSlZh0UmUzrx5TF1uN F7vbqmpDfBEXIGYE8GHJ5cl8y4SzZ133WKNKxB3RXoKWBHVyXsBn wr44iPedmK

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)

Overlap Sections in Elementor

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)

Overlap Sections in Elementor with Z index

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

x0LtQVSpYtMTjcWW08 8RwhlDU0c9MaQWMrJ

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of 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