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 Dan,
please delete my question from this morning.
I got it!! With this I moved the frame down
Best regards, Joachim
.et_pb_slide_description {
margin-top: 150px !important;
margin-bottom: -150px !important;
}
Awesome! Nice work, Joachim :)
Hi Dan,
could you provide a hint how to move the "box" ? In my case down?
I tried it with margins but it leads to the fact that I spit it up or it overlaps….
Thanks and best regards, Joachim
Hi Dan,
what a great help. That is 100% what I was looking for!
THANKS!
Got It.
I set the visibility to visible, and that solved it.
Whew.
Thanks,
Lynn
Glad you got it working :)
I put a graphic of the issue on FB so if anyone has any ideas.
https://www.facebook.com/groups/DiviThemeUsers/permalink/644230869039846/?comment_id=644735782322688&offset=0&total_comments=21
Scroll to toward the bottom of the page.
I have two graphics there.
Thanks in advance. Appreciate it for sure!
Lynn
It was an issue where some code I added to the fix was intended to hide the background when the slides were empty, but ended up breaking some of the non-empty slides. The latest version of the code (just posted above) should hide the background for empty slides, without affecting the regular slides. Thanks!
O.K., well I have an issue. It seems I have a thick maybe 50px white line going through (between the heading and the button text). Any idea how that happened or how to fix it? I don't see a place I can upload this so you can see it, but I do have a graphic of it. I have it on a private password protected site until the site is done so unfortunately, I can't let anyone in there.
Lynn
Hi Lynn, I've updated the post to fix this.
regarding adding more social icons to Divi, i have read here:
http://www.agentwp.com/add-social-icon-in-divi-wordpress-theme
http://www.eileenlonergan.com/adding-social-media-icons-to-the-footer-of-divi-for-linkedin-pinterest-youtube-instagram
but it did not work or i did something wrong (i am not much of coder) i appreciate if you add these functions to your good tool
This seems to be a particularly popular feature request today! So I've taken a break from bug fixing to add it… It just needs some final testing and hopefully I'll get the update out at some point tomorrow.
I've just released the update :)
Dan,
The slider function 'Add background to slider text' works nicely.
However, it is a global setting and applies to any slider text on the website. This is not what I want to happen so will not use the function as I use the slider in other parts of the site.
Can I feature request this on a page by page basis … a dropdown just like in the CSS Manager?
Mmm… but you could have multiple sliders on one page … so that might be limited
Ok … the ultimate is to have a dropdown that shows each slider as a subitem of the page.
Make sense? Or shall I throw the towel in and use the CSS directly as you advise in your answer to rahi.
Thanks Mark
Hey mate, yeah at the monent it's a global setting. I think the best solution would actually be to hook directly into the module, so that it becomes an option in the slider module settings within page builder. I haven't figured out how to do that yet, but I plan to. Failing that, a menu setup like you suggest would be the next best option. This is probably a short way down the track however as I'm mainly focused on bug fixes at the moment. So for now the best option is to use the CSS directly.
Hi Dan! Does this code applies to do something similar to what you can see on this site: http://visualizingarchitecture.com/??
They have the background but for each item and not for the container. Also, they have the slide description in a left position and not centered. I don't know how to put a screen shot on the message, that's why I put the URL. Sorry for that.
Thanks again for everything!
Hey Rodrigo, yes it does something similar, giving you a background for each item (the slide text, not the slide image). It leaves the slide image and text in their usual positions, which includes leaving the slide text left aligned by default.
Dan,
Thank you so much. For several days I was looking for ways and different codes to achieve just that, add a background opacity under the text, thank you! I am a novice at this and am learning through forums and websites like yours. I did had a tiny issue at the the beggining with this code: in all, I try to understand each code to know what it serves, and when I entered the full code you gave, WordPress didnt recognize the part of the rounded corners at the bottom
.et_pb_slide_description div:last-child {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
I guess it couldnt recognize it because I don't have a child theme, so I had to replace it by repeating the same code from top
.et_pb_slide_description h2 {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
And then it worked perfectly :D
Thank you again for sharing your knowledge and gradually teach others, dont ever change! I'll keep reading you and wishing for you the best.
Greetings from Chile,
Camila :)
Hi Camila,
Not sure I get this completely. What is the full code for this if I want to add it to my Custom CSS in Divi Options? I tried modifying things but the bottom rounded corners still do not appear. Thanks!
Nevermind. I found this and it worked for me.
.et_pb_bg_layout_dark .et_pb_slide_description {
background-color: rgba(0,0,0,0.5);
display: inline-block;
padding: 50px;
margin: 100px;
border-radius: 15px;
}
Dan,
Thanks for Divi Booster.
Awesome, worked like a charm! thanks a bunch