Create Engaging Client Testimonials with Divi Slider: A Step-by-Step Guide

Client testimonials are a powerful tool for building credibility and trust on your website.

‍

In today’s digital age, potential clients often rely on positive feedback from previous customers before making a decision. This article will guide you through creating a visually appealing client testimonial slider using the Divi theme for WordPress. Follow our step-by-step tutorial to enhance your website’s appeal and increase user trust.

Why Are Client Testimonials Important?

Client testimonials play a crucial role in marketing strategies. Here’s why they matter:

Build Trust: Testimonials provide social proof that your services or products deliver on their promises.
Connect with Visitors: They create a relatable experience for potential clients who may have similar needs or concerns.
Explain Benefits: Testimonials highlight how you've successfully helped previous clients, making it easier for new visitors to understand the value of your offerings.

In this tutorial, we will utilize the Divi Slider module to create a seamless testimonial experience for your website visitors. Let’s dive in.

‍

How to Create a Client Testimonial Slider in Divi

‍

Step 1: Insert a New Divi Slider Module

Begin by adding a new slider module to the section where you want your testimonials to appear on your website. If a secondary slider exists, delete it to customize only the primary one.

‍

Step 2: Customize the Slider Content

Instead of editing each individual slide, it is more efficient to modify the main slider settings. This ensures uniformity in design across all slides:

Add an Image to the First Slide: Click on the gear icon associated with the first slide to access the slide settings. Under the content tab, you'll find a rounded plus button for adding your image.
Set Transparent Backgrounds:
- Return to the main slider settings and navigate to the background section. Choose a transparent background for both the main slider and individual slide settings.

‍

Step 3: Configure the Testimonial Text

In each slide, the title text should represent the testimonial itself, while the body text should include the name of the person giving the testimonial:

Open the Text Section: Access the slide settings and input the testimonial text in the title area and the client's name in the body section.

‍

Step 4: Adjust Responsive Settings

To ensure the slider looks great on all devices:

Edit Container Properties:
- Go to the Advanced tab and open the Custom CSS section. Enable responsive views for the slide description and adjust widths:
  - Set 75% width for both desktop and tablet views.
  - Set 100% width for mobile.
Manage Button Visibility:
- Click on the slide button field, enable responsive options, and apply a display: none; code to hide it across all views.
Slider Image Settings:
- Enable responsive options for the slide image field:
  - Apply 20% width and 5px right margin for desktop/tablet.
  - Apply 100% width and 0 right margin for mobile.
- Ensure the image shows on mobile by altering visibility settings.

‍

Step 5: Design Customization

After content layout and responsiveness, focus on the design:

Border & Shadow Settings: In the design tab, adjust the border width to 1 pixel and set rounded corners to 8 pixels. Select your desired box shadow effect.
Image & Title Text Formatting: In the image section, set all rounded corners to 100 pixels. For the title (testimonial), access the title settings and format to fit your brand style, ensuring responsive settings are enabled.
Client's Name Input: For the body text, include the client's name. You may optionally include their position and company name based on your preference.

‍

Step 6: Duplicate and Add More Testimonials

Once you are satisfied with the design for the first testimonial, simply duplicate the slide to add more testimonials without starting from scratch. Update the content by clicking the gear icon on each duplicated slide.

‍

Step 7: Final Touches on Navigation

Finally, go to the Navigation section under the design tab to change the colors of the arrow and dot navigation to match your site’s aesthetics.

‍

Conclusion

Creating a client testimonial slider using the Divi slider module not only enhances the visual appeal of your website but also reinforces trust with potential clients. By following this step-by-step guide, you will efficiently showcase positive customer feedback, ultimately boosting your business prospects.

Enhance your website’s credibility by implementing this testimonial slider today! Don't forget to like, share, and subscribe for more design tips and tutorials!

‍