Overlapping Images Divi Tutorial

 

Create a seriously impressive Divi image module with overlapping images in this Divi tutorial.

The Divi image module offers a ton of options for customization, helping you to create virtually any type of image display you want.

From placing an image anywhere you choose on your web page to adding animation, the Divi image module helps you achieve it all.

 

But sometimes, you want an even more unique effect to really make your website stand out.

And that’s where this Divi tutorial comes in:

In this post, I’ll show you how to add overlapping images to your Divi website, for extra design impact.

 

You’ll learn how to create images that overlap, giving your layout a cool, super-professional look. Even better, in this Divi tutorial, you’ll also learn how to add animation to your images.

 

You’ll create images that slide towards each other from opposite directions and overlap.

 

The finished effect will give your website major design points!

 

Ready? Let’s get into it! 

 

Add Overlapping Images, Divi Tutorial

 

 

Start by logging into your website. Head to the page you want to add overlapping images to, and at the top, click the purple “Enable Visual Builder” sign.

 

Click the blue and white plus icon to add a new section.

 

Then select “Regular”. This will create a regular row on your page.

 

 

How to add overlapping images, Divi theme guide

 

 

Then, for the row’s layout, click the gray and white icon and select the “1/4 1/4 1/2” layout option.

 

How to add overlapping images to Divi theme website

 

Click on the gray and white plus icon on the furthest left 1/4 column of the row. Here, select “Image”.

 

Add overlapping images, Divi WordPress theme

 

Then, in the image module, click the little gear icon to select the image you want to put in this module.

 

 

Overlapping images in your Divi website, WordPress

 

Click on the “Design” tab and in “Spacing”, input the following:

 

Under Custom Margin Right: -60px

 

Then scroll down to “Animation” and select the following:

Animation Style: Slide

Animation Repeat: Once

Animation Direction: Right   

 

How to add overlapping images in Divi, stacking images tutorial

 

overlapping images Divi

 

Click the check icon at the bottom of the Image Settings Menu to save all of your changes and return to the page.

 

You should now see your selected image sliding in towards the right.

 

Okay, now it’s time to add your second image, to create that awesome overlapping effect.

 

Click on the gray and white plus icon in the middle 1/4 column of your row and select the image module.

 

Add overlapping images, stacked images Divi

 

Then hit the little gear icon and select the image you want to overlap your first image.

 

 

Adding overlapping images in Divi image module

 

 

Next, click on the “Design” tab, scroll down to “Spacing” and input the following values:

Under Custom Margin Top: 100px

Under Custom Margin Left: -60px     

 

 

Further down in “Animation”, input the following settings:

Animation Style: Slide

Animation Repeat: Once

Animation Direction: Left  

 

Divi Overlapping Images Tutorial

 

 

 

Save your settings and return to your page.

 

You should now be able to see your two images sliding towards each other from opposite directions, and then overlapping slightly.

 

Pretty neat, huh?

 

Adding Your Text Module, Divi Tutorial

 

Okay, we’re almost done with this section! Just one last thing — the text column.

 

In the final 1/2 column of your row, click the plus icon and select the text module.

 

Make overlapping images display in Divi, animated image

 

Animated overlapping images, Divi

 

In the text module settings, under “Content”, type in the text you want to accompany your images.

 

Create overlapping images in Divi WordPress theme

 

In “Design”, you can adjust the settings of your text as you like.

 

I’m creating a section for a food and lifestyle blog, so I’ve gone for a mix of traditional and contemporary fonts.

 

For reference, my text module settings are:

 

Heading Font: Playfair Display SC

 

Heading Font Weight: Bold

 

Heading Text Alignment: Center

 

Heading Text Color: #ffffff

 

Heading Text Size: 36px

 

And in the Text Section:

 

Text Alignment: Left-Aligned

 

Text-Font: Raleway

 

Text Font Weight: Regular

 

Text Color: #ffffff

 

Text Size: 16px  

 

 

Your finished section will look something like this:

 

Animated overlapping images section in Divi

 

 

 Duplicating a Row, Divi Tutorial

 

Next, we’re going to create a similar row below this one, but in reverse.

 

We’ll still add overlapping images but they’ll be placed on the right of the page, with the text module placed on the left.

 

 

This part is super-simple and will only take you a couple of minutes!

 

 

You’ll need to start by duplicating the section you just created. To do this, click on the blue section and select the “Duplicate Section” icon. 

 

 

Duplicate overlapping images row in Divi theme, WordPress

 

This will duplicate your section and all of its contents. You’ll essentially have two sections with the same overlapping images and text, like this:

 

Overlapping images Divi, WordPress

 

 

But the second section should differ slightly from the first one, for a more balanced design.

 

Instead of the overlapping images being on the left, and the text on the right, you can move the images to the right and the text to the left.

 

To achieve this, you’ll need to change the duplicate row’s column structure from 1/4 1/4 1/2 to 1/2 1/4 1/4.

 

Click on the green row settings and select the “Change Column Structure” icon.

 

 

How to duplicate overlapping images row in Divi

 

This will pull up a menu of column structure layout options for you to choose from. Scroll down and select the 1/2 1/4 1/4 column structure for your duplicate row.

 

Change image column structure in Divi, WordPress

 

You’ll now notice that your left-hand image module has gotten much larger to fill that 1/2 space.

 

And your right-hand text module has also gotten smaller to fit into that 1/4 space.

 

 

Change column layout in duplicate Divi image module

 

 

How to Swap Overlapping Images Modules Around:

 

Okay, now that you’ve changed the column structure, it’s time to swap your modules around. You want your text to be on the right and your two overlapping images on the left.

 

This might sound tricky, but it’s really not. Because Divi is a drag and drop builder, moving your modules around is no big deal!

 

You can easily manually drag your modules and move them wherever you want them to go.

 

To rearrange the modules in your duplicate section:

 

Start with the text module.

 

In your duplicate section, hover over your text module until the four-point arrow appears.

 

How to move modules around in Divi, WordPress theme

 

Then click and drag the text module over to where your left image module currently is.

 

How to drag and drop modules in Divi theme

The text will now occupy the furthest left 1/4 area of your row. You’ll also notice that the image your text module replaced has automatically moved directly below your text.

 

Moving modules in Divi theme, WordPress

 

But that’s okay, you’ll be able to drag that image where it belongs just as easily.

 

Hover over that image and drag it up to the furthest right area, where your text module used to be.

 

Your row should now look like this:

 

Overlapping images, Image Module Divi

 

How to Change the Overlapping Images Settings:

 

It’s time to change the image module’s spacing settings. If you’d like, you can change out the images themselves too, as I ended up doing for my page.

 

Hover over your middle 1/4 image module until the image module settings appear.

 

Click the gear icon.

 

 

Animated overlapping images, image module Divi theme

 

 

Here, you can change the image under the “Content” tab.

 

Change image in Divi image module, WordPress

 

If you want to keep the same image, you can go on to the next steps:

 

Under the “Design” tab, scroll down to “Spacing” and input the following:

 

Top Custom Margin: 100px

 

Right Custom Margin: -60px 

 

Overlapping images design, settings Divi

 

Next, scroll down to “Animation” and add the following settings:

Animation Style: Slide

Animation Direction: Right 

 

 

How to create animated sliding image in Divi

 

Next, head to the image module on the right of your page. Hover over the module as you did above and click the gear icon to access the settings.

 

As above, you can choose to change your actual image as well as its settings. If you want to keep the image the same, move on to the “Design” tab.

 

Under “Spacing”, add these settings:

Left Custom Margin: -60px

 

Under “Animation”, choose the following settings:

Animation Style: Slide

Animation Direction: Left

The Finished Row with Overlapping Images and Text:

 

Alright, great work!

 

Now, your page should have two rows with overlapping images and the images should be animated, sliding towards each other.

 

At this point, your page should be looking like this. (As you can see, I swapped out the heading text and images for the second row for new ones, to add a little more interest to the design.):

 

Animated Overlapping Images, Divi

 

And here’s how your overlapping images design will look in tablet view:

 

Responsive animated overlapping images, Divi theme tablet view

 

Overlapping images in Divi, responsive tablet view

 

 

And finally, here’s how I used this design to really “bling out” my finished page: 

 

Overlapping Images Layout, Divi Tutorial

 

The Wrap-up:

 

And that’s all for our overlapping images tutorial! I used this neat Divi feature to create an visually engaging layout for a food and lifestyle blog.

 

As you can see, the overlapping images and the addition of sliding animation effects really help the design to “pop”.

 

In my finished page, you’ll also notice a few other image designs, like the tablet and the grid.

 

I created both of these using nothing but the Divi image module, so they’re totally achievable.

 

I’ll be doing a step-by-step tutorial on these designs, as well, so check back in soon.

 

Hopefully, you’ll use these overlapping images to create awesome page layouts on your own/ your clients’ websites.

 

Now that you know how to add overlapping images to your Divi website, be sure to share your results.

 

Drop a link to your new designs featuring this image effect!

 

Have any questions? Feel free to reach out in the comments section.