How to Overlap Images in Elementor - WpBuilt 1350476922971634823

How to Overlap Images in Elementor

In this tutorial, I’ll be showing a quick demonstration for making those “overlapping” images in a grid or column in Elementor.

Step 1: First create a section where you will place the widget.

How to Create Icon Only Buttons5

Step 2: Add your desired column. In this case I will choose a two-column structure.

Overlap_Images_in_Elementor4

Step 3: Let’s add some content to our columns. At the right column I will add some text and let’s leave the left column blank.

Overlap_Images_in_Elementor1

Step 4: Now let’s do the overlapping image trick. Go to the Section’s Advanced Tab put the code below to the Custom CSS.

selector:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: url(https://wpbuilt.co/wp-content/uploads/2020/01/overlapping-image.png) no-repeat;
    background-size: contain;
}

Step 5: To know the link of the image goes to the media library of WordPress then you will see the image link on the right side.

Overlap_Images_in_Elementor2

And now, we’re done!

Overlap_Images_in_Elementor6

Overlap_Images_in_Elementor3

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×

Cart