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

FREE Divi Testimonial Slider And CSS Tutorial

Nelson Miller Pee Aye Creative
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

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

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

Last updated [last-modified %date%]

Subscribe

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

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

50 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
      • 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.

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

      Hi Renars,
      I’m afraid that anything custom is outside the scope of this freebie. If you need something custom you will need to hire a developer.

      Reply
  17. Gabriel Hdez

    This was SUPER HELPFUL! Thanks a lot!

    Reply
  18. 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
  19. 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
  20. kanishka madubashana

    thank you nelson

    Reply

Submit a Comment

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

Other Freebies

0

Your Cart