Divi Guide: Overlay Content (Our Page Effect Explained)

Introduction

Hello! Welcome to another article in the series where I explain how certain effects are pulled off on our site here with Divi. I often get asked how I pulled off the neat effect where the page content is slightly overlaid onto the full width header on a page. This is actually a lot easier than you might think, requiring just a little bit of CSS. Let’s dive right in, shall we?

How To

You can either choose to input your CSS in your child stylesheet, or directly into the page builder. Either is fine, but since this sort of thing might require some pretty granular control, I’m going to recommend simply doing it via your page builder. The great thing about using the page builder is that you don’t need CSS at all unless you also want to apply the shadow/glow effect like we have on our pages, or apply the border around modules as seen on our home page.

To apply the effect, simply open your row (or module, or section) settings, and apply a negative top margin. We used -120px, but you might have to experiment a bit to find the right values.

That’s it! Now your content will be slightly pushed up, and will overlay the content above it. Do take care not to cover anything important. In some cases, you may need to have 2 copies of the items you are overlaying, one for desktop (with the overlay) and one for mobile only (if the overlay is cutting off content on mobile). Be sure to test it on mobile too!

CSS To Take It Further

We used a combination of styles on our site, depending on if we were styling an entire row, or a row of multiple modules. We like using the subtle but large shadow/glow effect on most of our pages, but the css box shadow gets clipped on some modules by the container. For that we used a thin border instead.

The CSS for the thin border was as such:

border:1px solid #e5e5e5;

For the shadow/glow effect we used:

box-shadow: 0px 20px 150px #d6dee4;

We also applied rounded borders with the following CSS:

border-radius: 5px;

Play around with it until you get the desired effect. It’s really that simple!

Conclusion

Divi is great because you can accomplish so much with so little, but it’s still important to learn at least a little bit of CSS to jazz things up a bit. It’s the subtle details that turn a boring design into an amazing one!

Did this article help you? Did you use this on one of your designs? Share it in the comments below!

Pin It on Pinterest