How to Make a Divi Testimonial Slider

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:VIEW DEMO

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 these icons as well you need to place 1 line of code iny 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