Adding Testimonials

What You'll Build

An engaging testimonial slider that displays customer quotes with company logos in an animated carousel. The slider features smooth fade/scale transitions and can auto-advance through testimonials.

Before You Start

• Gather 4-10 customer testimonials
• Collect company logos from your clients (optional but recommended)
• Get approval to use quotes and company names
• Prepare testimonial text (keep quotes concise and impactful)

Step-by-Step Instructions

Step 1: Add the VN Testimonials Slider Module

1. In the page editor, click the Add button in your desired section
2. Search for VN Testimonials Slider
3. Click to add it to your page

What you'll see: A slider with 4 default sample testimonials.

Step 2: Edit Your First Testimonial

1. Click on the first testimonial in the Testimonials list
2. Upload a Company Logo:
   • Click the image field
   • Upload or select the company's logo
   • Add alt text for accessibility
3. Enter the Testimonial Text:
   • Use the rich text editor
   • Include quotation marks for style
   • Keep quotes to 2-4 sentences for readability
4. Add the Company Title:
   • Enter the company or person's name
   • This appears below the quote

What you'll see: Your first testimonial with logo, quote, and attribution.

Step 3: Add More Testimonials

1. Click the + Add button below the testimonial list
2. Repeat Step 2 for each new testimonial
3. You must have at least 4 testimonials (minimum required)
4. You can add up to 10 testimonials maximum
5. Drag to reorder testimonials as needed

What you'll see: Multiple testimonials cycling in the slider.

Step 4: Remove Sample Testimonials

To replace the default sample content:

1. Click on a sample testimonial
2. Either edit the content directly, or
3. Click the Delete icon to remove it
4. Remember: You must keep at least 4 testimonials

What you'll see: Only your actual customer testimonials remain.

Step 5: Configure Slider Behavior

1. Open the Slider Settings group
2. Expand Slider Options to access controls:

Transition Speed:

• Set how fast slides transition (100-3000 ms)
• Default: 800ms (recommended)

Autoplay:

• Toggle ON to auto-advance slides
• Set Autoplay Speed (3-30 seconds between slides)
• Default: 8 seconds

Loop Slides:

• Toggle ON to cycle continuously
• Recommended: ON for seamless experience

Show Navigation Arrows:

• Toggle ON to display orange chevron arrows
• Visitors can click to navigate manually

Show Dot Indicators:

• Toggle ON to display white dot pagination
• Shows which slide is currently active

What you'll see: Slider behaving according to your settings.

Common Settings

Setting	What It Does	Recommended Value
Transition Speed	How fast slides animate	800ms (default)
Autoplay	Auto-advance through slides	ON
Autoplay Speed	Time between auto-advances	8 seconds
Loop Slides	Return to first after last	ON
Show Navigation Arrows	Display prev/next arrows	ON
Show Dot Indicators	Display pagination dots	ON

Company Logo Guidelines

Specification	Recommendation
Format	PNG with transparent background
Size	200-300px wide, consistent height
Color	Grayscale or muted colors work best
Orientation	Horizontal logos preferred

Tips and Best Practices

• Use testimonials from recognizable companies when possible
• Keep quote text under 50 words for best readability
• Include specific results or numbers when available ("increased conversions by 40%")
• Use consistent logo sizing and styling across all testimonials
• Test autoplay speed - too fast can be annoying, too slow loses engagement
• Ensure contrast between text and your section background

Writing Effective Testimonials

Good testimonial example:

"Working with this team transformed our social presence. We saw a 150% increase in engagement within 3 months."

Avoid:

"Great company, really nice people, would recommend."

The first example includes specific results and timeframes, making it more credible and compelling.

Troubleshooting

Problem: Slider is not advancing automatically. Solution: Check that Autoplay is toggled ON in Slider Options.

Problem: Company logo looks stretched or distorted. Solution: Use logos with consistent aspect ratios. Horizontal logos work best. Re-upload with proper dimensions.

Problem: Cannot add more testimonials. Solution: You have reached the maximum of 10. Remove less impactful ones to make room.

Problem: Cannot delete a testimonial. Solution: You must have at least 4 testimonials. Add a new one before deleting others.

Problem: Navigation arrows are not visible. Solution: Check that "Show Navigation Arrows" is toggled ON. Also verify arrows are not blending with your background color.

Problem: Slider animation looks choppy. Solution: Try increasing the Transition Speed to 1000ms or higher for smoother transitions.

Problem: Testimonials are hard to read. Solution: Check that your section background provides enough contrast. Consider shortening testimonial text.