Single Testimonial Widget Documentation #

Single Testimonial Widget #

The Single Testimonial widget allows you to showcase individual customer reviews and testimonials with professional styling. Perfect for displaying client feedback, user reviews, case studies, or any testimonial content with user photos, ratings, and detailed feedback information.

Live Demo : https://turbo-addons.com/single-testimonial/

How to Use the Single Testimonial Widget #

Step 1: Add the Widget

• Open a page in the Elementor Editor.
• Search for Single Testimonial.
• Drag and drop the widget into your desired section.

Step 2: Select Layout Style

• Go to Content tab → Testimonial.
• Select Layout
• Style 1 – Default testimonial layout with user image, rating, name, designation, title, and description.
• Currently supports Style 1 (more styles may be added in future updates).

Step 3: Configure User Information

Go to Content tab → User Info.

User Image

• Upload or select user profile image from media library.
• Supports all standard image formats (JPG, PNG, WebP).
• Automatically includes alt text for accessibility.
• Default placeholder image provided.

User Name

• Enter the testimonial author’s name (e.g., “Mr. John”, “Sarah Johnson”).
• Default text is “Mr. John”.
• Supports dynamic content.

Designation

• Enter the user’s job title or designation (e.g., “Digital Marketer”, “CEO”, “Customer”).
• Default text is “Digital Marketer”.
• Supports dynamic content.

Step 4: Configure Review Content

Go to Content tab → Review Content.

Feedback Title

• Enter a title for the testimonial (e.g., “Excellent Support!”, “Great Product”).
• Default text is “Excellent Support!”.
• Optional field that adds emphasis to the review.

Rating Choose star rating from dropdown:

• 1 to 5 stars – Full star ratings
• Half ratings – 1.5, 2.5, 3.5, 4.5 for more precise ratings
• None – Hide rating display
• Default rating is 4.5 stars.

Review Comment

• Enter the main testimonial text/feedback.
• Supports multi-line text for longer testimonials.
• Default text is “Powerful, versatile, feature-rich Elementor widget addon.”

Step 5: Configure Visibility Options

Go to Content tab → Show / Hide.

Rating

• Show – Display star rating (default).
• Hide – Hide star rating completely.
• Useful when you want testimonials without ratings.

Step 6: Style the Container Box

Go to Style tab → Box.

Padding

• Control internal spacing for the entire testimonial container.

Gap

• Adjust spacing between user section and review content.

Text Alignment

• Left – Align all content to the left.
• Center – Center all content (default).
• Right – Align all content to the right.

Direction Choose layout flow:

• Row – User section and content side by side.
• Column – User section above content.
• Row Reverse – Content first, then user section.
• Column Reverse – Content above user section (default).

Justify Content (when using Row direction)

• Start – Align to beginning.
• Center – Center alignment.
• End – Align to end.
• Space Between – Distribute with space between.
• Space Around – Distribute with space around.

Align Items

• Start – Align items to start.
• Center – Center align items.
• End – Align items to end.
• Stretch – Stretch items to fill container.

Container Styling

• Border – Add borders with custom styles.
• Border Radius – Create rounded corners (default: 10px).
• Box Shadow – Add depth with shadow effects.
• Background – Set solid colors or gradients.

Step 7: Style the User Section

Go to Style tab → User Section.

Direction

• Row – Image and info side by side.
• Column – Image above info (default).

Align Items

• Start – Align to start.
• Center – Center alignment (default).
• End – Align to end.

Item Gap

• Control spacing between user image and user info.

User Image Styling

• Width – Adjust image size (default: 80px).
• Border – Add borders around image.
• Border Radius – Create rounded or circular images.
• Box Shadow – Add shadow effects to image.

User Name Styling

• Typography – Font family, size, weight, line height.
• Color – Set name text color.

User Designation Styling

• Typography – Font settings for designation text.
• Color – Set designation text color.

Step 8: Style the Review Section

Go to Style tab → Review Section.

Item Gap

• Control spacing between review title, rating, and description.

Review Title Styling

• Typography – Font customization for review title.
• Color – Set title text color.

Description Styling

• Typography – Font settings for testimonial text.
• Color – Set description text color.

Step 9: Style the Rating

Go to Style tab → Rating (visible when rating is enabled).

Color

• Set star color (default: #E4B500 – golden yellow).

Applies to both filled and outlined stars.

Icon Size

• Adjust star size (10-100px, default: 18px).

Controls both font icons and SVG stars.

Step 10: Advanced Options

Use Elementor’s Advanced tab for:

• Margin & padding
• Responsive visibility
• Motion effects
• Custom CSS (optional)

Final Output #

The Single Testimonial widget creates a professional, credible testimonial display with user photos, star ratings, and detailed feedback—perfect for building trust and showcasing customer satisfaction.

Tips for Better Results #

• Use high-quality images for user photos to maintain professional appearance.
• Keep testimonials authentic and specific for better credibility.
• Vary rating scores to appear more genuine (not all 5-star reviews).
• Include job titles or company names for added credibility.
• Keep feedback concise but detailed enough to be meaningful.
• Use consistent styling across multiple testimonials for cohesive design.
• Test different layouts (row vs column) based on your content length.
• Consider mobile display when choosing direction and alignment options.