Code by Day | Explore By Weekend

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

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

View More Divi Freebies

Leave A Response!

Subscribe
Notify of
guest
30 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Audrey
Audrey
10 months ago

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 🙂

Vivek Dhandha
Vivek Dhandha
10 months ago

Fantastic job done

Mike
Mike
9 months ago

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?

Mike
Mike

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

marvin
marvin
8 months ago

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

Devansh Nautiyal

please explain step by step. Please please !!

Bill Hibbler
Bill Hibbler
7 months ago

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

Upendra
Upendra
5 months ago

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

Pursue
Pursue
5 months ago

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

Andy
Andy
4 months ago

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

‪Rina Wais‬‏
‪Rina Wais‬‏
1 month ago

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

‪Rina Wais‬‏
‪Rina Wais‬‏

thanks

kriserdmann
kriserdmann
24 days ago

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.

Brendan
Brendan
14 days ago

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?

Tara
9 days ago

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

Dave Malone
8 days ago

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.

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 5,900 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart