How to Create an Image Overlap Section with Divi
Welcome to part 1 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.
This first tutorial walks you through “How to Create an Image Overlap with Divi.” This is based off the design of my homepage. I’ve found this layout to work very well for offering e-books, products and more but you can also use these methods to create an overlap of anything in Divi like images, blurbs, contact forms, etc. Along with the video tutorial, I’m also offering this as a FREE page layout! See below for download.
Here’s the CSS I used:
/*----------Sign Up Image Desktop View----------*/
.sign-up-image {
margin-top: -75px;
margin-bottom: -45px!important; }
@media only screen and (max-width: 1100px) {
.sign-up-image {
margin-top: -45px; }
}
/*----------Sign Up Image Tablet View----------*/
@media only screen and (max-width: 980px) {
.sign-up-image {
margin-top: -66px;
margin-bottom: -18px!important;
max-width: 355px; }
}
/*----------Sign Up Image Mobile View----------*/
@media only screen and (max-width: 479px) {
.sign-up-image {
max-width: 175px; }
}
Links mentioned in the video:
Google Chrome Inspect Element Tutorial for Divi
Similar Tutorials:
Get Your FREE Page Layout!
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
This is fantastic Josh! I especially love the instructions for resizing for mobile.
Thanks, Elizabeth! I really appreciate your feedback and am glad the tutorial helped you out! Yeah the mobile stuff can be tricky but I pretty use those same methods for every element in Divi for mobile now 🙂 Thanks again!
Great video. Love learning from you!
Have a question, based on, if the client is not working with a Child Theme; In the Visual Builder there is the desktop, tablet, and mobile view, isn’t it sufficient to view them on these views, and maybe start with a smaller sized image.
Thanks Joan! Yeah you can definitely use a smaller image and view the different views in the visual builder. I’ve just found that if you put all the CSS in the builder, sometimes there are issues with them not working or getting overwritten so I like to use the stylesheet and just use inspect element because it’s so versatile. But yep, I should’ve clarified that a smaller image would do the trick! 🙂
Thanks again for your comment and support!
just found you after looking for overlap help, Joshhall.co has just been added to the top of my list for research and help with my divi build. thanks for being there.
I am using the extra theme with divi and was hoping you might have a tutorial or explanation to the child theme(which I assume was setup with a parent theme) and css stylesheet you were using. To me that just seems so much more efficient and would like to start using that method.
Also where did you get the purge SG cache?
Thanks again
Nevermind, your site is awesome, found what I needed in your tutorials, maybe I should start at the beginning.
No need to respond here. you obviously have more pressing things to do than to show me how to navigate your site. thanks again for being here and providing so much help for us that are learning.
Awesome to hear you found it. I’m going to be updating my site’s UI and including some better search functions soon to better help people find what they’re looking for 🙂 Stay tuned!
Brilliant tutorial video Josh. Haven’t tested it out first hand yet but I’m 100% sure I will be revisiting this tutorial soon when I get a chance to use it on a website.
Im sure i will now be hooked to your site waiting for next tutorials, iv been following you on the facebook group for a while i think your work is great.
Rob – you’re awesome! Thanks so much for the feedback and support. Yeah I’m excited to have a collection of tutorials finally that I and fellow Divi folks can refer back to. I really appreciate your kind words and support for what I have going here. And for being in the group. I’ll keep these tutorials coming!
Thank Josh for the video tut! I’m struggling with getting the top module to overlap the header. Any tips?
Hey Karen, I’d have to look at a URL. Are you trying to overlap the person image over the header? Feel free to post a link!
I disabled the Coming Soon page so you can see- https://sleepingfox.net/Divi/
I’m looking to have the image module, but not the background of that section, overlap the header– trying to pull that large bracelet image forward. I think it’s a series of z-index settings I just can’t seem to get right. Maybe it’s not even possible. Thanks for looking!
mmmm just checked it out but I’m also stumped! Tried all the z-index tricks I know but couldn’t get it to take. I’ll keep an eye out for a solution and will let you know if I happen to find anything!
Thanks Josh. Ditto.
Great Josh! Very well explained and produced. The Purge cache that you use throughout the video, is that a plugin. Don’t think I`ve seen it in Divi.
Thanks Hernan! That plugin is the cache purge via Siteground, my hosting. I’m not sure if you can use it for sites that aren’t on Siteground but here’s the link:https://wordpress.org/plugins/sg-cachepress/
Great tutorial Josh! I’m working on the child theme and adding all the code via Divi Theme. Do I need to put all the CSS code in a a new stylesheet?
Thanks, Seema! Yeah you’ll want to put any new custom CSS in your Child Theme stylesheet. Here’s a link for reference: https://www.diviguide.com/adding-custom-css-to-the-divi-theme/
Here’s a tutorial on where to put your CSS, Seema! https://joshhall.co/where-to-put-your-custom-css-in-divi/
Thanks, Josh, awesome tutorial.
I’m having issues importing the json file. it’s telling me I shouldn’t upload in that context.
Please, what can I do? Thanks
Thanks! Just be sure to follow the installation instructions on the product post https://joshhall.co/product/free-image-overlap-page-layout/ which shows you where to upload it! It’s a page json file so as long as it’s uploaded there and not the library, you’ll be all set.
Hey Josh, thanks for a great tutorial! Just a quick question. I followed your tutorial and everything is working fine. The only problem I have is that it seems as if my image is moving in “behind” the top section. In other words when you create the negative top margin, it moves the image up, but then at the intersection between the two sections, you only see the bottom part of the image and not top part. So it looks as if the image is behind the top section. Any idea why this happens and how to correct it? Many thanks
Thanks, Francis! It’s probably a z-index issue. You’ll just want to make sure that the top section has a z-index lower than the image! Feel free to post a URL so I can take a peak.
Thanks Josh!! It was a z-index issue..
Awesome to hear that got resolved!
Hi Josh! I have a problem with z-index too. I know I should make the upper section’s z-index bigger than the lower section’s, but I couldn’t do it. I wrote position: relative; z-index: 1 and position: relative; z-index: 2 into the main element of the Custom CSS-s of the sections but nothing happened. Could you help me with the exact syntax or where should I put these codes (maybe the main CSS in the Divi options)? Thanks!
Hey Alex, I usually put this in the “Main Element” section of either the section, row or (if need be) the module. Either one should work. Let me know if that works!
Thanks for the quick reply, Josh! Unfortunately this doesn’t work, I’ve tried this one. I put this code to the main element of the lower section:
position: relative !important; z-index:1 !important;
and this in the main element of the upper section:
position: relative !important; z-index:2 !important;
But nothing ever happens. Any idea what do I do wrong?
Hey Alex, when it comes to z-index, I usually make the item that needs to go above the other elements like 99999!important. Feel free to post a link if you want.
Hi Alex! I am having the same problem. Could you solve it? I would like to hear about your solution, it would be very helpful.
I am also having the z-index issue.
Seems to be a Divi update perhaps that is not allowing it?
Mine shows it correctly in the visual builder, but once I exit, the item below has come to the top. Maybe a bug?
Let me know if you figure this one out! 🙂
Not sure Robyn, it works for me and I have the exact code that I wrote in the tutorial! Could be an issue with child theme override or something like that.