Add Semi-Transparent Background to Divi Slider Text

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.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

72 Comments

  1. i write:

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

    in the customer CSS by divi Optionen.

    –>>no effect

    Reply
    • Hey Michael, any chance you're able to share a link – here or via the contact form – so that I can see if I can spot what's going wrong? Thanks!

      Reply
  2. How can I set the background to border-radius: 0

    Reply
    • Hi Michael, you should be able to do it by changing the part that reads:

      /* 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;
      }
      

      Just change each instance of 15px to 0px and that should give you the equivalent to border-radius: 0 (the background is actually made up of several elements, hence the slightly more complex form of the code).

      Hope it helps, but let me know if not. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.