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

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
13 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Audrey
Audrey
5 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
5 months ago

Fantastic job done

Mike
Mike
4 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
3 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
2 months ago

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

Shop Our Divi Products!

Child Themes • Plugins • Layouts

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 4,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart