How to create a Divi Testimonial Slider

By Divigrid

May 16, 2024

Having testimonials on your website is crucial, but it can be a hassle when Divi doesn’t include a Divi testimonial slider. Don’t worry, though! This guide will walk you through creating a beautiful Divi testimonial slider using Divi modules, without needing any third-party tools. Ready to get started?

How to create a Divi Testimonial Slider

Which module will we use to create a Divi testimonial slider?

The Slider module, a standard feature in Divi, serves as our tool to craft a testimonial slider. By incorporating essential custom CSS within the slider module, we can transform its appearance and functionality to suit our testimonial needs. These tweaks will seamlessly convert the slider into a platform for showcasing compelling testimonials, enhancing user experience and engagement on your website.

Complete these basic steps

First, Add the Slider module from the “add module” options. After that, write your testimonial text. Now from the text area write the Client’s name ( The name of the person who gave the review ) and the Company or designation name. Design these text with inline CSS as you like. Here we write Our title, review text, client’s name, and the company name.

Add the CSS snippet below to your website

With the increasing use of mobile devices for browsing the web, mobile responsiveness is crucial for a website’s success. Divi provides responsive design options, but users may encounter issues with mobile responsiveness. To ensure your testimonial slider is mobile-friendly, you need to add a custom CSS module to your website.

Add a module named “code” and paste this code here

divigrid code for testimonial 1
divigrid code for testimonial 2

Paste this code in the code editor/ free custom CSS field


./*manually add the image URL to the slide controller
This image replaces the dot controller*/
.et-pb-controllers a:nth-child(1) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}
.et-pb-controllers a:nth-child(2) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}
.et-pb-controllers a:nth-child(3) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}

.et-pb-controllers a:nth-child(4) {
content: url(‘PASTE YOUR IMAGE URL HERE‘);
}
/*size and position of images*/
.et-pb-controllers a {
width: 90px;
height: 90px;
border-radius: 100%;
margin: 0 15px;
}
/*change opacity on hover*/
.et-pb-controllers a:hover {
opacity: 1;
}
/*Active Slide Controller custom CSS*/
.et-pb-controllers .et-pb-active-control {
width: 100px;
height: 100px;
margin-bottom: -5px;
}

/*force off the text shadows*/
.et_pb_slide_description {
text-shadow: none!important;
margin-bottom: 20px!important;
}
/*change the slide description animation*/
.et-pb-active-slide .et_pb_slide_description {
animation-name: fadeIn;
}

@media (max-width: 980px) {
/*size and position of images – mobile*/
.et-pb-controllers a {
width: 50px;
height: 50px;
border-radius: 100%;
margin: 0 10px;
}
/*Active Slide Controller custom CSS – mobile*/
.et-pb-controllers .et-pb-active-control {
width: 60px;
height: 60px;
margin-bottom: -5px;
}
/*adjust image position – mobile*/
.et-pb-controllers {
bottom: 10%;
}
}

/*position the images – mobile*/
@media (max-width: 767px) {
.et-pb-controllers {
bottom: 20%;
}
/*position the images – mobile*/
.et_pb_slide_description {
margin-bottom: 50px!important;
}
}

Add Client’s Image in the testimonial

This step is pivotal for the testimonial slider’s functionality and aesthetics. We’ll replace the dot controllers with images and fine-tune their size, position, and responsiveness. By doing so, we’ll ensure that the images align perfectly with your design vision and enhance the user experience. Let’s proceed with this crucial customization to elevate the impact of your testimonial slider.For optimal results, it’s advisable to upload square images from your WordPress media library and then copy their respective URLs.After copying the URL then paste

.et-pb-controllers a:nth-child(1) {
content: URL(‘PASTE YOUR IMAGE URL HERE’);
}
[ this code is already written in the code snipped]

As many images as needed, the links of the images should be placed one after the other. We are going to show four images here so we have placed four images.
That means Duplicate or remove code as necessary based on the number of slides. Maintain the existing format using the “:nth-child(number)” approach to correspond with your slide count.

Controller Images showing left or right position

Left position

If you want to show the images in the left position then write this code in the custom CSS field/ code editor field
divigrid left side testimonial

.et-pb-controllers{
display: flex;
flex-direction: column;
bottom: 11%; //[ you can decide where is suitable, just position your desired need ]
}
.et-pb-controllers a{

Margin: 10px;
}

Right position

If you want to show the images in the right position then write this code in the custom CSS field/ code editor field
divigrid right side testimonial

.et-pb-controllers{
left: unset;
width: unset;
display: flex;
flex-direction: column;
right: 0;
}
.et-pb-controllers a{
Margin: 10px;
}

Final Thoughts

Integrating a testimonial slider into your Divi website adds a layer of credibility and engagement, but the absence of a built-in feature can be a hurdle. However, with the step-by-step guide provided here, you can bypass this limitation and create a stunning testimonial slider using Divi modules and custom CSS.By utilizing the slider module and incorporating essential CSS tweaks, you can transform it into a powerful tool for showcasing compelling testimonials. The customization process outlined ensures not only functionality but also aesthetic appeal, allowing you to tailor the slider to seamlessly blend with your website’s design.From adding client testimonials to replacing dot controllers with images, each step is meticulously crafted to enhance the user experience and elevate your website’s credibility. Moreover, the flexibility offered by custom CSS enables you to position images precisely and fine-tune their appearance for optimal results.Whether you’re a seasoned web designer or a novice, this tutorial equips you with the knowledge and tools needed to create a beautiful testimonial slider without relying on third-party tools. So, roll up your sleeves, follow the instructions, and unlock the potential of Divi to captivate your audience with compelling testimonials that leave a lasting impression.
To learn more tips & tricks please visit: Divigrid Tips & Tricks If you want to read an article about testimonial slider from elegant themes please visit  Testimonial Slider

Divigrid

Divigrid is the perfect way to make your website stand out from the crowd. With its unique grid system, you can create a truly one-of-a-kind design that will wow your visitors.

Get 10% OFF for Subscribe Now

0 Comments

Submit a Comment

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

You May Also Like