[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Make a Divi Testimonial Slider

Mark Hendriksen | August 23, 2019 | 7 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

In this step by step tutorial, we are going to build a Divi testimonial slider. Testimonials are a great way to build trust and credibility to your visitors. With the testimonial slider we are going to build, you can show off your testimonials to your audience to make them decide to buy your product or get your service.

You can find a demo of the testimonial slider here:

This testimonial slider is built on the default Divi slider.

Step 1: Downloading the Divi testimonial slider

Go to your membership dashboard and then go to free downloads, under Divi testimonial slider layout you can download the layout files. If you are not a member yet you can sign up here (its free).

After downloading the file “Divi testimonial slider.zip” you need to unpack the folder. Inside this folder you will find the json file.

Don’t’ forget to publish/update your section.

Step 2: Uploading & Installing the json file

Go to Divi > Divi Library and click on the import & Export button.

Import the testimonial slider

After clicking on import a popup will show up, click on the Import tab and then on choose file. Navigate to your download folder and start uploading the json file Divi testimonial slider.json

Start uploading the file

Step 3: Installing Font Awesome

For the quotes in the slider, I used font awesome icons. If you want to add Font Awesome icons as well you need to place 1 line of code in our header. This is very easy to do.

Go to the Font awesome website and sign up here:

https://fontawesome.com/start

After signing up and verifying your email you should receive a line of code.

Now go to Divi > Theme Options > Integration > Add code to the < head > of your blog

And past the code in here.

Font awesome code integration

Step 4: Setting up the testimonial slider

Create a new page or open an existing page.

Click on the blue arrow to add a new section. Then go to the Add from library tab and choose the Divi testimonial slider section.

Add a new section

Adding the CSS code

For this slider I have created some custom CSS code. You can place the following CSS in Divi > Theme Options > CSS

/* TESTIMONIAL SLIDER */

.testimonial_slider .author_name {
	font-size: 20px;
	font-weight: bold;
}

.testimonial_slider .author_position {
	font-size: 16px;
    color: #af8035;
    font-weight: bold;
    margin-top: -5px;
    display: block;
	text-transform: uppercase;
}

.testimonial_slider .fa-quote-left,
.testimonial_slider .fa-quote-right {
    color: #af8035;	
	font-size: 34px;
}

.testimonial_slider .fa-quote-left {
	padding-right: 15px;
}

.testimonial_slider .fa-quote-right {
	padding-left: 15px;
}


@media (max-width: 980px) {
.testimonial_slider .fa-quote-left,
.testimonial_slider .fa-quote-right {
	display: none;		
}}


.testimonial_slider .et_pb_slides .et_pb_slider_container_inner {
    display: block !important;
	min-height: 435px;
}

Explaining the CSS

At line 4 you can change the font-size for the author name.
At line 9 you can change the font-size of the author position.
At line 10 you can change the font color of the author position.
At line 19 you can change the color of the quote icon.
At line 20 you can change the size of the quote icon.

Step 5: How to change the content in the testimonial slider

If you open a slide then you find all the content in the body field.

You can change the content from the visual tab however you need to be careful not to delete any code. I recommend to change the content in the text tab. Replace your content between the tags.

Visual and text tab

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

7 thoughts on “How to Make a Divi Testimonial Slider”

  1. Wow, great tutorial! I’ll be using this on my new website. One question. How do I replace the font awesome quotes with regular quotes? I want to use Playfair Display’s own quote marks. Thanks!

    Reply
  2. Hey, this is fab – just wondering how I can slow down the transition/animation duration? The built-in divi tools for this seem to be overridden by some CSS code I can’t find to restyle??
    Thx

    Reply
    • Hi,

      This is the CSS code for that:

      .et-pb-active-slide .et_pb_slide_description {
      -webkit-animation-duration: .7s;
      -webkit-animation-delay: .9s;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: both;
      -moz-animation-duration: .7s;
      -moz-animation-delay: .9s;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-fill-mode: both;
      -o-animation-duration: .7s;
      -o-animation-delay: .9s;
      -o-animation-timing-function: ease-in-out;
      -o-animation-fill-mode: both;
      -ms-animation-duration: .7s;
      -ms-animation-delay: .9s;
      -ms-animation-timing-function: ease-in-out;
      -ms-animation-fill-mode: both;
      animation-duration: .7s;
      animation-delay: .9s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: both;
      -webkit-animation-name: fadeBottom;
      animation-name: fadeBottom;
      }

      Place this in Divi > Theme Options > CSS

      The CSS code is for different browsers webkit, moz etc. Adjust the number values to change the transition duration.

      Reply
  3. What if I just want to have the controls on each slide to be able to move the slides manually? How would I do that instead of having it on automatic transition?

    Reply

Leave a Comment

11 Shares
Share11
Pin
Tweet