Divi Call To Action Module

With Image & Color Overlay

Ran across a question on creating an effect in my normal wanderings this morning. I immediately overthought the answer, but found an easier solution using the Divi builder.

This is more of a general question. I’m trying to create an effect (using Divi), so that instead of having a ‘learn more’ button under a photo and heading, I would just have the heading overlap the image.
I have to change the images opacity. I’m using a text moudule and have placed the image as a background, but can’t figure out how to change the opacity. I can always go back into Photoshop and do the opacity thing, but was wondering if there was a way to do it just here.

featured-images-jasonOne of the best parts about using a clean slate like the Divi WordPress theme, is the enormous amount of options you are given to create what you want, your way. The bonus is, thousands of creative minds out there do the same thing every day, and that knowledge base is available online with a little searching.

This community of Designers and Developers make it easier than ever to use WordPress, and through the use of many of the resources out there, I have learned a good bit.

With that very thought in mind I dove in to try and help the Divi user who asked the question.

Finding a Solution

The issue here primarily is that there are 3 layers of content to stack.

Without using any more CSS than needed. The Divi CTA module is perfect for this, and with the newest additions to the Divi Builder, minimal coding would be needed.

First I defined a CSS id for our CTA module, using the CSS ID field in the CTA module of the Divi page builder, I defined the id as overlay-cta.

This will allow me to assign some specific CSS styling to the images we wanted to overlay. Second, using the Advanced Settings area of the Row my CTA modules were in, I assigned the background images to the CTA modules. (image 1 on right) Third, I added the overlay color to the Custom CSS area in the actual CTA module in the MAIN ELEMENT area. (image 2 on right) This allowed for the option to use different color overlays without having to create multiple CSS classes.

This also allows for leaving this line out to get just the image with no overlay.

CSS line added to each CTA for overlay color:

background: rgba(36, 178, 252, 0.3);

Then added to child theme style sheet, or in the custom CSS area of your Divi Admin:

#overlay-cta { height:310px; width:100%; }

.et_pb_promo_button.et_pb_button { box-shadow: 1px 1px 1px rgba(0,0,0,.4); text-shadow: 1px 1px 1px rgba(0,0,0,.4); }

#overlay-cta .et_pb_promo_description h2 { padding-top: 2em; }

And that’s it, a nice shaded overlay image with a call to action and room for content.

Plus it can be shaded or tinted to suit your design.

The Result

Below are the results, and exactly what he was looking for. 

We actually are working on his blog together right now, to give the posts and index pages a unique feeling.

Coming in a future Divi post. Check out some of Jason’s custom 3D Greeting Cards and Other Creations, they are amazing work.

UPDATE: 4/15/16: I recently had the chance to get some of Jason’s Handmade Cards for a friends Birthday. I cant begin to tell you how much more amazing the work he does is when you actually have it in front of you! Highly recommend checking him out.

You can see Jason’s site over here: Handmade 3D Gifts

Business Builder

Learn More

Another Page

Learn More

Pin It on Pinterest

Share This

Share this post with your friends!