Testimonial

Introduction

The Testimonial Widget displays customer feedback stylishly, enhancing trust and credibility with customizable layouts and effects.

Key Use Cases for the Testimonial Widget in Elementor: 

• Use the Testimonial Widget to display customer feedback, reviews, or success stories, building trust and credibility. 
• Create engaging sections to highlight positive experiences, enhancing social proof and boosting user confidence.

Prerequisite

• Elementor
• Animation Addons for Elementor

Note: Ensure that the Animation Addons for Elementor plugin is installed and activated. Then, enable the Testimonial Widget toggle from the plugin settings.

How to Activate a Testimonial Widget ?

To activate the Testimonial Widget, navigate to Animation Addons → Elements in the admin dashboard. Then, select the Widget tab, search for the Testimonial Widget, and toggle it on. The widget will be activated immediately.

How to Configure theTestimonial Widget in Animation Addons?

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

In the Elementor Editor, click the ‘+’ icon to add a section. Search for the “Testimonial Widget”, then drag and drop it into the desired section of the page. Configure the widget settings under the available tabs to customize it as needed.

Here’s the interface where you can configure the settings and customize the Testimonial Widget across various tabs. 

Configuring Testimonial Widget : A Step-by-Step Guide

The Testimonial Widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

In the Content Settings, you’ll find options for Testimonial and Slider.

Testimonial Style

• There are several category styles available, but I have selected the fourth option.

Testimonials

• In the Content Settings of the Testimonial widget, set the testimonial content, choose an image, and add the name and designation of the person providing the testimonial.

Similar to item 1, set the images and content in the section one by one. You can also add more image sections if needed.

• Set the image resolution according to your preference. I have selected “Full” resolution.

Slider Option

• I have adjusted all my slider designs according to my preferences, and you can continue with your own preferred choices.

—————————————————————————————————————————–

Style Settings

In the Style section, you’ll find various options such as Slide, Navigation, Image, Content, Name, and Designation.

Slide

• To customize the appearance, change the background type, adjust the padding for desired spacing, and modify the border color to fit your design preferences.

• For my design, I selected 5 for adjusting the padding and set the border color to (#593939) dark brownish-red for a refined look.
• You can personalize these settings based on your design preferences to achieve the desired visual style.

Navigation

• I have customized my design by setting the arrow size to 20, keeping the border type unchanged, and applying a border radius of 2 with a border color of (#020101) dark shade of black. 

• I did not modify the background type and set the pagination size to 5. These are the adjustments I made for my design, but you can customize them according to your preferences.

Image

These settings collectively control how the image is displayed, adjusting its size, position, and border styling. 

• The Image Styling settings from a design customization panel, likely from a website builder or design tool. The applied settings include a width of 170 px and a height of 165 px. 
• With the object fit set to “Cover” and the object position aligned to “Center Left.” 

• The border type is set to “Double,” with a border width of 3 px applied to all sides. 
• The border color is a shade of red, though the hex code is not fully visible, and the border radius is 3 px, applied to all corners. 

I have made all the changes according to my preference, but you can adjust them as needed to suit your own choice.

Content

• I adjusted the text color to (#160884) shade of dark blue, and did not make any changes to the typography as I don’t think it’s necessary for my design.

• I also adjusted the text shadow and set the padding to 3, but I did not change the margin.

Name

• The text color has been adjusted to (#020202) dark shade of black . 
• No changes were made to the typography or text shadow, as these elements are not deemed necessary for the design. Additionally, the margin has been set to 3.

Designation

The text color has been set to #2E11C2, and the margin has been adjusted to 3. No changes have been made to the text shadow or typography, as they are not required for this design.

All customizations have been made according to my design preferences. You can adjust them as needed to align with your own design style.

Here is the final output after applying all customizations-

—————————————————————————————————————————–

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

—————————————————————————————————————————–

Final Outcome

Congratulations! You’ve successfully learned how to configure the Testimonial Widget in Elementor to customize and display dynamic counters on your website.

For any additional help or inquiries, don’t hesitate to contact our support team!