Create Better Divi Headers

Free Download: Divi Testimonials Slider Sections

by | Sep 11, 2018 | 38 comments

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

View Live Demos & Get Divi MadMenu

    Download FREE Divi Sections

      38 Comments

      1. Sven

        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!

        Reply
        • Ivan Chiurcci

          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.

          Reply
          • Sven

            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 …

            Reply
      2. Aditya

        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.

        Reply
        • Ivan Chiurcci

          Hi Aditya.

          Make sure you confirm your email address, the download link will be emailed to you after the email confirmation.

          Reply
      3. Wes

        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

        Reply
        • Ivan Chi

          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.

          Reply
      4. Markus

        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?

        Reply
        • Ivan Chi

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

          Reply
      5. Ray

        Great post, Thank! Is there any way to have 3 horizontal testimonials that slide to a new one?

        Reply
        • Ivan Chi

          Hi Ray, this slider allows having only one testimonial per slide.

          Reply
      6. Thiago Maksimavicius

        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

        Reply
        • Ivan Chi

          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.

          Reply
      7. Al

        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?

        Reply
        • Ivan Chi

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

          Reply
          • Al

            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!

            Reply
            • Ivan Chi

              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.

              Reply
      8. Gila

        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?

        Reply
        • Ivan Chi

          Hi Gila,

          the left arrow should have the dvcs_prev_f CSS class assigned to it and the right arrow should have the dvcs_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 the dvcs_next_f class. This will solve the issue.

          Reply
          • Gila

            Thank you so much, that worked!

            Reply
      9. Aly Scroggie

        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??

        Reply
        • Ivan Chi

          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, and dvcs_current_y_f for the Yellow slider), you can check that in Testimonial Settings->Advanced->CSS ID & Classes.

          Reply
          • Aly

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

            Reply
      10. docmz91

        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.

        Reply
        • Ivan Chi

          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.

          Reply
      11. Illyssa Tussing

        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.”

        Reply
        • Ivan Chi

          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.

          Reply
      12. Ezzy

        Dear Ivan,

        I subscribed and i didn’t receive the download links !

        Thank you

        Reply
        • Ivan Chi

          Hi Ezzy,

          sometimes it takes a bit longer to deliver, check again after a while.

          Reply
      13. Vana Stamatekou

        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.

        Reply
        • Ivan Chi

          Hi Vana,
          you did not add the custom CSS of the yellow slider, add it and it should be fine.

          Reply
          • Vana Stamatekou

            Thank you so mush! My bad!

            Reply
      14. Savanna

        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!

        Reply
        • Ivan Chi

          Hi Savanna,

          make sure only one testimonial module has the dvcs_current_f (or the dvcs_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.

          Reply
      15. Adrien

        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

        Reply
        • Ivan Chi

          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.

          Reply
      16. Scott

        Greetings.

        Could this be adapted for use with posts?

        Reply
        • Ivan Chi

          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.

          Reply

      Submit a Comment

      Your email address will not be published. Required fields are marked *

      Subscribe To Our Newsletter

      Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

      You have Successfully Subscribed! Please confirm your email address.

      Divi MadMenu Coming Soon!

      Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

      You have Successfully Subscribed! Please confirm your email address.

      Get FREE Divi Layouts

      Download 20+ Divi templates for FREE!

      Please confirm your email address to complete your subscription. Thank you!

      Black Friday Is Coming!

      Subscribe to get notified when our BIGGEST SALE starts!

      Please confirm your email address to complete your subscription. Thank you!

      Cyber Monday Is Coming!

      Subscribe to get notified when the SALE starts!

      Please confirm your email address to complete your subscription. Thank you!

      Black Friday Is Coming!

      Subscribe to get notified when our BIGGEST SALE starts!

      Please confirm your email address to complete your subscription. Thank you!