Free Download: Divi Testimonials Slider Sections
Today’s freebie is the Divi Testimonials Slider Section layouts with automatic and infinite scrolling and the Previous and Next buttons allowing you to manually scroll slides.
The slider uses the Blurb module for Previous and Next buttons and the Testimonial module for slides(you can add as many slides as you like), and, of course, a bit of JS and CSS to make it work properly.
Demo
How To Download
This download is available to our subscribers only, to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.
The existing subscribers don’t need to subscribe again, they always receive the updated freebies package immediately when its released.
Requirements
These section layouts require Divi v3.13 and higher.
Installation
The download .zip file includes all of the previously available free section layouts plus the newly added Testimonials Slider section layouts.
After you download the freebies .zip file, unzip it and find the divi-testimonial-sliders folder containing both Testimonial Section layouts(Light and Yellow), each of them containing a JSON file and the custom CSS file as well as the README.txt file with installation instructions, make sure you read it carefully.
To install the section first import the JSON file of the section layout into the Divi Library.
Then add the CSS from the CSS file into the Custom CSS field on Divi -> Theme Options page or to you child theme style.css file.
Next, open the page/post where you would like to have the Testimonial Slider section and add the imported section from the Divi Library.
Save everything and you’re done, now you can add your content and apply a different styling if you like.
How To Customize
The slider function won’t work in Visual Builder, you will see all of the testimonial modules and will be able to customize them as usually. The Light Testimonials section will look like this in VB:
And the Yellow Testimonials section will look like this:
Please beware that for the slider to work properly the custom CSS classes assigned to the row, columns, blurbs and testimonial modules need to be preserved.
Each testimonial module has a custom CSS class assigned to it and one of them has also a second CSS class which is needed to make this testimonial active by default, this module is marked as active as shown below.
IMPORTANT: Only one testimonial module should be active by default. You can find the full list of CSS classes and elements they are assigned to in the readme.txt file included into the download package. You can always refer back to that list in case you accidentally delete any of the CSS classes.
To add other testimonial sections simply duplicate the existing ones, add your content and customize.
Auto-Scrolling
By default the slider frequency is set to 7 seconds (7000 ms) but you can change it by editing the JS code in the Code module. To do that open the Code module and find the line with 7000 and change it to whatever you need, for example, if you want the slides to change with a 5s interval then you should add 5000.
If you want to disable the auto-scroll feature completely then remove the part of the code indicated below.
I hope you’ll find these testimonial slider sections useful, go ahead and subscribe now to grab your copy for FREE!
P.S. Make sure you also check out the Divi Module Slider with pause/play control and multiple module support (it is free too).
Hey, I am running the latest version of DIVI and while the Testimonial Slider Light is showing, there is an issue: symphonic-design.com/experiments/
Do you see what I mean?
Slide 1 John and Slide 3 Jake show fine, Slides 2 and 4 are displayed very briefly as the slide animation activates. The navigation buttons only switch between John and Jake.
There is no additional code instance on this page, CSS and JS code moduloes are intact and all CSS classes have been preserved. I deleted and reinstalled fresh copies of your files several times. No fix.
Can you help?
Thanks!
Hi Sven.
This looks like a conflict with some other JS on your site, possibly with a plugin. Please test the slider on a different Divi installation just to check if the issue is happening only on your current website or everywhere.
Hi Ivan, you were right. My GDPR plugin ‘Complianz’ is causing it not to work. I neither have the knowledge to customize any code nor can I deinstall Complianz. It unfortunately only leaves me with the option of not being able to use your solution. What a shame …
Hey…I have just suscribed to your website in order to download all the modules but I am not getting any way to do so.
It will will be very kind of you if you help me out in this download thing.
Hi Aditya.
Make sure you confirm your email address, the download link will be emailed to you after the email confirmation.
Hi Ivan, I’m having some trouble with the light version of the slider where the next/prev icons are not circular and instead round rectangles (button like). The these icons also seem to be aligned to the top rather than vertically align middle. Any ideas what might be causing this? thx
Hi Wes. This can be caused by some other CSS conflicting with the custom CSS of the slider, try to inspect the buttons using the browser dev tools to see what CSS is causing this issue.
Dear Ivan,
great Freebis – thanks a lot.
Unfortunately I cannot find the Auto Scrolling adjustment function in the code (testimonials-slider.css) Am I searching in the wrong place?
Hi Markus,
you should edit the JS code which is in the Code module of the layout, please read the instructions above (the Auto-Scrolling part).
Great post, Thank! Is there any way to have 3 horizontal testimonials that slide to a new one?
Hi Ray, this slider allows having only one testimonial per slide.
Hi, I’m having a problem with the mobile presentation, the width doesn’t work, the slide is long and thin. See the problem by accessing below
eleveestetica.com.br/site
Hi Thiago.
The column containing the slider buttons is applied a 100% width on phone, setting it’s width to 0(zero) will fix the issue.
This is great, thank you! Two questions;
1.) Can the quote icon be changed to a different icon?
2.) Can this be used in a full-width section?
Hi Al.
1) Testimonial module doesn’t have this option so, you’ll have to change the quote icon with custom CSS.
2) No, it’s a standart section but if you want to make it fullwidth you can set the row width to 100% (it’s 80% by default).
Ah, I see.
Regarding #2, it’s not so much that I want it 100% full width but I want to use the “Scroll Down Icon” feature which is only available in full-width sections.
Thank you though…love this!
Do you mean the “Scroll Down Icon” available in the Fullwidth Header Module? You can add a Fullwidth section with the Fullwidth Header Module(with enabled scroll down icon) at the top of the page and below add the Testimonials Slider section.
Hi! Thanks for providing this, it really solved a problem from a client. I did everything as per the instructions but the arrows don’t seem to navigate the right way. They both make the testimonials slide to the right. I’d like to have the left button making it slide left too. How do I fix this please?
Hi Gila,
the left arrow should have the
dvcs_prev_f
CSS class assigned to it and the right arrow should have thedvcs_next_f
CSS class.In your case both of the arrow buttons have the
dvcs_prev_f
CSS class, you probably edited the styling of the left arrow and then copied and pasted it to the right arrow to make them the same style, but this also copies the CSS classes assigned to the modules.Simply open the right arrow module settings (its a Blurb module), switch to Advanced tab and under CSS ID & Classes toggle replace the
dvcs_prev_f
class with thedvcs_next_f
class. This will solve the issue.Thank you so much, that worked!
Hi Ivan,
Thankyou for providing this freebie :) I was hoping you could help? I have everything setup per instructions. The slider is showing correctly on my mobile, however it is not showing correct on desktop. The modules are on top off each other rather than sliding. Where do you think I went wrong??
Hi Aly,
it’s difficult to say without checking your site but make sure only one of the modules is assigned the “active” CSS class (it is
dvcs_current_f
for the Light, anddvcs_current_y_f
for the Yellow slider), you can check that in Testimonial Settings->Advanced->CSS ID & Classes.Hi Ivan,
I have worked it out. It was only not working in Chrome. I disabled a few chrome extensions and it is now working. Thankyou again for your awesome freebies. :)
Hi Ivan, it was great. Im used The Light version one. But, it seems lag. It appear two testimonials rather than one by one.
Kindly assist me to fix this. Thanks in advance Ivan.
Hi docmz91,
please make sure only one Testimonial module has the
dvcs_current_f
CSS class, go to Testimonial Module Settings->Advanced->CSS ID&Classes to check that.I think I did something wrong. When I go to “Add from Library” it doesn’t show anything there that is from Testimonial Sections? It says “You have not saved any items to your Divi Library yet. Once an item has been saved to your library, it will appear here for easy use.”
Hi Illyssa,
you need to add it as a section rather than a layout, click to add a new section and select Add From Library.
Hope this is helpful.
Dear Ivan,
I subscribed and i didn’t receive the download links !
Thank you
Hi Ezzy,
sometimes it takes a bit longer to deliver, check again after a while.
Dear Ivan,
Thank you for the testimonial sliders layout.
The Light one works fine, but the Yellow one looks like the one on the page wdjc.gr/test2/
I have not altered any code or css and the active testimonial has the class dvcs_testimonial_y_f dvcs_current_y_f.
I would really appreciate your help.
Thank you in advance.
Hi Vana,
you did not add the custom CSS of the yellow slider, add it and it should be fine.
Thank you so mush! My bad!
Hi there.
I have added this code to one of my websites but when it first loads, It shows all the testimonials in the column, then after x amount of seconds ( I believe the interval for the slider to change) it fixes itself and looks like your demo. Is there some sort of piece of code or something I can do to fix this because I love how it looks on my website.
Hopefully this makes sense.
Thanks in advance!
Hi Savanna,
make sure only one testimonial module has the
dvcs_current_f
(or thedvcs_current_y_f
for yellow slider) CSS class which sets the active state for the current testimonial(read the IMPORTANT section above and the README.txt file carefully) while the rest are hidden.Most probably you have deleted all the demo testimonial modules except for the first one which has the
dvcs_current_f
class by default and then duplicated this testimonial module thus making all of the testimonials active initially on page load.Hope this makes sense.
Hi Divicio,
It’s look great but It doesn’t work for me :/
I’ve tried it 2 times and both times when I save and exit after modifications all my page disappear. Do you have an idea why ?
Cheers
Adrien
Hi Adrien,
it’s hard to tell why this would happen without inspecting, and it is not necessarily caused by the Testimonial Slider sections. Actually, these sections have been tested thoroughly and have never caused any issues similar to what you’re experiencing. You might be having an issue with your current Divi installation (maybe a plugin conflict), try to use these sections on a different Divi installation to see if they work fine there.
Greetings.
Could this be adapted for use with posts?
Hi Scott,
yes, it is possible, but you can’t just replace the Testimonial modules with the Blog module in its current implementation, it will require changing selectors in the CSS and JS code accordingly to make the individual blog posts slide.
But, for example, the Image modules would work fine if used instead of Testimonial modules with the same custom CSS class(es) assigned to them (you’d just have to apply some minor changes to custom CSS, for example, remove the quote icon CSS).
Basically, any module having the same custom CSS class(es) that the Testimonial modules are assigned will become a slide.