Free Divi Testimonial Slider
Customize The Default Divi Slider
We Changed The Divi Slider Into A Beautiful Unique Testimonial Slider With Some CSS
We had some fun customizing the Divi Slider into a testimonial slider for one of our Divi Child Themes. We knew this would be a popular tutorial, so we decided to share it to you for FREE here on our Divi blog. We decided not to write out each step here, but rather tell you the overview of what we did and how you can do this too (with the help of our code snippet).
Subscription Information
We spend a lot of time developing these FREE Divi resources. Quite frankly, all we ask in return is that you subscribe to our email newsletter. You won't get spammed. Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can't wait, but honestly not very often! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
If you are not subscribed, you will need to enter your name and email in the form below. Our system will send an opt-in confirmation email. Once you click confirm on that, then a second email will arrive in your inbox with the download link.
If you already subscribed, just enter your info and the email will arrive in your inbox with the download link.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
How To Make the Divi Testimonial Slider
Follow These Basic Steps
Here are some things you need to do to get a similar look. Note that the main thing we are doing here is replacing the dot controllers with the images, then adjusting those images for size, position, and responsiveness.
- Add a slider module
- Add your testimonial text
- Adjust your text styling like name and company with the inline text editor
- Add the CSS snippet below to your page settings or Divi Theme Options
- Change the images at the beginning of the CSS snippet. Upload square images to your WordPress Media Library, copy the url, and replace the entire url inside the content: url(‘replace this with your url’)
- Duplicate or delete code as needed depending on how many slides you have. Keep the same format as our snippet using the :nth-child(number) format to match your slide count
/*manually add the image url to the slide controller*/
.et-pb-controllers a:nth-child(1) {
content: url('https://dev.peeayecreative.com/wp-content/uploads/2019/08/Brother-Pillar.jpg');
}
.et-pb-controllers a:nth-child(2) {
content: url('https://dev.peeayecreative.com/wp-content/uploads/2019/08/Mr.-Divi.jpg');
}
.et-pb-controllers a:nth-child(3) {
content: url('https://dev.peeayecreative.com/wp-content/uploads/2019/08/Mrs.-Divi.jpg');
}
.et-pb-controllers a:nth-child(4) {
content: url('https://dev.peeayecreative.com/wp-content/uploads/2019/08/Uncle-Divi.jpg');
}
/*size and position of images*/
.et-pb-controllers a {
width: 90px;
height: 90px;
border-radius: 100%;
margin: 0 15px;
}
/*change opacity on hover*/
.et-pb-controllers a:hover {
opacity: 1;
}
/*make the active slide slightly bigger*/
.et-pb-controllers .et-pb-active-control {
width: 100px;
height: 100px;
margin-bottom: -5px;
}
/*force off the text shadows*/
.et_pb_slide_description {
text-shadow: none!important;
margin-bottom: 20px!important;
}
/*change the slide description animation*/
.et-pb-active-slide .et_pb_slide_description {
animation-name: fadeIn;
}
@media (max-width: 980px) {
/*size and position of images - mobile*/
.et-pb-controllers a {
width: 50px;
height: 50px;
border-radius: 100%;
margin: 0 10px;
}
/*make the active slide slightly bigger - mobile*/
.et-pb-controllers .et-pb-active-control {
width: 60px;
height: 60px;
margin-bottom: -5px;
}
/*adjust image position - mobile*/
.et-pb-controllers {
bottom: 10%;
}
}
/*position the images - mobile*/
@media (max-width: 767px) {
.et-pb-controllers {
bottom: 20%;
}
/*position the images - mobile*/
.et_pb_slide_description {
margin-bottom: 50px!important;
}
}Do It With Our Carousel Plugin!
Make life easier and use the Divi Carousel Maker instead! This innovative plugin allows you to create a beautiful carousel of any Divi modules by turning on a switch and adjusting the design settings!
Hi, thanks for this nice slider. If I update my divi theme afterwards, will I loose it ? Do I need install a child theme before ? (because I dont’ really want to do that). Thank you again 🙂
Hi Audrey,
You don’t have to worry about updates breaking any code in the Divi Theme Options. That would only be a concern if you are editing Divi.
Fantastic job done
Thank you Vivek!
Hi Nelson,
Im testing this on a site I’m in the middle of building, but it doesn’t seem to show the images on IE, (I’m using Chrome, not tried FF). I am still using your images. Any ideas?
Hi Mike,
The images are probably just not the right link, like if you are using http instead of https or something. Just replace them with yours and you will be good!
Awesome… I’ll give this a go when we’re ready! Sorry jumping the gun a little haha
Hi Nelson,
first off al thank you for this amazing slider.
What about having more Slider on the page. How i can exclude the testimonials from different sliders and use it just for that i want?
Thanks for your answer and have a nice day:)
Hi Marvin,
Sure, to have more than one you would want to change the CSS classes from instead of targeting the sliders in general you would add a custom CSS class in the snippet instead and then in the Advanced tab of the slider. Does that makes sense?
please explain step by step. Please please !!
Hi Devansh,
This is a free resource, and I do explain what I felt was needed for a free resource in the video. Hopefully you can benefit from this!
Thanks for this one. I just added it to a new site and it looks great.
That sounds great, Bill! Glad you could put it to use!
Hi, just a quick question if we can add more people pic on testinomial changing button or not?
Hi Upendra,
You can add more images, yes. This is an example using 4 slides.
Its not showing on my website the images nor on the mobile device!
Okay, do you want help solving the issue on your site? You would need to share the link.
I notice when applied this code afffects all the other sliders that I have. How could I fix this?
Hi Andy,
Sure, you just need to make it more specific with a custom class. So just add a custom class before each selector in the code and match it by adding that same selector in the module.
Hi, first of all thank you very much.
I have a question – how do I change the speed of the slider? How do I add arrows or bullets?
Thanks
Hi Rina,
Those are settings within the module, the animation speed can be adjusted and the arrows options can be enabled.
thanks
I can’t download the Layout. I receive a email to subscribe to mailchimp, but the link don’t work. And that way I can’t access to download the free layouts from the site.
Hi there,
I think you are misunderstanding this. Please read the post carefully, the download link appears directly here on the post, not delivered in an email 🙂
Hi Nelson
Thank you so much for all this amazing content. I am loving your videos.
I’ve tried to update the images in the code as suggested, however, once changed, the image still shows the original. Any ideas?
Hi Brendan,
Not sure, make sure you are not also copying in the CSS from the post, as the code is in the layout, so it could be duplicate?
This is exactly what I was looking for but it doesn’t change the pictures for some reason.. I copy the URL directly from my media library and paste into the code & it still shows up with the photos from your site, even though the URLs for those are no where to be found. Any ideas?
Here’s a screenrecording of my issue: https://vimeo.com/543214039/156829144a
Hi Tara, how is it when you exit the builder?
Hi Both
Found the issue… When you upload the code to the page, it adds the code to the main page code as well. Simply go into the main CSS section and delete it.
Please see image attached 😉
Thanks Brendan!
To echo others, first of all: Thank you very much! This is a great looking slider, and your tut made it very clear how to work with it. I would like six testimonials, so I duplicated the fourth slide twice. However, the result was that even when I added images, the two new slides do not show up. (I presume I’ll need to duplicate some code in the CSS?) Can you please explain how to add more slides to the slider? Many thanks in advance.
Hi Dave,
Yes you have the right idea, you would need to also copy the numbered part of the code .et-pb-controllers a:nth-child(5) and .et-pb-controllers a:nth-child(6)
Hey, Nelson, thank you for this prompt response. This worked! TY so much.
You’re welcome Dave!
I want to undo the changes. I deleted the css, but the layout css is still loading. I cleared the cache on the web server and the browser. I don’t understand where the css is coming from. Please help!
Hi John,
I sure don’t know either without more info. But if you imported the layout then the code is in Code module. Just random guess but maybe you added duplicate code?
Hi Nelson,
This is great! How can I make the images on top of the testimonial? Help please.
Hi Jack,
I’m glad you like it! Unfortunately we don’t provide customization help with our freebies.
Hello and thanks for nice code and trick, you Rock!.
But can you tell me how to get those images on left side, as sidebar and then content in center.
Hi Renars,
I’m afraid that anything custom is outside the scope of this freebie. If you need something custom you will need to hire a developer.
This was SUPER HELPFUL! Thanks a lot!
I’m so glad to hear that, you are welcome!