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.
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.
These section layouts require Divi v3.13 and higher.
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.
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!