Testimonials Block

The Testimonials Block is a versatile and powerful component designed to showcase customer reviews, client feedback, and social proof on your WordPress site. This block enables you to create compelling testimonial sections with multiple layout options, comprehensive styling controls, and built-in features like star ratings and quote icons to enhance credibility and user engagement.

Key Features

The Testimonials Block includes a comprehensive set of features to create professional testimonial sections:

Grid Layout System: Display testimonials in responsive columns (1-5 columns)
Individual Testimonial Management: Add, remove, duplicate, and reorder testimonial items
Author Information: Include names, positions, company details, and profile images
Star Rating System: Optional 5-star rating display with custom colors
Quote Icons: Decorative quote symbols with size and color controls
Rich Text Editing: Full text formatting for testimonial content
Typography Controls: Independent styling for content, names, and positions
Color States: Normal and hover color options for interactive elements
Alignment Options: Left, center, or right alignment for content
Border & Shadow Effects: Comprehensive border styles and box shadow controls
Animation Effects: Choose from various entrance animations
Responsive Design: Device-specific controls for optimal display
Visibility Controls: Hide blocks on specific devices when needed

Adding the Testimonials Block

To add a Testimonials Block to your page:

Click the “+” icon to open the block inserter
Search for “Testimonials” or navigate to the “DigiBlocks” category
Click on the “Testimonials” block to add it to your page
The block will appear with a default testimonial item ready for customization

Managing Testimonials

Adding New Testimonials

Click the “Add Testimonial” button at the bottom of the block to create new testimonial items. Each testimonial includes:

Author Image: Upload or select images from your media library
Name Field: Add the customer or client name with rich text formatting
Position/Company: Include job titles and company information
Testimonial Content: Full rich text area supporting bold, italic, and links
Star Rating: Optional 5-star rating system (when enabled)

Editing Testimonial Content

Author Information:

Click on the name field to edit inline with rich text formatting
Edit position and company information in a single field using comma separation
Upload custom profile images or use placeholder avatars

Testimonial Text:

Click on the content area to edit with full rich text capabilities
Add formatting, links, and emphasis to highlight key points
Content automatically adapts to your chosen layout and alignment

Item Management Controls

Each testimonial includes hover controls for easy organization:

Move Up/Down: Reorder testimonials by moving them up or down in the sequence
Duplicate: Create copies of existing testimonials to save time with similar content
Remove: Delete unwanted testimonials with a single click

The controls appear when hovering over individual testimonial items in the editor.

Layout Configuration

Grid Layout

Configure how testimonials display across your page:

Columns: Set responsive column counts (1-5 columns) for different devices:

Desktop: Control layout for screens 992px and wider
Tablet: Customize display for 768px to 991px screens
Mobile: Optimize for screens 767px and below

Item Spacing: Adjust the gap between testimonial items with responsive controls, ranging from 0-100px with 5px increments.

Alignment: Choose content alignment for all testimonial elements:

Left: Standard left-aligned layout with images on the left
Center: Centered layout with stacked author information
Right: Right-aligned layout with reversed author information order

Display Options

Show Ratings: Enable or disable the 5-star rating system for all testimonials. When enabled, ratings appear above the testimonial content and can be individually set for each item.

Show Quote Icon: Toggle decorative quote icons that appear as background elements. Quote icons add visual interest and reinforce the testimonial nature of the content.

Styling Options

Color Controls

The block provides comprehensive color customization with normal and hover states:

Normal State Colors:

Name Color: Set the color for customer/client names
Position Color: Style job titles and company information
Content Color: Control testimonial text color
Background Color: Define background colors for testimonial containers
Quote Icon Color: Customize decorative quote symbol colors
Rating Color: Set the color for filled star ratings

Hover State Colors:

Name Color: Color when users hover over testimonial items
Background Color: Background color change on hover for interactive feedback

All color controls support alpha transparency for advanced design flexibility.

Typography Settings

Independent typography controls allow complete design customization:

Content Typography: Style the main testimonial text with:

Font Family selection from available fonts
Responsive font sizes (desktop: 16px, tablet: 15px, mobile: 14px defaults)
Font weight options (light, normal, bold, etc.)
Font style (normal, italic)
Text transform (uppercase, lowercase, capitalize)
Text decoration (underline, none)
Responsive line height (1.7em, 1.6em, 1.5em defaults)
Letter spacing controls

Name Typography: Control customer name styling with:

Independent font family selection
Responsive sizing (desktop: 20px, tablet: 18px, mobile: 16px defaults)
Weight and style options
Line height settings (1.3em default across devices)

Position Typography: Style job titles and company information:

Separate font controls from names and content
Smaller default sizes (desktop: 14px, tablet: 13px, mobile: 12px)
Line height optimization (1.4em default)

Size Controls

Image Size: Set responsive sizes for author profile images ranging from 32px to 200px in 4px increments. Images automatically maintain circular cropping and proper aspect ratios.

Quote Icon Size: Control decorative quote icon dimensions from 20px to 200px in 5px increments. Icons scale proportionally while maintaining visual balance.

Border and Shadow Options

Border Styling

Configure borders when desired visual separation is needed:

Border Style Options:

Default: No custom border styling
None: Explicitly remove all borders
Solid: Standard solid borders
Dotted: Dotted line borders
Dashed: Dashed line borders
Double: Double line borders
Groove: 3D grooved borders
Inset: Inset effect borders
Outset: Outset effect borders
Ridge: 3D ridged borders

Border Controls (when style is selected):

Border Color: Set border colors with alpha transparency support
Border Width: Responsive width controls for all sides independently
Border Radius: Create rounded corners with responsive controls supporting both pixels and percentages

Box Shadow Effects

Add depth and visual interest with comprehensive shadow controls:

Normal Shadow: Configure shadows for the default state including:

Position (inset or outset)
Horizontal and vertical offsets
Blur radius for soft or sharp shadows
Spread radius for shadow size
Color selection with transparency

Hover Shadow: Create different shadow effects on hover for interactive feedback, using the same comprehensive controls as normal shadows.

Spacing Controls

Responsive Spacing

Padding: Control internal spacing within testimonial containers:

Independent top, right, bottom, left controls
Responsive settings for all devices
Unit selection (px, em, rem, %)

Margin: Manage external spacing around testimonial items:

Four-directional control (top, right, bottom, left)
Device-specific responsive settings
Multiple unit options for design flexibility

Advanced Features

Animation Effects

Add entrance animations to make testimonials more engaging:

Available Animation Types:

Fade Effects: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
Slide Effects: slideInUp, slideInDown, slideInLeft, slideInRight
Zoom Effects: zoomIn, zoomInUp, zoomInDown
Bounce Effects: bounceIn, bounceInUp, bounceInDown
Rotation Effects: rotateIn, rotateInDownLeft, rotateInDownRight

Animation Preview: Use the preview button in the editor to test animations before publishing, ensuring they work well with your content and design.

Visibility Controls

Control testimonial display across different devices:

Device-Specific Hiding:

Hide on Desktop: Hide testimonials on screens 992px and wider
Hide on Tablet: Hide on tablet screens (768px to 991px)
Hide on Mobile: Hide on mobile screens (767px and below)

Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.

HTML and CSS Customization

HTML Anchor: Create unique anchor links for direct linking to testimonial sections. Enter a unique identifier to enable page jumps and direct section linking.

Additional CSS Classes: Add custom CSS classes for advanced styling or theme integration. Separate multiple classes with spaces for complex customizations.

Content Management Best Practices

Writing Effective Testimonials

Content Guidelines:

Keep testimonials authentic and specific rather than generic
Include concrete details about results or experiences
Maintain consistent tone across all testimonials
Use varying lengths to create visual interest

Author Information:

Include full names and job titles for credibility
Add company names for B2B testimonials
Use high-quality, professional profile images
Maintain consistent image sizing across all testimonials

Organization Strategies

Testimonial Ordering:

Place strongest testimonials first to create immediate impact
Mix different types of customers or use cases
Consider alternating longer and shorter testimonials
Group related testimonials when using multiple columns

Rating Usage:

Be consistent with rating scales across all testimonials
Only use ratings when they add meaningful value
Consider hiding ratings if not all testimonials have them
Ensure rating colors maintain sufficient contrast

Design Considerations

Layout Planning

Column Selection:

Use single columns for detailed, longer testimonials
Choose 2-3 columns for balanced layouts on most sites
Consider 4-5 columns only for shorter testimonials or wider layouts
Test responsiveness across all target devices

Spacing Optimization:

Maintain consistent spacing between testimonial items
Balance white space with content density
Consider reading flow when setting alignment
Test spacing on mobile devices for readability

Color Strategy

Brand Consistency:

Use brand colors for accent elements like ratings and quotes
Maintain sufficient contrast ratios for accessibility
Consider hover effects that enhance rather than distract
Test color combinations in both light and dark contexts

Visual Hierarchy:

Make names prominent with appropriate typography
Use subtle colors for position/company information
Ensure testimonial content remains highly readable
Balance decorative elements with content importance

Performance Optimization

Image Management

Profile Images:

Optimize images before uploading to reduce file sizes
Use consistent aspect ratios for visual harmony
Consider webp format for better compression
Implement lazy loading for testimonials below the fold

Asset Loading:

Test page load times with multiple testimonials
Monitor cumulative layout shift (CLS) scores
Consider pagination for very large testimonial collections
Optimize animations for smooth performance

Responsive Performance

Device Testing:

Test layout breaking points across device sizes
Verify touch targets meet minimum size requirements
Ensure text remains readable at all screen sizes
Check animation performance on mobile devices

The Testimonials Block provides a comprehensive solution for showcasing social proof while maintaining design flexibility, performance optimization, and user experience across all devices and contexts.