Adding a Text Overlay in Divi

There is now an option in Divi for adding an background to the slider text which can be applied on a per-slide basis without the need for the code given in this post. To use it, go into the "Design" tab of the slide you wish to add a background to. There you'll find a "Use Text Overlay" option. Activate this and you'll be able to select the color / border radius. In the color picker, the rightmost of the two bars controls the transparency.

Adding a Semi-Transparent Background using CSS

Here's how to add a semi-transparent background to the Divi Theme's slider text using CSS. While it is now largely unnecessary thanks to the new built-in Divi option mentioned above, I'll leave this code here in case it is useful (e.g. if you want to quickly apply the affect to all sliders on the site, rather than having to apply a background on a per-slide basis).

It is responsive, just like Divi itself. To create the effect, we need to add some CSS to Divi, like so:

/* Set the semi-transparent background color */
.et_pb_slide_content,
.et_pb_slide_description > h2,
.et_pb_more_button_wrap {
	background-color: rgba(0, 0, 0, 0.5);	 
}

/* Hide the content area if empty (no title and no content) */
.et_pb_slide_description:first-child .et_pb_slide_content:empty { display:none; }

/* Add 30px of padding to the background */
.et_pb_slide_description > h2 {
	padding: 30px 30px 10px 30px !important;
	margin-left:-30px;
	margin-right:-30px;
}
.et_pb_slide_description { 
	margin-top:30px; 
	margin-bottom:-30px;
}
.et_pb_slide_description > div:first-child { padding-top: 30px !important; }
.et_pb_slide_description .et_pb_slide_content,
.et_pb_more_button_wrap
 {
	padding:0px 30px 30px 30px !important;
	margin-left:-30px;
	margin-right:-30px;
}
@media only screen and ( max-width: 479px ) { 
	.et_pb_slide_description > h2 {
		padding-bottom: 0px !important;
	}
	.et_pb_slide_description .et_pb_slide_content > p {
		padding-top: 10px !important; 
	}
	.et_pb_more_button_wrap {
		display:none;
	}
}

/* Give the background rounded corners */
.et_pb_slide_description > :first-child {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
.et_pb_slide_description div:last-child {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

One slight complication is that slides with no titles still show an empty box. Unfortunately there isn't a good way to do this in CSS, so we need to add JQuery to Divi to hide these empty boxes, like so:

<script>
jQuery(function($){ 
    /* Hide empty slide text */
    $('.et_pb_slide_description > .et_pb_slide_content:first-child').each(function(){
        if($.trim($(this).text()) == '' 
        && $(this).children().length == 0){
            $(this).hide(); 
        }
    });
});
</script>

Changing the Box Color / Transparency

You can change the slider color and transparency by modifying the line which reads:

background-color: rgba(0, 0, 0, 0.5);

The first three values are the red, green and blue components (0-255) and the last one is the opacity (0-1).

Include the Slider Button in the Box

If you want to place the slider button inside the semi-transparent box, you'll need to add JQuery to Divi, like so:

<script>
jQuery(function($){ $(".et_pb_more_button").wrap('<div class="et_pb_more_button_wrap"></div>'); });
</script>

Note on Vertical Centering

Note that a consequence of keeping the way Divi lays out the page is that the slide text (and background box) will not necessarily be vertically centered – because Divi puts all the slide titles at the same position. If your slides all have a similar amount of text (or all have no text), this shouldn't be a problem. At some point, I'll try and come up with a better way of handling the case where slides have different amounts of text.