#
Back to blog page

How to Create Testimonial Carousel in Divi – 5 Simple Steps! 

by | Nov 23, 2023 | Divi

How to Create Testimonial Carousel in Divi
Table of Contents

If you’re a business owner looking to add user reviews to your website, Testimonials is the right option to choose.

Testimonials on your website do more than just share user feedback. They’re like a golden key to gaining trust, proving your credibility, and increasing sales. 

When customers see positive experiences from others, they’re more likely to believe in your products or services. These testimonials create a sense of reliability and encourage people to take action, boosting your conversion rates. 

In this guide, we’ll walk you through how to create a stunning testimonial carousel from scratch using Divi. 

Simply follow these steps to create compelling testimonials that will leave a lasting impression on your audience. 

Prerequisite

But before jumping over the process, we have some requirements to fill –

You may have a question in mind, why should we use this specific third-party plugin?

The reason is – that Divi’s Testimonial module doesn’t have testimonial carousel options. So, we are in search of a third-party plugin that can fulfill our thirst.

After trying a couple of plugins, we have found only great support on the Divi Carousel Module by DiviGear. 

With this plugin, you can create an appealing testimonial in just a few steps.

How to Create a Testimonial Carousel in Divi

Step One: Start with Section, Row, and Module

Our step one primary goal is to insert a module. But before doing so, we need to add a section and row. 

1.1: Add New Section

Get on the Divi dashboard and add a regular section by clicking the blue (+) icon. You can add a new section on an existing page also.

Here you have three options to choose from. But we only go for the Regular section. Click the Regular button to add a new section.

After adding a new section, we are going to change the background color. It’s not necessary but as the background is white, we want to make a difference.

Just go over the – Section Settings>Background> Add Color> #f9f9f9

Note: You can add any color or explore more to make your design unique.

1.2: Add New Row

Click the green (+) button and you can see there are a bunch of row designs to pick. You can try any of them.

But to make a simple testimonial carousel, we are going for a single-column row. 

1.3: Add Divi Module

We have finally reached our goal after adding a row. To add a module, click the gray(+) icon. Then the module list will appear. 

Now, Scroll through the menu to find the module or search for it by its name “Divi Carousel”

Press enter or click the mouse to insert the module.

Step Two: Add Your First Testimonial

After inserting the Divi Carousel module, the modal will view the “Divi Carousel Settings”

Now press the “+Add New Item” to make the first item of this carousel.

Step Three: Design Your Testimonial Appearance

After clicking the “+Add New Item”- will redirect you to the item settings; Carousel Item Settings. 

This Carousel Item Settings is similar to the Divi default settings interface. 

Here, we are going to work with only the Content tab and Design tab cause the Advanced tab requires coding skills.

But you have full rights to do customization as you need.

In the Content Tab

At the start of step three, we just create a space for the New item. But here in the Content tab, we will give the New item an identity.

1.1: Name Your ‘New Item’

Now, go to the Main Content option, and fill the fields with –

  • Title: Mal Watson
  • Subtitle: Designer
  • Content: Lorem ipsum ……. Nisi (Demo content)
1. 2: Adding Image

To add a reviewer or customer image, simply click the – Image Settings > +Add Image button and upload an image.

1.3: Adding a Star Rating

Star rating on testimonials gives clients a proper understanding within a wink. 

So, if you want a rating on your testimonial, you can follow this step.

To show the star rating, go to the ‘Meta’ and toggle ON the “Use Rating” button. Moreover, you have the freedom to choose a rating from one to five.

In the Design Tab

We have finished creating an item, now let’s design it.

Note: Remember, you are not limited to this design. You can try a vast of design options with this plugin.

2.1: Changing Image Styles, Title Style & Subtitle Style

Go to the mentioned field and just change them according to the below –

  • Image Styles > Image Position > Bottom
  • Title Style > Title Position > Bottom
  • Subtitle Styles > Subtitle Position > Bottom  
2.2: Changing Rating Style

Change the position according to below

Field NameChanging Position
AlignmentCenter
PositionBottom
Rating Icon Size21px
Rating Color#8b68ee
2.3: Picking a Box Shadow Style

Pick a preferable Box Shadow style. Here we choose the last-right in the first row.

Step Four: Duplicating Item 

We have completed the steps to make an item. Now we have to duplicate it.

But Why are we duplicating this? Because testimonials are not made of one review. To make it multiple we are doing so.

Now, get back to the Carousel module settings. These global settings will let us duplicate or create multiple items in one click. 

Let’s do it ….

  1. Get over the ‘Divi Carousel Settings’ and the ‘Content’ tab will appear.
  2. Now, click over the ‘Duplicate’ icon to make an item duplicate.

Here, we made two copies. You can create as many copies of the item as you want to see reviews for. Make sure that each item is named properly.

1.1: Name Your New Items

We have previously done this step at Step Three> In the Content Tab> 1.1: Name Your ‘New Item’

Now get over the new item settings options and do the same  –

For second item

  • Title – Devid Miller
  • Subtitle – Developer
  • Image Settings – Add Image

For third item

  • Title – Pol Hardy
  • Subtitle – Designer
  • Image Settings – Add Image

Note: You must add titles, subtitles, and images individually to each item you create

Step Five: Adjust Global Settings

Now, we are on the Divi Carousel Settings, as well as the global setting. In this global setting, we are going to make a change to its Content and Design settings. 

And leftover Advanced settings let you do more customization if you are an expert on codes.

In the Content Tab

With this Content tab, we are going to change its content module settings.

Step 1: Change on Slider Settings

We have to change these settings –

Field NameChanging Position
Show item Desktop2
Show item Tablet1
LoopYes
Arrow NavigationYes
Dot NavigationYes

Previously we have seen 3 items but The given value upon 2 on ‘Show item Desktop’ lets you visible 2 items now.

Step 2: Add Background Color
  • Background> Add Color> #f4f4f4

In the Design Tab

This carousel design setting will help you to design your carousel. 

But please remember that you are not limited to this design. Explore and try out a huge number of style choices.

Now, Go to the ‘Design’ tab and change the settings of these fields –

Step 1: Change Image Settings
  • Go to the Image> Image Max Width> 22%
Step 2: Change Image Border Settings

This Image Border setting will help you to shape your reviewer or customer images. 

Field NameChanging Position
Image Rounded Corners100px
Image Border Width7px
Image Border Color#ffffff

Check the reviewer image, we have rounded that in this step.

Step 3: Change Title Text, Subtitle Text & Body Text 
Field NameSub FieldChanging Position
Title TextTitle FontRoboto
Title Text AlignmentCenter
Subtitle TextSubtitle FontNunito
Subtitle Text AlignmentCenter
Body Text Body Text AlignmentCenter
Body Text Size 16px
Step 4: Next & Previous Button Settings
  • Next & Previous Button> Position> Middle and Outside the container

Note: There are no settings left to change. But you can tune-up for the ‘Tablet’ and ‘Phone’ also. 

Step 5: Color Settings
Field Name Changing Position
Arrow Color#ffffff
Arrow Background Color#afafaf
Dots Color#d6d6d6
Dots Active Color#6b6b6b
Step 6: Custom Spacing

Custom Spacing helps you to organize content and keep things clear and balanced.

And here we use it cause we have to change the look of this testimonial. In particular, we want the star rating in between Title and Subtitle, to make it look better.

But before doing so, we need to understand two things. Margin and Padding. 

  • Margin controls the space around an element
  • Padding controls the space inside an element
In the Container Tab

After that, let’s change the container tab.

Field Name TopBottomLeftRight
Inner Wrapper Padding23px23px 20px 20px 
Carousel Item Padding44px
Image Container Margin-45px
Content Container Padding19px71px32px 32px 
Rating Container Margin-50px
In Content Tab
Field Name TopBottom
Subtitle Margin17px
Text Padding63px50px

Now click on the “Save” button and see the output by exiting the visual builder.

Preview

That’s it.

Let’s have a look at what we made!

Conclusion

Now you have a solution in hand on how to create a testimonial carousel in Divi. 

We hope this guide helped you to create an impressive testimonial carousel in a few steps with ease.

Give this a try or, if you are having trouble to make a new one. Feel free to knock us on. Our team is eagerly waiting for your response.

Team DiviGear

At DiviGear, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

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