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.
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
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:
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.
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.
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.
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!
Thanks! Perfect solution to my problem, really clearly explained. Used it on my website 🙂
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
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.
Thank You!
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?
Hi Simone,
This is easy to do.
Open the slider and enable Show Arrows under Elements.