FREE Divi Testimonial Slider Layout Download and Tutorial by Pee-Aye Creative

FREE Divi Testimonial Slider and Tutorial

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

/*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;
}
}
118

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.

View More Divi Freebies

Leave A Response!

38 Comments

  1. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  2. Vivek Dhandha

    Fantastic job done

    Reply
  3. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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!

      Reply
      • Mike

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

  4. 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)

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

      • Nelson Lee Miller (aka The Divi Teacher)

        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!

  5. Bill Hibbler

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

    Reply
  6. Upendra

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

    Reply
  7. Pursue

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

    Reply
  8. 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)

      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
  9. ‪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

  10. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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 🙂

      Reply
  11. 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
  12. 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
      • Brendan

        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 😉

  13. 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
  14. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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?

      Reply
  15. Jack

    Hi Nelson,

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

    Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Pin It on Pinterest

0

Your Cart