Testimonial is a valuable support for a thriving business. It influences the purchasing decision of a customer. So authentic showcasing of testimonials on a website can effectively speed up business growth.
From this perspective, a slider can be an interactive and spectacular way to present testimonials. It can be everyone’s definitive choice. Isn’t it?
But what about a website owner with Divi builder?
No doubt. It’s a must-pick. But how to make a testimonial slider in Divi? To answer this question, we have come up with this tutorial.
We find amazing support from the DiviFlash Testimonial Carousel Module to complete our slider design. And now, we will let you know about this experience.
Here is our amazing slider testimonial design. Check this demo here and download it to learn more about it. You will end up designing this same testimonial.
Let’s see how!
Prerequisite:
- Install the latest version of the Divi theme.
- The latest version of the DiviFlash Plugin.
How to Make Testimonial Slider in Divi
Now, let’s get started. We will keep an area above the slider as an introductory part of the testimonial.
Section Design
Use the visual builder to add a regular section on an existing page or create a new one. Just change the background color, other than there is nothing to do. So go for the row design.
In the Content Tab,
Under Background Option,
- Background Color: #f9f9f9
Row Design
For this design, we need two single-column rows. There will be no customization. So move to the module design.
Divi Modules
Time to add modules. Along with the DiviFlash Testimonial Carousel Module, there will be three default Divi text modules and a divider module. Let’s see how to insert them.
Modules Designs
Clicking the gray plus icon will open up the module list. Here scroll for the module or search by its name. All the Text and Divider modules will take place in the first row. Whereas only include the DiviFlash Testimonial module in the second row. Let’s enter them one by one.
1st Text Module
We will start with the first text module. It will work as the name of this testimonial section. Style the text and add some bottom margin. Here is how to do it.
In the Content Tab,
Under Text Option,
- Body Paragraph: Testimonials
In the Design Tab,
Under Text option,
- Text Font: Nunito
- Text Font Weight: Bold
- Text Font Style: TT (Uppercase)
- Text Text Color: #f8b600
- Text Alignment: Center
Under Spacing Option,
- Margin: Bottom 15px
2nd Text Module
Next, we will set our second text module with a heading text. Put text to heading three and align it to the center.
In the Content Tab,
Under Text Option,
- Heading Text 3: What our customers say
In the Design Tab,
Under Heading Text Option,
- Heading Text Level: H3
- Heading 3 Font: Nunito
- Heading 3 Font Weight: Bold
- Heading 3 Text Alignment: Center
- Heading 3 Text Size: 35px
Under Spacing Option,
- Margin: Bottom 15px
Divider Module
For the beautification of this design, we will add a Divider module. All you need here is to do the following changes in the design tab.
In the Design Tab,
Under Line Option,
- Line Color: #f8b600
Under Sizing Option,
- Divider Weight: 10px
- Width: Desktop 6%, Tablet 20%, Mobile 25%
- Module Alignment: Center
Under Spacing Option,
- Margin: Bottom 15px
3rd Text Module
This will be the last module in the first row. Add it beneath the divider module with some description content.
In the Content Tab,
Under Text Option,
- Body; Dummy Text
In the Design Tab,
Under Text Option,
- Text Font: Nunito
- Text Alignment: Center
Under Sizing Option,
- Max Width: 75%
- Module Alignment: Center
Testimonial Carousel Module
As per our design, we will put the DiviFlash Testimonial Carousel Module in the second row. The first thing we will do in this module is, include some new items. By adding an item, you can show a client or user testimonial. You can also add as many as you need. Let’s see how to add them.
Go to the content tab of the module setting. Click the (+) icon above the “Add New Item.” Then, the testimonial carousel item setting tab will appear. It will be like the default module setting.
Next, enroll your happy customer’s name, title, company name, company URL, image, and, finally, the testimony. Also, enable the rating option and include an image for the quote icon under the setting option. Here is our customization.
In the Content Tab,
Under Content Option,
- Author: John Doe
- Job Title: Head Of Marketing
- Company: Exemple Inc.
- Company Url: exemple.com
- Body: Demo Text
Under Images Option,
- Author Image: Upload or add image of the person
Under Setting Option,
- Enable Rating: ON
- Image For Quote Icon: Image Source
But you don’t have to touch the design tab for item setting. Just click the right mark in the below right of the item setting tab. And you will be back to the content tab of the module setting.
So, we have made up the first item. There will be another three items in this design. Hopefully, by now, you know how to add items to include the testimonies.
So insert your items. After completing, come down to the carousel setting option and activate the Loop and Arrow Navigation.
In the Content Tab,
Under Carousel Setting Option,
- Loop: ON
- Arrow Navigation: ON
Also, change the order of a few items and the background color.
Under Item Order Option,
- Quote Order: 1
- Testimonial Content Order: 2
- Author Box Order: 10
Under Background Option,
- Background Color: #ffffff
Now, in the design tab, there will be the styling of text and customization of arrows, dots, ratings, icon images, etc. Below, you can see the total breakdown of our design.
In the Design Tab,
Under Author Image option,
- Rounded Corners: 98px (All Sides)
- Box Shadow: First One
Under Author Box Setting Option,
- Author Image Position: Bottom
- Text Alignment: Center
Under Font Style Option,
Name:
- Name Font: Nunito
- Name Font Weight: Light
- Name Text Size: 26px
Title:
- Job Title Font: Nunito
- Job Title Font Weight: Semi Bold
Company:
- Company Font: Nunito
- Company Font Style: Italic Fonts
- Company Text Color: #000000
Body:
- Body Font: Lato
- Body Text Alignment: Center
Under Arrows Option,
- Arrow Prev Icon: ON
- Used Icon: Check Above Image
- Icon Size: 40px
- Arrow Next Icon: ON
- Used Icon: Check Above Image
- Icon Size: 40px
- Arrow Icon Color: #e09900
- Arrow Background Color: rgba(255,255,255,0)
- Arrow Position: Bottom
- Arrow Alignment: Center
- Arrow Previous Margin: Top -99px, Right 76px (Desktop) 450px (Tab) 76px (Mobile)
- Arrow Next Margin: Top -97px
Under Rating Option,
- Rating Icon Color: #e09900
- Alignment: Center
Under Quote & Icon Image,
- Alignment: Center
- Image Max Width: 57px
- Quote-Z-index: 1
Under Custom Spacing Option,
Wrapper:
- Wrapper Padding: Top 34px, Bottom 70px & 76px (Mobile)
Content:
- Author Image Margin: Top 37px, Bottom -77px
Under Border Option,
- Border Width: 2px
- Border Color: #efefef
Under Box Shadow Option,
- Box Shadow: First One
- Shadow Color: rgba(0,0,0,0.05)
That’s it. We have gone through all the steps. Exit the visual builder to check the final preview. Hopefully, your design showcases correctly in different screen sizes as well.
Further, keeping in mind your particular targeted visitors, you can experiment with different testimonial slider designs. And the good part is that there is a range of beneficial features to present clients’ or consumers’ reviews authentically.
Let’s explore all the key features.
Why choose DiviFlash to Make Testimonial Slider in Divi?
From our experience, we can assert the DiviFlash Testimonial Carousel module as an inclusive choice. Here are our top reasons.
- Have a dedicated module for showing testimonials.
- Define the number of carousel slides for different devices.
- Move design ingredients up & down.
- Choose different navigation styles.
- Create design accuracy with beneficial features like custom spacing & equal item height.
- Style background, brand logo, author image, icon, quote image, etc.
Conclusion
So, this was our super easy article on how to make a testimonial slider in Divi. Hopefully, now you can have an intuitive testimonial design on your Divi website with a larger impact on brand promotion or sales acceleration.
If you still have any queries. Our Divi designer team is looking forward to reading your question in the comment section.
0 Comments