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.