If you use a busy photograph as the background of a fullwidth slider in Divi chances are the text, whether light or dark, will not be entirely readable. Therefore, in order to make the text stand out you can place a background behind the two elements that make up the slider text, the title/headline and the description/content. In a way, this works like an overlay where it places a dark background behind these elements in order for the text to be readable no matter what is behind it in the slider.
Here’s a live example of this: https://www.jamesrobertdeal.org The image being used for the slider background is too busy and light to display the text, black or white, so that it’s readable. Applying this simple fix makes it much easier to get your message across.
Here’s the code:
.et_pb_slide_description h2 { background-color: #000; border-top-right-radius: 5px; border-top-left-radius: 5px; -moz-border-top-right-radius: 5px; -moz-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; padding: 15px; opacity: .8; } .et_pb_slide_content p { background-color: #000; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -moz-border-bottom-right-radius: 5px; -moz-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; padding: 15px; opacity: .8; }
0 Comments