Overlap Sections In Divi
Download the JSON file and import it into any Divi Page


Overlapping images in Divi is easier than it looks. Playing around with the margin settings can move different modules around the page, overlapping each other. As easy as this is there are a few things we need to keep in mind when overlapping:

1. Z-index – This determines whether your module appears in the layer above or below ( Similar to Photoshop layers ). If you overlap a module and notice it goes behind the module you are overlapping, then the Z-index needs to be changed to bring it to the front. This can be done within the custom CSS of the Module or your Style Sheet. Within the custom CSS of the Module, go to Custom CSS > Main Element > then add :

z-index: 999 ;
2. Check Responsiveness – When playing around with Margins and Padding it can affect your Tablet and Mobile responsiveness – so its always handy to check on a Tablet or phone when applying Margin Changes. Within the Divi builder you can set different sizes for Desktops, Tablets and Mobiles.
Overlap Modules Free Download

( JSON FILE ) You are about to download a Free image and footer section for the Divi Theme. Included within this download is an image section, overlapping the section below it and a Map Module overlapping the section above it.


1. Click on the DOWNLOAD button above.
2. A .zip file & a .json file will be downloaded to your computer
3. Open your WordPress Page that you want the section in
4. Click on Import ( Top of the page up/down arrows )
5. Import the .json file (*Not the .zip file )
6. Update Page
7. And that’s it! Enjoy

Divi WordPress Theme

Pin It on Pinterest