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!