Testimonials are an essential form of social proof for businesses. Even without trying, businesses get reviews on their Google Business Profile, Facebook page, and directories like Yelp. As nice as it is to have testimonials and reviews scattered across the web, it is also very nice to be able to display them on your website. A carousel is the perfect way to do that.
Divi 5 introduced the Group Carousel Module. It’s one of our most flexible modules and is perfect for creating a testimonial carousel. Below, we’ll walk you through each step needed to use this module. Not only that, but I’ll give you a rundown of the different ways that you can store your testimonial content on your WordPress site.
How To Build A Testimonial Carousel In Divi 5
It all starts with Divi 5 and its new Group Carousel Module.
Subscribe To Our Youtube Channel
1. Use The Group Carousel Module
One of Divi’s newest modules is the Group Carousel Module. It is one of our most flexible and customizable modules ever and is ideal for displaying testimonials.
When you add it to your page, it also adds a child Group Module inside of it. Each “slide” or “card” of your carousel will be built within the Group. Right now, we’ll focus only on creating the first slide/card/group and making sure it’s designed and set up to your needs.
At this point, look at the Carousel settings for how many carousel groups you want to display at a time. This will affect how you want to design each group. Also, change the number of groups shown at each breakpoint. For this example, three groups are shown on desktop, two on tablet, and one on mobile. Notice how easy this was to do with Divi’s new Responsive Editing options.
2. Arrange Testimonial Items Inside The Carousel Group
Because the Group Carousel Module uses a Group Module within it, you can add any other Divi Module inside the group. You aren’t restricted to preconfigured fields/elements to display in your carousel. You can choose exactly what you want in it. Set a contrasting background color so you can clearly see each slide. Then, I add the supporting modules and some placeholder content.
You also have complete layout control using Divi’s flexbox container layout settings. Adjust these settings on the Group level to determine how all your modules inside the group get laid out.
3. Duplicate The Group Item Or Set Up A Loop
When you create your first fully designed group, you can easily create others to fill the carousel. The video above shows duplicating each Group to fill out the carousel. This is good if you will be manually entering your testimonial data.
But there’s a more scalable way if you are willing to create a Custom Post Type for your testimonials. This has a few advantages:
- Use testimonials across your site in different Query Loops
- Create/store/edit all testimonials in one place
- Save time on manually entering testimonial entries into Divi if you have a lot of testimonials to show (it’s faster than CPT or even an Option Page with a Repeater field).
If you already have a testimonial CPT set up, Divi’s Loop Builder is a natural fit. Instead of duplicating your first Group, you can enable a loop on that Group.
Once the loop is created, we are able to connect each piece of placeholder text to dynamic data within that loop. Again, this assumes you have a post type created for these; more on that later.
4. Carousel Settings
With the Carousel slides/cards now populated with content (either from a manual entry or via the Loop Builder), we can put the final touches on the Carousel.
You can turn on auto-rotate, adjust its speed, and the speed of the transition effect. There’s even a Center mode for prominent displaying the centered slide.
Divi’s Group Carousel Module comes with some navigation options. You can enable arrows on the sides so the user can manually move them. A dot navigation is also at the bottom (default) to do the same. Both can be customized in the Design settings.
Testimonial Content Architecture
At risk of overexplaining how to construct a testimonial card, there are different ways to go about it. The path you might choose depends on whether you plan on updating these testimonials often and how much work you want to do up front.
Loop Through Testimonials In A CPT
Custom Post Types offer a way to create buckets of different types of content. They are perfect for using your Divi website to its fullest potential.
You can create a CPT with PHP, a CPT plugin (like ACF, ACPT, or PODS), or a dedicated plugin that connects with Review services via API to pull information directly to your website. Creating a CPT with a plugin is the lowest-cost and simplest setup method.
When you create a Testimonial Post type, you’ll want to add a field group to the CPT. This field group will include things like the reviewer’s name and/or business, star ratings, and maybe a URL for users to access the original location of the review. This is up to you, but it is all very usable within Divi’s Loop Builder.
When you’ve created your content architecture for the CPT, fill in a couple of posts’ worth of data (or dummy data if you do not have it yet). After that, jump back into Divi, create the loop on the Group Carousel Module’s child Group (like we showed you in the above steps).
Now, whenever you add a new post to that CPT, it will update your testimonial carousel. This is a great way to keep your displayed testimonials up to date!
Download The Layout Used In This Post
You can download the section layout used in this post by signing up below. To use the section on your website, navigate to Divi > Divi Library and click the import/export button at the top.
Try The Group Carousel Module In Divi 5 Today
We know that Divi’s progress slowed down for a while there. But that was because we were building the new infrastructure for Divi 5. Now that it is in place, we’ve been able to create a lot in a very short timeframe.
We’re pleased that the Group Carousel Module dropped (and, at the same time, the Lottie Module and Icon List Module!) and know that you can do much more with it. Once you’ve gotten used to it, you’ll wonder how you got on without it.
This isn’t the only thing that has launched in Divi 5 recently. To get the whole experience, you just have to try it for yourself. Divi 5 is available for new website builds, and we also have a demo site available for you to try (with no setup work).
Leave A Reply