How to Use Opacity, Padding, and Negative Margins to Layer Divi Modules

One of the most underused and underrated features of Divi is the opacity slider. You can find it in many different places in the builder, giving you minute control over exactly how all of your modules and their elements appear in relation to others near them. You can also combine Divi’s opacity features alongside transparency in images (PNGs) to give your site’s elements the illusion of being stacked on top of each other. Best of all, you can do it without having to mess with the nuts and bolts of CSS float and z-axis.

In this tutorial, I want to show you how the Divi Builder can be used to combine these elements into some pretty neat sections or module combinations you can adapt to your own website.

Preview of End Result

Here are some examples of what you’ll be able to achieve after this tutorial. The examples are laid out in sections to show how they interact with other elements and backgrounds, but not as a functional site.

Creating the First Section

Start out by creating a new page in your WordPress dashboard and selecting the Blank Page template. You’ll need to open the Section Settings by pressing the blue gear.

You then click into the Background tab and choose the third tab for adding a background image. Upload your choice and make sure you have the Background Image Size to Cover.

After that, you’ll change Custom Padding in the Spacing section of the Design tab to

• Top: 55px
• Bottom: 255px

Now you can start adding in the elements for the modules that you’ll be stacking. First, add a new double-column row and go into settings. From there, set the Alignment to Right and Custom Margin to 10% under the Design tab.

Within the single-column row, add an Image module on top (A in the image above), and a Call to Action module (B) under it. Go into the Image module’s settings first and change these values in the Design tab:

• Box Shadow: Option 2
• Sizing, Width: 60%
• Filters, Blend Mode: Overlay

The blend mode filter is incredibly important because that is how you will make sure any element under the image (the CTA module in this case) will overlay and stay on top of the image itself. This is how you’re avoiding the float and z-axis CSS. The filter helps the visibility and coloring, while the negative margins and padding affect positioning.

Text Module Settings

In the Text module settings, you will adjust a lot of stuff.

1. Content tab: fill in any title you want for a headline, button text to convert your traffic, and the content area will be any copy you want superimposed over the image.
2. Background: rgba(57.37,145,0.43). The important part is the 0.43 or the right-most slider. That’s the opacity percentage, or how much you can see through the background itself.
3. Under the Design tab, the text color should be Light
4. Spacing: to move the CTA box from beneath the image, you will make a -30% Top margin and 30% right. They should now be overlaid.
5. Sizing, Width: 60%
6. Box shadow: second option
7. Button: Use custom styling, then set the text to white (#ffffff) and the button border color to #8BD9D5 which is going to be the same color as the background of our second section. So if you’re changing that, change this, too.
8. Button alignment should be to the left.

And finally, you will go back into your Section settings and set a bottom divider. You’ll pick the top choice from the dropdown (a slant), flip the divider upside down, and set the color to #8BD9D5 to match the upcoming section. Make sure the Divider Arrangement is set to “Underneath Section Content” so that your next section’s content appears above it, too, as you adjust their margins. Once that’s in place, you’re done with your first multi-level transparent overlay without CSS! Congrats! It should look like you’ve aligned these using different z-axis values and other positioning code.

Creating Section Two

First off, creating the middle section is exactly like the first. When you’re in the settings, though, we are playing with the background a little.

• Set the background color under the first tab to #8BD9D5.
• Add your background image under the third tab. Use an simple image of a single subject with a transparent background and use Cover as your size.
• Select Luminosity as your Background Image Blend to match up the colors (if you chose to use parallax, the color blend won’t work).
• Under the design tab, give the section 60px Top Padding under Spacing.

Row 1

Now, you will need to add a double-column row with an image module on the left and slider on the right. When those are added, go into the Row Settings.

You have just two changes here: make the background black with a 38% opacity and add the same box shadow as before.

Corner Image

Now it’s time to set up the image that’s floating over the corner. Inside the Image module’s settings, upload your image. Again, this one works best with a transparent PNG, just for effect. We are going to overlay the image on the corner, so a shape other than a 90 degree angle will be a much better look. Once that’s done, the Design tab awaits.

1. Image Alignment: Left
2. Always Center Image on Mobile: Yes (just looks so much better, and it retains the upper overlay)
3. Top Margin: -25%, Bottom Margin: 15%, Left Margin: -25%

Those negative margins let you get that image wherever you need it on the page, and because you set the divider to be under content, it’ll float above that, too.

Slider Module

For the Slider Module, it’s a bit trickier because you have to add individual slides with their own images and such. It’s not that bad, though. The main thing you’ll want to pay attention to is whether you’re in the Slider settings or an individual Slide’s settings.

The primary element you’re worried about in the general Slider settings is the Custom Margin under the Design tab. Set it to -30%. Your slide images will always push just slightly above the row’s background this way, drawing more attention to them than sliders typically get.

1. Add a slide. Under the Content tab, the heading and button text are most important. If you want descriptive copy, do that with the content box.
2. You need to add a Slide image in the content tab, too. It is good to be a transparent PNG of a single focus item here, too. Round images work well here, too. Square-edged ones look out of place.
3. Under the Slide settings, you can change the background of each individual slide. Don’t. What you want to do is set the opacity slider down to 0%. Anything else will clash with the row’s background.
4. Set the title text to have small caps.
5. Set the button to small caps, too.

Row 2

The next row is pretty cool, if you ask me. We will use use a Testimonial module here, as well as text and images to achieve a couple of different overlay effects. We will add padding to extend a module beyond its bounds, while taking another image and resting it on top of the new padding, to make it look like the figure is sitting on the edge.

The only setting you really need to change for this row is under the Design tab. Make sure that the toggle for “Make This Row Fullwidth” is on. The difference this single option can make for spacing is amazing.

Two Images, Similar Settings

The two images in this row do have very similar settings. They’re pretty simple to get their overlays working, too.

1. Width: 85% for left image, 100% for right image
2. Spacing -160px Bottom and -210px Left Margins for the left image, and leave as default for the right
3. Both images should be aligned left, and always centered in mobile
4. For the left image, you will need to adjust the breakpoint spacing. For this one, it will be a -13% bottom margin. No changes will need to be made to the right one.

Testimonial Module

The Testimonial module has a lot of moving parts, but none of them are really tricky. You just have to play with it to get everything aligned. If you want, you can do most of this with the text module, too, but I like the styling of the testimonial personally.

1. Fill out the testimonial author’s name and information. The testimonial itself will go in the content box.
2. Below the text area, an you can turn on or off the quote icon, depending on your decisions. It is aligned center with the text.
3. In the Design tab, you are adding 60% Padding to the left of the module. Not Margin. That 60% Padding is where Silent McCroft is sitting in the image above.
4. Under Body Text, again go with Small Caps, and you can add a Box Shadow if you like it. I do, so I did.
5. With the Blend Mode Filter, this time you will use “Lighten.” The transparency of the testimonial’s background calls attention to the fact that we’re not actually adjusting the z-axis of the elements. We use the Lighten filter to keep the colors from bleeding together, giving the illusion of the image is being rendered on top, rather than being recolored.
6. For the background itself, we are using just the gradient tab (the second one) instead of a background color. If you have to, set the background to 0% opacity like before. Otherwise, just use a Linear Gradient with 155deg Gradient Direction, 8% Start Position, and 100% End Position.
7. The first color should be Black (#000000) with 50% opacity, and the second one should be Purple (#392591) with 100% opacity.

Text Module

Finally, we have the text module to the right. Instead of a testimonial for your business, perhaps, I wanted to use this as either a featured-event section or even a team member bio. Styling it is very similar to the testimonial. It uses the same gradient background colors, so you can just copy/paste those into the module settings. You are almost done!

1. Fill out the text area however you want. I’ve used H2 and H3 tags to give different headings and subheadings, such as name and position. Then I wrote a quick description in the content area.
2. For the design of the text, I made it all Light in color and, once again, Small Caps.
3. The same box shadow goes around the module.
4. The Spacing area is where things get fun. We want a negative margin on top of -200px, which shoves the module in-line with the image it’s stacked with. That will make the text illegible. So we need to add a 200px Padding as well, to put the words back in their original position, while keeping the gradient background behind the image of Captain Runnerpants and her Mindfulness Stick. You should also add 45px padding to the Left and Right, as well as a 15-25px  padding on bottom. That will keep it nice and stable on multiple screen sizes.

Finally, you will add a bottom divider to the section itself. This time, I went with a solid black slant and a solid black section background as a contrast to the softer feeling of the top two sections.

The Final Section

The third and final section I wanted to layer using built-in transparencies. I’ve always loved backgrounds that kind of merge with the elements stacked with them, so I took an image with a transparent background of a woman and wanted to overlay the Divi contact form over it.

Literally, the only change we make to the section settings is giving it a black background. So do that first. Then you need a single-column row, and you don’t even have to touch the settings. You’re welcome. All you have to do now is add an Image module and a Contact Form module. When you’ve got that done, open up the Image settings. You will just be changing a single option here: the bottom margin.

• Desktop: -350px
• Tablet: -100px
• Smartphone: -50px

That’s it. It doesn’t even take a lot of tweaking to get them to line up. The Lady of the Contact Form is easy to get set up. And as for the Contact Form settings? You don’t have to do a thing. This example is solely using the default styling. Since it’s transparent when it’s added to the layout, the PNG background blends right in.

However, if you do want to a very subtle visual shift to the contact form, go into the Design tab and change the Blend Mode Filter to “Screen.” Doing so will make the fields on the firm ever so slightly translucent, so you see a faint ghost of the image behind it. These are the kinds of effects that make site visitors smile. It’s not quite a microinteraction, but it has that same kind of effect.

Kinda neato, huh?

That’s It and That’s All!

Hopefully, y’all thought that was as fun as I did. Being able to do cool stuff like overlays and multi-layered designs without CSS is super cool. So if you’re ever looking for a way to spice up your designs, think about making stuff see-through. Yank around the images and elements with negative margins, and you’ll be well on your way to taking your designs to a whole new level.

What are some design tricks you’ve used to make elements interact in new and interesting ways?