Testimonials are an important part of any website and can often be the deciding factor between your website visitor becoming a client or moving on to your competitor. If you genuinely have clients that are happy enough with your products or services that they are willing to provide a glowing testimonial, then you want to be showing them off to all your site visitors.
A testimonial slider allows you to present a number of customer reviews in a single piece of screen real-estate and the Divi Slider Module is a great way to do it.
This free layout uses the Divi slider module along with (logo) images added via text modules below to create visual links to control each slide. There is a code module in the layout that holds the jQuery code to link the logo images to the slides that they control.
View the layout Live Demo
Download & import the testimonials layout
- Download the testimonial slider layout ZIP file and extract the JSON file inside
- In your Divi builder click on the portability icon (the up/down arrows)
- Click on the import tab and select the JSON you just downloaded.
- Uncheck the Replace Existing Content checkbox if you have content already on your page you want to keep.
- Click on Import Divi Builder Layout and the slider will load into your page
How to edit the testimonials layout
Change the slide content
- To change the slide content you will need to edit each of the slides in the slider module as you would with any slider in Divi.
- The Slide Image and Slide Background Image (the screenshots) are the same images and are 450px x 285px PNGs
- All other customizations to the slider are made within the slider module and slide settings. Filter by modified styles in the module to easily see what has been changed.
Change the logo images in the external slider controls
The 3 logo images below the slider control the slides using the method outlined in the Control Divi slider with external links tutorial.
You can use any image (or text link) for these controllers, but you need to make sure that each of your image logos are wrapped in a link <a href=”#” id=”DTE-slide-1″>YOUR TEXT OR IMAGE HERE</a> with DTE-slide-1, DTE-slide-2 and DTE-slide-3 etc corresponding to the slide number it links to.
- Go to Media > Add New and upload your logo image. The image size I used is 180px x 35px PNGs
- Go to Media > Library and click on your logo to open the attachment details. copy the URL link to your logo
- in the 2nd row click on the text module settings for the logo you want to change
- In the Content tab click on the text mode so you can see the HTML. Replace the img src URL with the image URL you just copied so it should look like; <a href=”#” id=”DTE-slide-3″><img src=”http://www.yourwebsite.com/wp-content/uploads/2019/02/mylogo.png” width=”180″ height=”35″ alt=”my logo” /></a>
Add more slides to the testimonial slider
You can add more slides to the slider module as usual, but you will then also need to add or edit the external logo controls below the slider.
- Add a new slide in the slider module as you usually would.
- in the row with the text modules holding the logos, change the number of columns from 3 to 4.
- Copy & paste one of the existing text module logos into your new 4th column and edit the logo image URL and Link ID
<a href=”#” id=”DTE-slide-4“>YOUR NEW IMAGE HERE</a>
- You can add up to 6 columns & logos with links to 6 slider module slides without having to edit the jQuery in the code module. Just update the link ID for each new text module to <a href=”#” id=”DTE-slide-5“> or <a href=”#” id=”DTE-slide-6“>. For adding more check out the tutorial in the link above.