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:
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 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:
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
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.