The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

Here's how to add a semi-transparent background to the Divi Theme's slider text. 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.