5 Fantastic Ways You Can Style Divi’s Testimonial Module

How to Change Your WordPress File and Directory Structure
August 7, 2016
5 Easy Ways to Beautify Your Divi Sidebar
August 8, 2016
Show all

Welcome to Day 68 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


Website testimonials are more important than ever. Reviews on Google, Yelp, Facebook, etc are important for businesses because potential clients will often focus on those when making their purchasing decision. This is why it’s so important to keep testimonials about your products and services up-to-date on your Divi website. To that end, in today’s post I’ve creating five different variations of the Divi Testimonial Module to begin to show you what’s possible with this important module.

5 Fantastic Ways You Can Style Divi’s Testimonial Module

Subscribe To Our Youtube Channel

The Default Testimonial Module

Before we get started, let’s take a look at what the Divi Testimonial Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.

testimonial-defualt

The 3 areas we’ll be customizing in the testimonial module are:

General Settings
Advanced Design Settings
Custom CSS

testimonial-module-general-settings

Ok, now that we’re all set up – let’s get into it!

1. Image Right Align and Dark Background

In this example, moving the portrait image to the right, adding a dark background color, some borders and shadows can make the module “pop.” Changing the background color to your website look scheme can really give this example a streamlined feel.

testimonial-1

To create this look, I did the following:

General Settings:

Added the dark grey background color (#3e3e3e).

Advanced Design Settings:

Adjusted the portrait border radius, portrait width and portrait height ALL to 135px
Changed Body Font to “Crimson Text.”

Custom CSS:

Before – (controls the quotation mark)

background-color: #3e3e3e;

Main Element – (controls the testimonial box)

border-radius: 25px;
border: 2px solid white;
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.28);

Testimonial Portrait – (controls the portrait image)

float: right;
margin-right: 0px;
border: 2px solid white;

And that’s it! With a few adjustments in the general and advanced settings and a few lines of CSS added in, we have a totally new look.

2. Portrait Image Quote Look

This one involves having some fun with the portrait image. I’m using a CSS clipping mask that’ll remove the generic circle outline and give this a nifty quote style image. Writing that code manually is no fun, so this tool can help you out when using clipping masks: http://bennettfeely.com/clippy/

A little trick like this can go a long way in appealing to not only the customers reading the testimonial, but the client who will be thrilled that you came up with this idea.

testimonial-2

To create this look, I did the following:

General Settings:

Added white background color
Turned quote icon to “hidden”

Advanced Design Settings:

Portrait Width – 200px
Portrait Height – 160px
Changed Body Font to “Merriweather.”

Custom CSS:

Main Element

border: 1px solid #e6e6e6;

Testimonial Portrait

-webkit-clip-path: polygon(0% 0%, 88% 0, 88% 68%, 100% 76%, 88% 82%, 88% 100%, 0 100%);
clip-path: polygon(0% 0%, 88% 0, 88% 68%, 100% 76%, 88% 82%, 88% 100%, 0 100%);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0)!important:
-moz-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0)!important;
box-shadow: inset 0 0 0px rgba(0, 0, 0, 0)!important;

Testimonial Author

border-top: 1px solid #e6e6e6;
padding-top: 10px;

Fun one, right? Let’s see if we can top it.

3. Fullwidth Testimonial Section with Image on Left

This is more of a modern layout and it requires the use of the image module as well. One thing to keep in mind is that you want all of these to respond nicely on tablets and phones, so a good way to make sure of that is to utilize separate rows, columns and modules like in this example.

testimonial-3

Before editing the testimonials module, I did the following:

In the Standard Section (Blue), set the background color (#efe7da). In the Row (Green), made it fullwidth, set the custom gutter width to 1, set ALL padding to 0px and kept padding on mobile. Inserted a 1/3 + 2/3 section into the row. Added the image module into 1/3 section and uploaded the portrait image. Inserted the testimonial module into the 2/3 section

Here’s what the backend looks like:

testimonial-3-backend

To finalize this look, I did the following: (in the testimonial module)

General Settings:

Set the background color to: rgba(255,255,255,0)

Advanced Design Settings:

Changed Body Font to “Raleway.”

Custom CSS:

Before

background-color: #efe7da;
font-size: 46px;
color: white;
margin-top: -7px;

Testimonial Author

text-align: center!important;

Testimonial Meta

text-align: center!important;

And there you have it! With some basic CSS and only a handful of tweaks to the Divi builder sections, rows and modules, you have a super cool, modern layout for a testimonial. Duplicating and stacking this design also looks really sleek and modern 😉

4. No Portrait Image? No Problem!

More often than not, a client won’t have portrait image for your testimonials, so we need to be able to display the testimonials that are just text in a unique way. Let’s experiment with using a background image behind the testimonial to give it some life.

testimonial-4

Before editing the testimonials module, I did the following:

In the Standard Section, add a background image and add some extra pixels the top and bottom padding to give the image some room. (see below)

testimonial-4-general-settings

To finalize this look, I did the following: (in the testimonial module)

General Settings:

Set background color to rgba(255,252,244,0.83)

Advanced Design Settings:

Set quote icon and border color to #fff9eb (a light shade from the image) and changed text color to #404b4f to match a darker shade in the background image
Changed Body Font to “Sanchez.”

Custom CSS:

Before

background-color: #404b4f;
 top: -25px;
 margin-left: -16px;
 font-size: 46px;

Testimonial Author

text-align: center!important;

Testimonial Meta

text-align: center!important;

There we go! Simple but effective. This is a much better alternative than just plain text on a blank page. Let’s spice up the final attempt, shall we?

5. Multiple Columns with Call-to-Action Buttons

This example is best suited for testimonials with a small amount of text. We’ll be using 3 columns and will also utilize the call to action module. It’s a great way to encourage people to click on the company’s website after reading the testimonial.

testimonial-5

Before editing the testimonials module, I did the following:

Set a row with 3 columns
Added a testimonial module on top, then a call to action module below

testimonial-5-start

I recommend completing the first modules then duplicating them so you don’t have to restyle each module every time.

To finalize this look, I did the following:

(In the Testimonial Module)

Advanced Design Settings:

Set portrait border radius to 100px
Set portrait height and width each to 150px
Set border color to #c68f65 and border width to 1px
Bottom padding of 20px
Changed Body Font to Lato

Custom CSS:

Testimonial Author

text-align: center!important;
Testimonial Meta
text-align: center!important;

(In the Call To Action Module)

Advanced Design Settings:

Added a custom margin of -52px
Turned on “Use Custom Styles for Button”
Set button background color #c68f65
Text color to white (#FFF)
Set hover text color to #c68f65
Set hover background color to white (#FFF)

Changed Body Font to Lato
Place the company website into the button link

I’m using the same brown (#c68f65) as the testimonial module border to help blend the two modules together. Once you have the testimonial module and call to action looking good, then duplicate each module and place in the other columns.

testimonial-5-duplicate

Here’s what the completed backend will look like:

testimonial-5-backend

Now you have a pretty slick looking set of testimonials! You can duplicate, swamp out text, information and add other testimonials with this style easily.

Wrapping Up

Well I hope these examples have inspired you to take charge of the Divi testimonial module and will help you create some unique designs that’ll compliment your websites! Remember, with just a few tweaks in the sections, rows or module settings and with a dash of CSS, you can create testimonials that’ll excite your clients, keep website users engaged and make you look like a creative genius.

Oh, one last thing I meant to mention – Have fun!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured image background image via vectorstockstoker / shutterstock.com

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 68

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Fantastic Ways You Can Style Divi’s Testimonial Module appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar