Divi Testimonial Slider

Introduction

The Divi Testimonial Slider lets you display customer reviews and testimonials in beautiful, professional slide shows. Choose from 5 stunning card styles, add star ratings, customize colors, and make your social proof work harder for your business.

Key Features

• 5 professional card styles
• Star rating system (0-5 with half stars)
• Customer photos with adjustable sizing
• Quote icons with 3 style options
• Schema.org markup for SEO
• Fully responsive
• Multiple slider effects
• Easy Visual Builder integration

Getting Started

Step 1: Add the Module

1. Open Divi Visual Builder on your page
2. Click the + button to add a new module
3. Search for “Testimonial Slider“
4. Click to add it to your page

Step 2: Add Testimonial Items

1. The module will prompt you to add items
2. Click “Add New Testimonial Item“
3. You’ll see the testimonial item settings panel

That’s it! You’re ready to start adding testimonials.

Adding Testimonial Items

Each testimonial consists of several fields:

Content Tab

Basic Information

Full Name (Required)

• Enter the customer’s full name
• Example: “John Smith”

Testimonial/Review (Required)

• The actual testimonial text
• Supports rich text formatting
• Can include paragraphs, bold, italic, etc.
• Example: “This product exceeded my expectations! The quality is outstanding and customer service was excellent.”

Company Name (Optional)

• Customer’s company or title
• Example: “Marketing Manager, ABC Corp”

Image (Optional)

• Upload a photo of the customer
• Recommended size: 200x200px
• Square images work best
• Click “Upload” and select from media library

Image Size

• Adjust the display size: 50px – 200px
• Default: 100px
• Responsive controls available

Star Rating (Optional)

• Set rating from 0 to 5 stars
• Supports half stars (e.g., 4.5)
• Set to 0 to hide rating
• Example: 5 stars = 5, Four and a half stars = 4.5

Website URL (Optional)

• Makes the name/company clickable
• Opens in new tab
• Example: “https://www.customerwebsite.com“

Title (Optional)

• Additional title field
• Used in Split Layout card style
• Example: “Game-Changing Results!”

Card Style Tab

Card Style
Choose from 5 professional designs:

1. Modern Card (Default)
   • Clean, centered design
   • Image at top, centered
   • Name, company, rating in middle
   • Review text at bottom
   • Perfect for: Modern websites, portfolios
2. Classic Bubble
   • Traditional speech bubble style
   • Rating at top
   • Review text in middle
   • Author info at bottom with image on right
   • Perfect for: Blogs, traditional sites
3. Side by Side
   • Horizontal layout
   • Image and info on left
   • Review text on right
   • Professional appearance
   • Perfect for: Corporate sites, agencies
4. Split Layout
   • Two-part design
   • Header section: image, name, company, rating
   • Content section: optional title + review
   • Great visual separation
   • Perfect for: Magazine-style layouts, feature testimonials
5. Compact
   • Space-efficient layout
   • Rating and review at top
   • Author section at bottom
   • Maximizes content density
   • Perfect for: Testimonial walls, many reviews

Show Quote Icon

• Yes: Display a decorative quote icon
• No: Hide the quote icon
• Default: Yes

Quote Icon Style (if enabled)

• Default: Classic quote marks
• Modern: Sleek, minimal design
• Simple: Basic quote mark

Slider Settings

General Tab → Slider Settings

Layout Options

Columns

• Desktop: 1-12 columns
• Tablet: 1-12 columns (can be different)
• Phone: 1-12 columns (can be different)
• Recommended: 3 columns desktop, 2 tablet, 1 phone

Space Between

• Gap between slides
• Range: 0-100px
• Default: 20px
• Responsive controls available
• Tip: Less space = more compact, More space = breathable

Equal Card Height

• Yes: All testimonial cards same height
• No: Cards auto-adjust to content
• Useful when testimonials vary in length

Slider Behavior

Slider Type

• Normal: Standard carousel with navigation
• Marquee: Auto-scrolling continuous loop
• AutoWidth: Slides use their natural width
• Centered: Active slide centered

Infinite Loop

• Yes: Carousel loops continuously
• No: Stops at last slide
• Recommended: Yes for better UX

Auto Play

• Yes: Slides automatically advance
• No: Manual navigation only
• Recommended: Yes for testimonials

Auto Play Delay

• Time between slides (milliseconds)
• Range: 1000-10000ms
• Default: 3000ms (3 seconds)
• Tip: 3-5 seconds is optimal for testimonials

Pause on Hover

• Yes: Auto-play pauses when hovering
• No: Continues playing
• Recommended: Yes for better user control

Speed

• Transition speed (milliseconds)
• Range: 100-3000ms
• Default: 300ms
• Tip: 300-500ms feels smooth

Advanced Slider Options

Slider Effect
Choose transition effect:

• Slide: Standard horizontal slide (default)
• Fade: Smooth fade transition
• Cube: 3D cube rotation
• Coverflow: 3D coverflow effect
• Flip: Card flip effect
• Cards: Stack of cards
• Creative: Custom creative transitions

Slider Orientation

• Horizontal: Left-to-right sliding
• Vertical: Up-down sliding

Slider Direction

• LTR: Left to right (default)
• RTL: Right to left (for RTL languages)

Adaptive Height

• Yes: Slider height adapts to active slide
• No: Fixed height based on tallest slide
• Useful when content varies significantly

Design Options

Advanced Tab → Style

Rating Settings

Rating Alignment

• Left: Stars align left
• Center: Stars centered
• Right: Stars align right
• Default: Left

Filled Star Color

• Color for full and half stars
• Default: #FFA41C (orange)
• Tip: Match your brand color

Empty Star Color

• Color for unfilled stars
• Default: #DDD (light gray)
• Tip: Keep subtle for better contrast

Image Settings

Image Alignment

• Left: Images align left
• Center: Images centered
• Right: Images align right
• Varies by card style

Advanced Tab → Card

Card Styling

Background Color

• Card background color
• Default: #FFFFFF (white)
• Supports transparency
• Tip: Light colors work best

Padding

• Space inside the card
• Default: 25px all sides
• Responsive controls available
• Format: Top | Right | Bottom | Left
• Example: 30px|25px|30px|25px

Content Alignment

• Stretch: Fill height equally
• Top: Align content to top
• Center: Center content vertically
• Bottom: Align content to bottom
• Affects vertical spacing within card

Card Border

• Width, style, color
• Border radius for rounded corners
• Tip: 10-15px radius looks modern

Card Box Shadow

• Adds depth to cards
• Presets available or custom
• Tip: Subtle shadows look professional

Advanced Tab → Text

Testimonial Text

• Font family, weight, style
• Font size (default: 16px)
• Line height (default: 1.6em)
• Color and alignment
• Full Divi typography controls

Advanced Tab → Author

Name Typography

• Font controls for author name
• Font size (default: 18px)
• Line height (default: 1.3em)
• Bold recommended for visibility

Company/Title Typography

• Font controls for company/title
• Font size (default: 14px)
• Line height (default: 1.4em)
• Can use different color for distinction

Advanced Tab → Image

Image Border

• Separate border controls for images
• Border radius for circle effect
• Example: 50% border radius = circle
• Border width, style, color

Advanced Tab → Navigation

Enable Navigation

• Yes: Show prev/next arrows
• No: Hide navigation
• Default: Off

Navigation Position

• Top, Middle, Bottom
• Inside or outside slider

Navigation Colors

• Arrow color
• Background color
• Hover effects

Advanced Tab → Pagination

Enable Pagination

• Yes: Show dot indicators
• No: Hide pagination
• Default: Off

Pagination Type

• Bullets: Circular dots
• Fraction: “1 / 5” format
• Progress: Progress bar

Pagination Colors

• Active color
• Inactive color
• Customizable

SEO Settings

Advanced Tab → SEO

Enable Schema.org Markup

• Yes: Add structured data
• No: Skip schema markup
• Default: Off

What is Schema Markup?

Schema markup is code that helps search engines understand your testimonials. When enabled:

✅ Reviews can appear with stars in Google search results
✅ Better local SEO performance
✅ Rich snippets in SERPs
✅ Increased click-through rates

What Data is Included?

When schema is enabled, the slider automatically includes:

• Review text
• Star rating (if provided)
• Reviewer name
• Company/organization
• Website URL (if provided)
• Reviewer image
• Aggregate rating (calculated from all testimonials)

When to Enable Schema?

Enable when:

• You want reviews in search results
• Testimonials are for your business/products
• Content is genuine and accurate

Don’t enable when:

• Testimonials are for display purposes only
• Content is not actual reviews
• Using placeholder or sample content

Best Practices

Content Guidelines

Writing Great Testimonials

Do:

• ✅ Use real customer testimonials
• ✅ Include full names (with permission)
• ✅ Add company names for B2B
• ✅ Include photos when possible
• ✅ Show star ratings
• ✅ Keep testimonials authentic
• ✅ Update regularly with new reviews

Don’t:

• ❌ Use fake testimonials
• ❌ Make testimonials too long (aim for 2-3 sentences)
• ❌ Use stock photos
• ❌ All 5-star reviews (less believable)
• ❌ Generic praise without specifics

Optimal Testimonial Length

• Short testimonials: 50-100 words (1-2 sentences)
  • Best for: Compact card style, many testimonials
• Medium testimonials: 100-200 words (2-4 sentences)
  • Best for: Modern card, classic bubble styles
  • Recommended for most uses
• Long testimonials: 200+ words (4+ sentences)
  • Best for: Split layout, featured testimonials
  • Use sparingly

Design Best Practices

Color Selection

Card Background:

• White (#FFFFFF) – Clean, professional
• Light gray (#F7F7F7) – Subtle, modern
• Brand color (10% opacity) – Branded look

Text Color:

• Dark gray (#333333) – Easy to read
• Black (#000000) – High contrast
• Avoid pure white text on photos

Accent Colors:

• Use for ratings, borders, hover states
• Match your brand colors
• Keep consistent across cards

Spacing Guidelines

Padding:

• Minimum: 20px (feels cramped)
• Recommended: 25-30px (comfortable)
• Maximum: 40px (very spacious)

Spacing Between Slides:

• Tight: 10-15px
• Normal: 20-30px (recommended)
• Loose: 40-50px

Margin:

• Add margin around the slider module
• Prevents content from feeling cramped
• 30-50px top/bottom recommended

Image Guidelines

Size:

• Minimum: 800x800px (for retina displays)
• Recommended: 1000x1000px
• Format: JPG or PNG

Style:

• Square images work universally
• Circular images (use border radius)
• Professional headshots preferred
• Consistent style across all testimonials

Optimization:

• Compress images before uploading
• Use WebP format when possible
• Keep file size under 200KB

Layout Recommendations

Number of Columns

Desktop:

• 1 column: Featured testimonials, long content
• 2 columns: Balanced, good for detailed reviews
• 3 columns: Popular choice, works for most sites
• 4+ columns: Compact cards, many short testimonials

Tablet:

• Usually 2 columns
• Good compromise between desktop and mobile

Mobile:

• Always 1 column for best readability
• Ensures testimonials are readable on small screens

Card Style Selection

Choose based on content:

• Lots of short testimonials: Compact style
• Professional/corporate site: Side by Side
• Modern/creative site: Modern Card
• Traditional/blog: Classic Bubble
• Feature testimonials: Split Layout

Choose based on images:

• No images: Any style works, Compact is efficient
• With images: Modern Card or Side by Side showcase them best
• Circular images: Modern Card looks great

---

Common Workflows

Workflow 1: Basic Testimonial Slider

Perfect for getting started quickly.

1. Add Testimonial Slider module
2. Add 3-6 testimonial items
3. For each item:
   • Add name
   • Add testimonial text (2-3 sentences)
   • Add company
   • Add 5-star rating
   • Upload photo
4. Settings:
   • Card style: Modern Card
   • Columns: 3 desktop, 2 tablet, 1 phone
   • Space between: 20px
   • Auto play: Yes
   • Delay: 4000ms
5. Design:
   • Keep default colors
   • Card shadow: Subtle preset
   • Border radius: 10px

Time to complete: 10-15 minutes

Workflow 2: E-commerce Product Reviews

Perfect for product pages.

1. Add the Testimonial Slider module to the product page
2. Add 5-10 testimonial items (mix of ratings)
3. For each item:
   • Use an actual customer review
   • Star rating (mix 4-5 stars)
   • Customer first name only
   • No company needed
   • Optional photo
4. Settings:
   • Card style: Compact
   • Columns: 4 desktop, three tablet, one phone
   • Space between: 15px
   • Auto play: Yes
   • Delay: 3000ms
   • Equal height: Yes
5. SEO:
   • Enable Schema markup: Yes
6. Design:
   • Light background: #F9F9F9
   • Rating color: Match brand
   • Compact padding: 20px

Time to complete: 20-30 minutes

Workflow 3: Agency Portfolio

Perfect for service businesses.

1. Add Testimonial Slider module to home page
2. Add 6-8 client testimonials
3. For each item:
   • Client name
   • Detailed testimonial (3-5 sentences)
   • Company name with URL
   • Professional headshot required
   • 5-star ratings
4. Settings:
   • Card style: Split Layout
   • Columns: 2 desktop, 1 tablet, 1 phone
   • Space between: 30px
   • Auto play: Yes
   • Delay: 6000ms (longer for more content)
   • Slider effect: Fade
5. Design:
   • White background
   • Bold name font
   • Card shadow: Medium
   • Border radius: 15px
6. SEO:
   • Enable Schema markup: Yes

Time to complete: 30-45 minutes

Troubleshooting

Common Issues & Solutions

Issue: Testimonials Not Showing

Problem: Module is empty or shows placeholder text

Solutions:

1. Check that you’ve added testimonial items
2. Click “Add New Testimonial Item” to add content
3. Ensure testimonial items have content (not just empty)
4. Save and refresh the Visual Builder

Issue: Images Not Displaying

Problem: Customer images don’t appear

Solutions:

1. Verify image was uploaded successfully
2. Check if image URL is valid
3. Try re-uploading the image
4. Check file size (keep under 2MB)
5. Ensure correct image format (JPG, PNG, WebP)

Issue: Stars Not Showing

Problem: Rating stars don’t appear

Solutions:

1. Check rating value is greater than 0
2. Rating of 0 hides stars (by design)
3. Verify rating color isn’t same as background
4. Check if custom CSS is hiding stars

Issue: Slider Not Sliding

Problem: Carousel doesn’t move/animate

Solutions:

1. Check if you have multiple testimonial items (need at least 2)
2. Verify infinite loop setting
3. Check if autoplay is enabled (if expecting auto-advance)
4. Clear browser cache
5. Check for JavaScript errors in console
6. Ensure no conflicting plugins

Issue: Layout Looks Broken on Mobile

Problem: Testimonials don’t display correctly on mobile

Solutions:

1. Set mobile columns to 1
2. Adjust mobile spacing
3. Check responsive padding settings
4. Test on actual mobile device (not just browser)
5. Clear mobile cache

Issue: Text Overlapping

Problem: Content overlaps or gets cut off

Solutions:

1. Increase card padding
2. Use equal height cards
3. Reduce font sizes for longer content
4. Check line height settings
5. Adjust card min-height with custom CSS

Issue: Stars Wrong Color

Problem: Can’t see stars or wrong colors

Solutions:

1. Check filled star color setting
2. Check empty star color setting
3. Ensure sufficient contrast
4. Default colors: Filled #FFA41C, Empty #DDD
5. Avoid transparent colors

Issue: Schema Errors in Google

Problem: Google Search Console shows schema errors

Solutions:

1. Ensure names are filled in
2. Verify website URLs are valid
3. Check that rating values are 0-5
4. Don’t use placeholder content
5. Test with the Google Rich Results Test tool
6. Ensure only one schema per testimonial

Issue: Cards of Different Heights

Problem: Testimonial cards are uneven heights

Solutions:

1. Enable the “Equal Card Height” setting
2. This forces all cards to match the tallest card
3. Alternative: Keep content lengths similar
4. Use the same card style for all items

Issue: Slow Performance

Problem: Slider is laggy or slow

Solutions:

1. Optimize images (compress before upload)
2. Reduce the number of visible slides
3. Disable autoplay if not needed
4. Use a simpler slider effect (slide instead of 3D effects)
5. Check for plugin conflicts
6. Enable lazy loading

Issue: Navigation Not Visible

Problem: Can’t see prev/next arrows

Solutions:

1. Verify navigation is enabled
2. Check navigation color (might match background)
3. Increase navigation size
4. Try a different navigation position
5. Check if custom CSS is hiding navigation

Issue: URL Links Not Working

Problem: Name/company links don’t work

Solutions:

1. Verify URL starts with http:// or https://
2. Check that the URL is properly formatted
3. Ensure the “Website URL” field has content
4. Clear browser cache
5. Test in a different browser

Keyboard Shortcuts

When editing in Visual Builder:

• Cmd/Ctrl + S: Save changes
• Cmd/Ctrl + Z: Undo
• Cmd/Ctrl + Shift + Z: Redo
• Esc: Close settings panel
• Tab: Navigate between fields
• Enter: Expand dropdown/select option

Tips & Tricks

Pro Tips

1. Mix star ratings: Don’t use all 5-stars (looks fake). Include some 4-4.5 star reviews for authenticity.
2. Strategic placement: Put testimonials near calls-to-action for maximum conversion impact.
3. Update regularly: Rotate in new testimonials monthly to keep content fresh.
4. Featured testimonials: Use Split Layout for particularly impressive testimonials.
5. Mobile optimization: Always preview on actual mobile devices before publishing.
6. A/B testing: Try different card styles to see which converts better for your audience.
7. Video testimonials: Combine with video slider module for multimedia social proof.
8. Quantity matters: Show 6-10 testimonials minimum for strong social proof.
9. Specific details: Encourage testimonials that mention specific benefits or features.
10. Call out objections: Use testimonials that address common buyer concerns.

Advanced Customization

Custom CSS Selectors:

/* Testimonial card */
.dsp-testimonial-card { }

/* Testimonial text */
.dsp-testimonial-text { }

/* Author name */
.dsp-testimonial-name { }

/* Company */
.dsp-testimonial-company { }

/* Rating container */
.dsp-testimonial-rating { }

/* Individual star */
.dsp-testimonial-rating .star { }

/* Full star */
.dsp-testimonial-rating .star.star-full { }

/* Half star */
.dsp-testimonial-rating .star.star-half { }

/* Empty star */
.dsp-testimonial-rating .star.star-empty { }

/* Image */
.dsp-testimonial-image { }

/* Quote icon */
.dsp-testimonial-quote-icon { }

Example Custom CSS:

/* Circular images */
.dsp-testimonial-image {
    border-radius: 50% !important;
}

/* Larger rating stars */
.dsp-testimonial-rating .star {
    font-size: 20px !important;
}

/* Card hover effect */
.dsp-testimonial-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}