I'm excited to share this FREE Divi Testimonial Slider as a download and tutorial. Use this Divi Slider layout in a unique way to show off your reviews!

Free Divi Testimonial Slider

“Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings.”

Example Name 1
Example Company Name

“Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings.”

Example Name 2
Example Company Name

“Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings.”

Example Name 3
Example Company Name

“Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings.”

Example Name 4
Example Company Name

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;
}
}

17

You're welcome!

I hope you enjoy this FREE Divi Testimonial Slider and Tutorial. Please share this with your friends! If you find this valuable, please consider purchasing one of our Divi products!

Subscribe for more free stuff like this.

We have more cool free stuff coming for our subscribers!

Please share this Divi freebie!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

FREE Divi Testimonial Slider and Tutorial