Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Tired of the same old boring testimonial boxes that come pre-packed with Divi? Here are a few tweaks I came up with today.

I offer many various services so I wanted to make it easy for someone looking for specific testimonies. So the first thing I did was create the testimonial modules on my testimonial page. If you are not sure how to do this, you can find a great video tutorial on the Divi Module by Elegant Themes right here.

 

testimonial section

 

Once this has been completed, I go into each module and give them unique classes based on the different types of categories I want to differentiate. In this case I used the following classes:

testimonial-bookkeeping

testimonial-web

testimonial-business

 

class

 

The next step is to create an image that I can use in the background. I use Fireworks and Photoshop for most of my image editing. In this case I created 3 semi-transparent images with the category names in the upper left hand corner.

Be sure to make the background of the image transparent as you will be adding a background color to your testimonial module via CSS and not the image.

These are the 3 png files I created and upload via the “Media” section on my WordPress admin.

testimonial-business testimonial-bookkeeping testimonial-web-design

Now for the magic. To bring it all together, just add this CSS code to your ePanel Custom CSS box that comes with Divi or your child theme style sheet as I prefer.

 

	/*Testimonial Header*/
		.et_pb_testimonial_description {padding:10px;}
		.testimony-accounting {
			background-color:#e9f0e5; 
			padding:10px; 
			border-radius:20px;
			background-image: url("http://quiroz.co/wp-content/uploads/2014/10/testimonial-bookkeeping.png"); 
			background-repeat: no-repeat; }
		.testimony-web {
			background-color:#EBEFFF;
			padding:10px; 
			border-radius:20px; 
			background-image: url("http://quiroz.co/wp-content/uploads/2014/10/testimonial-web-design.png"); 
			background-repeat: no-repeat;}
		.testimony-business {
			background-color:#e9d8ed; 
			padding:10px; 
			border-radius:20px;
			background-image: url("http://quiroz.co/wp-content/uploads/2014/10/testimonial-business.png"); 
			background-repeat: no-repeat; }

 

You will need to replace the background image url’s with your specific background image url. Feel free to download and use my 3 background images freely on your own website if you like.

The end result should look just like this.

 

screencapture-quiroz-co-testimonials

 


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest