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!
“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
Customize The Default Divi Slider
We Changed The Divi Slider Into A Beautiful Unique Testimonial Slider With Some CSS
We had some fun customizing the Divi Slider into a testimonial slider for one of our Divi Child Themes. We knew this would be a popular tutorial, so we decided to share it to you for FREE here on our Divi blog. We decided not to write out each step here, but rather tell you the overview of what we did and how you can do this too (with the help of our code snippet).
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.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Here are some things you need to do to get a similar look. Note that the main thing we are doing here is replacing the dot controllers with the images, then adjusting those images for size, position, and responsiveness.
Add a slider module
Add your testimonial text
Adjust your text styling like name and company with the inline text editor
Add the CSS snippet below to your page settings or Divi Theme Options
Change the images at the beginning of the CSS snippet. Upload square images to your WordPress Media Library, copy the url, and replace the entire url inside the content: url(‘replace this with your url’)
Duplicate or delete code as needed depending on how many slides you have. Keep the same format as our snippet using the :nth-child(number) format to match your slide count
/*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!
I hope you enjoy this FREE Divi Testimonial Slider And CSS Tutorial. Please share this with your friends! If you find this valuable, please consider becoming a member!
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 :)
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.
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 🙂
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?
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!
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?
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.
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.
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 🙂
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?
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.
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.
Hi Dave,
Yes you have the right idea, you would need to also copy the numbered part of the code .et-pb-controllers a:nth-child(5) and .et-pb-controllers a:nth-child(6)
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!
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?
In this tutorial, I will show you several ways to access the Divi changelog and explain how to read it, PLUS a free bonus simplified version!
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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 🙂
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.
Fantastic job done
Thank you Vivek!
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?
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!
Awesome… I’ll give this a go when we’re ready! Sorry jumping the gun a little haha
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:)
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?
please explain step by step. Please please !!
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!
Thanks for this one. I just added it to a new site and it looks great.
That sounds great, Bill! Glad you could put it to use!
Hi, just a quick question if we can add more people pic on testinomial changing button or not?
Hi Upendra,
You can add more images, yes. This is an example using 4 slides.
Its not showing on my website the images nor on the mobile device!
Okay, do you want help solving the issue on your site? You would need to share the link.
I notice when applied this code afffects all the other sliders that I have. How could I fix this?
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.
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
Hi Rina,
Those are settings within the module, the animation speed can be adjusted and the arrows options can be enabled.
thanks
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.
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 🙂
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?
Hi Brendan,
Not sure, make sure you are not also copying in the CSS from the post, as the code is in the layout, so it could be duplicate?
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
Hi Tara, how is it when you exit the builder?
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 😉
Thanks Brendan!
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.
Hi Dave,
Yes you have the right idea, you would need to also copy the numbered part of the code .et-pb-controllers a:nth-child(5) and .et-pb-controllers a:nth-child(6)
Hey, Nelson, thank you for this prompt response. This worked! TY so much.
You’re welcome Dave!
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!
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?
Hi Nelson,
This is great! How can I make the images on top of the testimonial? Help please.
Hi Jack,
I’m glad you like it! Unfortunately we don’t provide customization help with our freebies.
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.
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.