Overlapping elements in Elementor can make them look unique, professional, and stylish. It also allows you to fit more information in a small area without making it look blocky or boring.
The good news is overlapping images, text, and other elements is as easy as it gets when using Elementor.
To overlap elements in Elementor, make multiple sections in the page builder, depending on how many elements you’d like to overlap.
Next, change the z-index margins on one of the elements to make it move under or over the other. You can change the opacity to make the bottom image show through a bit.
This article will also teach you the following details about how to overlap elements when using Elementor:
- The step-by-step process to layer images and other elements
- Additional tips for adjusting your overlapped elements in Elementor
- An alternative solution to code your elements over one another
Create Multiple Sections in Elementor’s Design Page
You can overlap plenty of images, but it’s best to start with two until you’re comfortable with the process. Gather the images you’ll use, then create two sections on Elementor’s page builder.
Element recommends coloring the backgrounds before adding the elements to identify them and keep them separated.
Feel free to use images, text, and other elements when overlapping two sections. However, we suggest creating text documents as images with your favorite photo editor.
Overlapping pictures is the easiest method since you know the dimensions. It also allows you to create two images with the same pixel ratio, making them look uniform and professional.
Once you’ve created all of the necessary sections, head to the next step to learn how to place the overlapping elements.
Related Reading: Elementor Pro Review
Place the Overlapping Elements
Choose how you want to overlap the sections. You could place them side-by-side, one over the other, or diagonal from each other.
There are countless options. You could draw the outline on a piece of paper to know how you want the design to look before overlapping the images. Fortunately, it’s easy to go back and adjust any mistakes when you’re finished.
If you’re setting and overlapping several elements on Elementor, you should place them in a square. This alignment makes them easier to move when you adjust the margins in the following section.
It also makes the overlapped elements look better if you’re changing the opacity or adding thick borders.
Adjust the Elements’ Margins
This is perhaps the most important and difficult step on the list. Changing your elements’ margins can be a bit tricky, especially if you’ve never used a page builder. However, we’ve got you covered with a simple two-step process.
Here’s how you can adjust the margins and z-indexes to overlap the elements:
- Click on the photo to highlight it, then change the margin to correspond with the desired location. For example, if you want the image to go down and to the left of the other photo, add a positive value to the ‘bottom‘ section and ‘left‘ section. You can’t always drag and drop an image partially over another, so the margin adjustments make it easier.
- You have to change the z-index value if you want to decide which image goes over the other. When you have the image highlighted, click the ‘Advanced‘ tab, then add 10 to the z-index, which will pull the image to the front, making it overlap the other.
If you want to make a few pro-level adjustments, read on. If you’re happy with the current results, you’re good to go!
Alter the Opacity, Size, and Border
The opacity is the element’s transparency. If you want both photos to show through each other, adjusting the opacity is the best thing to do.
With the top image highlighted, click the ‘Style’ tab at the top of the editor, which will give you access to the opacity, size, border, and more.
Reduce the opacity percentage by about 5% to 10%, then check the results. Feel free to change both elements’ sizes and borders by highlighting them at the same time.
Drag the cursor over both elements, click the style tab, and make your adjustments. Remember, adjusting the opacity on both elements will make them both see-through, which will reveal the blank page underneath them.
Related Reading: Is the Plugin Elementor an Easy Way to Build Websites?
Use Optional Coding to Overlap Non-column Images
If you’re comfortable changing your website’s coding, WB Built has a quick guide to get it done. Follow the steps below.
- Add the widget to the page, then choose the column’s layout as you did on the first and second steps of the previous method.
- Place the images, text, or other elements in the columns.
- Click the ‘Advanced‘ tab, toggle the Custom CSS, and copy-paste the code on the WB Built link.
This setup will pull the image to the front and move the other to the back. Remember that it only works when you’re using two elements.
You can’t use the code with more than two, but it’s a fantastic solution to avoid the margin adjustments. After that, adjust the opacity and other settings.
Conclusion: How Do You Overlap Elements in Elementor
Overlapping images doesn’t have to be a headache when you’re using Elementor. This page builder is designed to make website creation much easier and more enjoyable, which is why you can follow the previously mentioned four-step process to improve your site.
Get your images, adjust their margins, and make the best appearance possible.
Here’s a rundown of the post:
- You can overlap several elements in Elementor’s page builder.
- Choose between the coding solution or manual adjustments.
- Adjust the size, border, and opacity for a unique appearance.
More Elementor Articles:
- How to Get Started With Elementor
- Elementor Pro Review
- Elementor Pro Discount
- Best Elementor Add-Ons
- Why is Elementor the Best Page Builder?
- Elementor vs Elementor Pro
- How to Use the Elementor Free Page Builder
- How to Use the Elementor Theme Builder
- How to Add a Popup With Elementor
- How to Create a Countdown Popup Using Elementor
- Create a Cookie Consent Popup Using Elementor
- How to Create an Under Construction Website Using Elementor
Leave a Reply