ClassicTestimonial

Introduction

The Classic Testimonial widget in Elementor displays customer feedback in a simple, professional layout, helping to build trust with your audience.

Key Use Cases for the Classic Testimonial Widget in Elementor:

• Use the Classic Testimonial Widget to showcase customer feedback, reviews, or success stories, fostering trust and credibility. 
• Create clean, professional 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 Classic Testimonial Toggle from the plugin settings.

How to Activate a Testimonial Widget ?

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

How to Configure the Classic Testimonial 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 “Classic Testimonial”, 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 Classic Testimonial Widget across various tabs. 

Configuring Classic Testimonial Widget : A Step-by-Step Guide

The Classic 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 Content and Slider options.

Content

• In the content section, you’ll find various testimonial styles. For Testimonial Item One, you need to set an image along with the content, including the reviewer’s name, title, and a link.

• I selected Style One for my design, but you can customize it to suit your preferences.

• In Item 1, set an image, provide a description, and include the reviewer’s name and designation. Similarly, you can add additional items as needed, following the same format.

• I have selected one icon for the quote section from the library. You can either set it up as I did or upload an icon from your device as well.

After that, set the image resolution to “Full.” There are several options available, and you can choose the one that best suits your needs.

Slider Option

Here, we have a wide range of customization options to design our content. Let’s explore how each of these works and how they can be tailored to fit your design needs.

• Set the slide mode to “Auto” for an automatic process in my design. You can adjust it according to your preferences if needed.

• Set the autoplay to “On” and the autoplay delay to 3500ms. Additionally, adjust the autoplay interaction as needed to fine-tune the behavior according to your design preferences.

• Enable the touch mode and loop. Set the animation speed to 700ms, the space between items to 20px, navigation to “dots,” and the direction to “left” for a smooth and customized experience. As needed to fine-tune the behavior according to your design preferences.

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

Style Settings

In the Style section, you’ll find a variety of options, including Slide, Navigation, Content, Image, Name, Title, and Quote.

I have customized my testimonial using all the available customization options. You can fine-tune the behavior as needed to align with your design preferences.

Navigation

I didn’t make any changes to the navigation part, as I believe my design works fine without it. However, you can customize it as needed if you feel it’s necessary for your design.

Content

Make the following changes: set the text color to black, apply italic typography, and avoid using a text shadow. However, feel free to add your own adjustments as needed.

Image

• I didn’t set the image size here, as I liked the dimensions when I uploaded the picture earlier. 
• For my design, I set the border type to “groove,” as it gives a more professional look. 
• I also set the border width to 3 px, the border color to (#E9D1D1) a soft, light pinkish-beige shade and the border radius to 3 px.

Name

• I have customized the name and designation style by selecting a font that suits my design and setting the color to match the overall theme. Feel free to adjust them according to your own design preferences.

Title

• I have made similar adjustments to the title section as I did with the name and designation. Feel free to customize them according to your own design preferences.

Quote

I have set the size to my preferred dimensions, which I believe complement my design perfectly. Feel free to adjust it as needed to match your own design preferences.

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 Classic widget in Elementor to showcase customer feedback effectively on your website.

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