425.830.8350

clients@briansniff.com

Web Design

Custom designed websites for business, personal, or eCommerce.

Website Hosting

Custom hosting solutions optimized for WordPress based sites on our Litespeed Server platform.

ECommerce

WooCommerce provides a powerful and scalable platform to sell both virtual and tangible goods. Contact us!

SEO

SEO practices include revamping of your site’s content, meta tags, and page structure to perform better in Google searches.

VIEW ALL SERVICES

Discussion – 

0

Discussion – 

0

Divi Slider Text Display Trick

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

 

Tags:

Site Manager

0 Comments

You May Also Like

Pin It on Pinterest

Share This