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 –
- Install the latest version of the Divi theme
- And the latest version of the Divi Carousel Module 2.0 Plugin
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 Name | Changing Position |
---|---|
Alignment | Center |
Position | Bottom |
Rating Icon Size | 21px |
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 ….
- Get over the ‘Divi Carousel Settings’ and the ‘Content’ tab will appear.
- 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 Name | Changing Position |
Show item Desktop | 2 |
Show item Tablet | 1 |
Loop | Yes |
Arrow Navigation | Yes |
Dot Navigation | Yes |
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 Name | Changing Position |
Image Rounded Corners | 100px |
Image Border Width | 7px |
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 Name | Sub Field | Changing Position |
Title Text | Title Font | Roboto |
Title Text Alignment | Center | |
Subtitle Text | Subtitle Font | Nunito |
Subtitle Text Alignment | Center | |
Body Text | Body Text Alignment | Center |
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 | Top | Bottom | Left | Right |
Inner Wrapper Padding | 23px | 23px | 20px | 20px |
Carousel Item Padding | 44px | |||
Image Container Margin | -45px | |||
Content Container Padding | 19px | 71px | 32px | 32px |
Rating Container Margin | -50px |
In Content Tab
Field Name | Top | Bottom |
Subtitle Margin | 17px | |
Text Padding | 63px | 50px |
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.
0 Comments