---
title: "Divi Testimonial Slider"
url: "https://divipeople.com/docs/divi-testimonial-slider-doc.md"
canonical: "https://divipeople.com/docs/divi-testimonial-slider-doc/"
published: "2025-11-10"
modified: "2025-12-09"
author: "Fahim Reza"
tags:
  - "Divi Carousel Pro"
---

# Divi Testimonial Slider

## Introduction

The Divi **[Testimonial Slider](https://divipeople.com/divi-slider-pro/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](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;
}
```

##