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.
Hi! Question for you. If I have two sliders on the site, and only want the transparent background on one of them, is that possible>
Hi Lucia, in theory it'd be possible to modify the above code to apply to a particular slider by giving the slider a CSS ID and adding that CSS ID into each of the CSS selectors in the code above. However 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 code. 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. I hope that helps!
Thank you very much
Hi Dan! I've been playing with this for a while and can't seem to get it to work. First I copied all the code to the CSS/ePanel and that didn't work. Then I realized that the JQuery needed to go under Integration… tried adding that code and for some reason it's just not cooperating with me tonight!
Any advice would be greatly appreciated! NestAtlantaRealEstate.com
Hi Kerry, it looks like there is an error in your CSS (in the ePanel), just before the point where you added the CSS for this fix. Specifically you have:
.et_fixed_nav #logo { max-height: 125px;This should have a closing brace, like so:
.et_fixed_nav #logo { max-height: 125px; }As it's missing, the CSS that comes after it won't work correctly. Once you fix this, I think the background will work.
You're the best! THanks so much, Dan – it worked perfectly.
You're very welcome, Kerry :)
Hi Dan,
I've attempted to add this code to my epanel and my child theme to no avail. Can you help me out? Site here: californiainnocenceproject.org.
Thanks!
Hi Michael, it looks like the code hasn't been added into the site (it's not in the epanel code, and the child theme CSS file is basically empty). My guess is that perhaps you have a caching plugin running, which might be showing an old version of the site code…
This post explains a bit more about caching issues (it's talking about my Divi Booster plugin, but the same applies when you add the CSS yourself).
https://divibooster.com/divi-booster-and-caching/
Also, here is the link to the CSS file from your child theme, which you may want to keep an eye on. Currently it's showing up as empty, but once the cache is cleared, this should match the contents of the copy of the child theme style.css file on your server:
http://californiainnocenceproject.org/wp-content/themes/Divi-child/style.css?ver=2.6.4.1
Once it does, the slider background should take effect… let me know if you're still having problems after that.
Hi Dan,
First of all, thank you so much.
I don't have a child theme. I pasted the above code into the ePanel, saved it, and nothing happens to my fullwidth-Slider Body text.
Please help
Hi Alon, it looks like there is an error in the "logo size" CSS you have earlier in the ePanel Custom CSS. Specifically, this bit of CSS is missing a closing "}":
#main-header{ -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important;As a result, everything coming after it, such as the semi-transparent background code won't work.
Hope that helps!
Hi Dan,
It seems that the last divi update is causing a problem with the JQuery.
The shadow shows on the slides with no text.
Many thanks for your work…
Found out! Somehow there was some BR into the content box of the slides!
so…have you all an amazing day and cheers!
Hey Christof, glad you figured it out, and thanks for letting me know.
Thank you, Thank you, Thank you.
Hi,
This has helped a great deal, especially as I am completely new to coding etc.
One question, after putting in the code to get the semi transparent block on the slider, the slider is now 'jumping'.
Have I done something wrong? I literally copied the code you supplied. Any help would be greatly appreciated.
The website is currently updated daily, but main help is needed on the home page slider.
– Becky
http://www.funkytents.monkrat.com
Update to 1st comment:
I've just gone onto another page of ours which has a full width slider and I have the transparent block on an image which has no text or button text,
Completely baffled.
http://funkytents.monkrat.com/contact-us/
Hi Becky, it seems that Divi started adding a stray space in the slide descriptions, which was making the code think that the slide wasn't completely empty. Fixing this is a little bit fiddly, as it requires the addition of a bit of jQuery code – which I've given above along with a link to instructions on how to add it. Thanks, Dan.
Hi Becky, it looks like the code wasn't working correctly on IE with the latest version of Divi. I've updated it with a fix which should stop the jumping from happening. Hope that helps.
I'm using this code on a site…and was able to add a class to it so it's only working on the main slider that I want it to (which is great).
I'm just having one issue. My first slide doesn't have a title or content text, just an image. And the bottom of the background colour is showing up. I removed the image so that there's no additional content to the slide and it's still showing up.
Is it possible that somehow a space is being added…when I inspect element in chrome this is what comes up:
clearly a space there, but when I go into the module editor and the slide there is no content, not spaces (checked both the text & visual editor and all the fields that may have content, "heading" "button text" "button url" and everything is blank.
Hi Robert, yeah, that's the issue – it seems like a recent update to Divi has resulted in a space being included in the slide description, even if there aren't any spaces in the slide options itself. Fixing it requires a bit of jQuery (as CSS can't distinguish elements with spaces from those with actual content), which I've included in the post above. Hopefully that should fix it for you.
Thanks for the reply and the added code!
I'm stuck!!
/* Hide the content area if empty (no title and no content) */
.et_pb_slide_description:first-child .et_pb_slide_content:empty { display:none; }
for some reason this section is not working for me. please check out my site. I only need the transparent box behind the text on the home slider, not the rest. Some help would be greatly appreciated!
Thank you in advance!
Love your work!
Hi Karine, I've updated the post to include a fix for the issue. Divi started adding an extra space in the slide content, which meant that it wasn't "empty" from the point of view of the CSS. The fix uses jQuery to find and hide the elements containing just spaces. Thanks, Dan.
Hey :)
That works great – Thanks :)
Is there a way to only add this to text only slides in a slider, or is that beyond the confines of Divi?
Hi Henry, the same code should work on text-only slides as well as slides with images. Are you not finding that to be the case?