The Trust Wall is our most powerful widget for displaying a high volume of social proof. It uses a masonry grid layout, common in gallery designs, where testimonials stack vertically to fill gaps, creating a dense and visually engaging Trust Wall.
Layout & Responsive Control
The masonry grid automatically calculates the best height for each card based on its content length, ensuring no large gaps between rows.
Column Settings
You can fine-tune the density of your wall by setting custom column counts for different devices:
- Desktop: Typically 3 or 4 columns for a full-width experience.
- Tablet: 2 columns usually provide the best balance.
- Mobile: 1 column is recommended for readability on narrow screens.
Card Spacing
Adjust the Gap (spacing) between cards to achieve either a tight, dense look or a more airy, breathing design.
Visual Customization
Match the Trust Wall perfectly to your brand using the Appearance panel.
Themes & Color Sets
- Intelligent Themes: Choose between Light, Dark, or Auto. The Auto setting is highly recommended as it uses CSS media queries to detect the user's system preferences, ensuring your wall looks native to their browsing experience.
- Surface & Ink: You have full control over the Background Color and Text Color of the cards. For a sleek, modern look, you can enable Transparent Background, allowing the cards to adopt your website's primary background.
- Accent & Interaction: The Primary Color acts as your brand's signature within the widget, coloring the rating stars and key icons.
Precision Borders
The Trust Wall offers a robust border system to define the cards:
- Style Selection: Choose from multiple styles including Solid, Dashed, Dotted, and Double.
- Flexible Units: Define Border Radius and Thickness using various units (px, rem, em, or % for radius). This ensures your design scales correctly regardless of your site's base font size.
- Color Sync: Coordinate your Border Color independently from your text or background colors for subtle outlining or bold framing.
Spacing & Air
- Card Gap: Control the white space between testimonials. You can define this in px, rem, or em. A larger gap (e.g., 24px) creates an airy, high-end look, while a smaller gap (e.g., 12px) creates a high-density "collage" effect.
Advanced Custom CSS
For ultimate control, the Trust Wall supports a Custom CSS field. This allows developers to target specific widget classes (e.g., .vauch-wall-preview) to add custom animations, specialty font families, or advanced effects like backdrop-filter: blur().Themes & Colors
- Themes: Choose between Light, Dark, or Auto (which follows the visitor's system settings).
- Primary Color: Set the color for stars and highlight icons.
- Background & Text: Customize the card background and typography colors to blend into your site.
- Transparent Background: Enable this to let your website's background show through the widget.
Borders & Radius
- Border Radius: Control how rounded the card corners are (from sharp 0px to fully rounded).
- Border Style: Choose from Solid, Dashed, Dotted, or Double borders.
- Thickness: Adjust the weight of the border to match your site's aesthetic.
Content & Field Management
The Display panel gives you granular control over what information each testimonial card shows.
Global Toggles
Quickly turn on or off core elements:
- Ratings: Show or hide the star ratings.
- User Name & Avatar: Toggle the author's identity.
- Text Highlights: Show or hide highlighted portions of long feedback.
- Dates: Display when the testimonial was submitted.
Field Positioning & Labels
You can drag and drop fields to different sections of the card:
- Header: Top section, usually for names, logos, or companies.
- Content: The main body of the card.
- Footer: The bottom section, great for dates or contact info.
You can also toggle Labels (e.g., "Company:") for a cleaner or more informative look.
Use Case Examples
Here are a few ways you can configure the Display panel for different effects:
Example 1: The Minimalist Wall
Goal: Focus purely on the text.
- Toggles: Turn off Avatars, Ratings, and Dates.
- Labels: Toggle all labels Off.
- Result: A clean, typography-heavy wall where the words speak for themselves.
Example 2: The B2B Professional Wall
Goal: Maximize corporate credibility.
- Positioning: Move Company, Position, and Company Logo to the Header.
- Toggles: Turn on Ratings and Text Highlights.
- Result: Visitors immediately see the brand authority of the reviewer before reading the quote.
Example 3: The Detailed Proof Wall
Goal: Provide deep context for SaaS or high-ticket services.
- Custom Fields: Display custom fields like "Project Type" or "Feature Used" in the Footer.
- Labels: Toggle labels On to provide context for the custom data.
- Result: A highly informative card that explains exactly what was achieved.
Sorting & Filtering
Control which testimonials appear and in what order:
- Sort By: Newest, Oldest, or by Rating (High/Low).
- Manual Filter: Select specific testimonials to curate a perfect wall.
and also toggle Labels (e.g., "Company:") for a cleaner or more informative look.
Sorting & Filtering
Control which testimonials appear and in what order:
- Sort By: Newest, Oldest, or by Rating (High/Low).
Best Practices
- Mix Lengths: The masonry effect looks best when you have a mix of short and long testimonials.
- Enable Highlights: For long walls, use highlights to draw the eye to the most impactful parts of a review.
- Use "Auto" Theme: If your website has its own dark mode, setting the widget to Auto ensures a seamless transition for visitors.