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).
Subscribe to Download The Free Divi Layout
We spend a lot of time developing these FREE Divi resources. Quite frankly, all we ask in return is that you subscribe to the blog. You won’t get spammed daily like some sites do (eh hem), but I will share helpful new tutorials and products once in a while when they come out.
NOTE: If you already subscribed for these before, no worries. You won’t have to confirm this time, just enter your info and the download link will appear.
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;
}
}
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?
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)