Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

FREE Divi Testimonial Slider And CSS Tutorial

Nelson Miller Profile Orange
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

▶️ Please watch the video above to get all the exciting details! 👆

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.

Free Divi Testimonial Slider

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*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!

Divi Carousel Maker Product Featured Image

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

54 Comments

Comments By Others

  1. Kevin

    Amazing tool …
    Why is it when create more than slides the frofilr image coes out of line from the others ?

    Reply
    • Hemant Gaba

      Hi Kevin!

      Can you share the URL of the page to check further?

      Reply
  2. Daniel Hirtz

    Thank you, a few years later it’s still one of the best solutions!

    Reply
  3. kanishka madubashana

    thank you nelson

    Reply
  4. Jack Howell

    It’s very good and easy but I have a problem. After I finished editing texts / changing images, I save and exited the Builder. My homepage’s text have been changed; it used other family fonts than what I used originally.

    Why they changed my font family in my homepage? When I deleted your module, my homepage’s font family went back to normal. How to fix this please?

    Reply
  5. Debra Quincy

    Dunno what went wrong. Tried re-uploading a few times but no images showed up. But suddenly after the third re-upload the images were there 🙂
    I noticed DIVI needed an upgrade so I did that before the third try and it might just have been what was needed. I have seen strange behaviour from DIVI before if there is a new upgrade ready!

    So everything is working beautifully and it looks great!

    Awesome code! Thanks a lot!

    Reply
  6. Gabriel Hdez

    This was SUPER HELPFUL! Thanks a lot!

    Reply
  7. Renars Krastins

    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.

    Reply
  8. Jack

    Hi Nelson,

    This is great! How can I make the images on top of the testimonial? Help please.

    Reply
  9. John J.

    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!

    Reply
  10. Dave Malone

    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.

    Reply
  11. Tara

    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

    Reply
  12. Brendan

    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?

    Reply
  13. kriserdmann

    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.

    Reply
      • Tina

        It is January, 2023 and the download link is now delivered to your email address and then you click on that to download it.

        I would like to know what image sizes are best for the “dots”, since your image URL’s are all broken now.

  14. ‪Rina Wais‬‏

    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

    Reply
      • ‪Rina Wais‬‏

        thanks

  15. Andy

    I notice when applied this code afffects all the other sliders that I have. How could I fix this?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  16. Pursue

    Its not showing on my website the images nor on the mobile device!

    Reply
  17. Upendra

    Hi, just a quick question if we can add more people pic on testinomial changing button or not?

    Reply
  18. Bill Hibbler

    Thanks for this one. I just added it to a new site and it looks great.

    Reply
  19. marvin

    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:)

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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?

      Reply
      • Devansh Nautiyal

        please explain step by step. Please please !!

  20. Mike

    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?

    Reply
      • Mike

        Awesome… I’ll give this a go when we’re ready! Sorry jumping the gun a little haha

  21. Vivek Dhandha

    Fantastic job done

    Reply
  22. Audrey

    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 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Other Freebies

0

Your Cart