How To Create Testimonial Grid Using Divi Theme

The Divi Testimonial Grid Module allows you to display a list of testimonials in a clean grid format, complete with customer photos, quotes, star ratings, and company details.

It is ideal for displaying multiple client reviews in an organized layout, making it effortless for potential customers to build trust in your products or services.

The grid is fully customizable—you can adjust colors, typography, spacing, and layout order to match your brand’s unique design.

We offer a 7-day FREE trial along with pre-made, ready-to-use layouts.

Pre-Requisites

• A WordPress Website
• Divi Theme
• Divi Testimonial Plus Plugin

Testimonial Management - Add & Edit

1. We use the Site Reviews Plugin to manage customer testimonials.

2. Testimonial Management refers to the simple process of adding, editing, and organizing customer reviews in your WordPress dashboard.

3. It involves collecting feedback from customers, reviewing ratings, and formatting testimonials for display on your site.

4. For step-by-step instructions, refer to How To Manage Testimonials In Your WordPress Website.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add “Testimonial Grid Divi Module” On A Page

1. Once you have saved customer testimonials in your WordPress admin panel, you can display them anywhere on your site.

2. To showcase testimonials in a responsive grid layout:

   • Open or edit a page in the Divi Visual Builder.
   • Inside a Divi row, click the plus icon to Add New Module.
   • Search for Testimonial Grid, then click to add the Divi module.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Testimonial Filter Settings (Content Tab) - Divi Testimonial Grid

1. Filtering testimonials allows you to display specific, highly relevant reviews on targeted pages rather than showing every review at once.

2. To set up testimonial filtering:

   • In the Testimonial Grid Divi module, go to the Content tab.
   • Click on Testimonials Filter. Available options include:
     • Fetch Testimonials From - Choose which page reviews are pulled from:
       • Current Page - Displays testimonials specifically linked to the page currently being viewed.
       • Custom Pages - Displays testimonials linked to one or more selected pages.
         • Custom Page IDs - Enter comma-separated page IDs for your selected pages.
       • Filter By Categories - Toggle YES to display testimonials assigned to specific categories.
         • Categories - Select one or more category checkboxes.
       • Assigned Users - Limit testimonials to those linked to specific user accounts (enter comma-separated user IDs).
       • Minimum Star Rating - Filter testimonials so only reviews meeting a minimum rating (e.g., 4 or 5 stars) are displayed.
       • Number of Reviews To Display - Set the maximum number of testimonials to show in the grid.
       • Skip Testimonials - Offset - Skip a specified number of initial testimonials (not recommended when pagination is enabled).
       • Enable Pagination - Toggle YES to enable multi-page navigation for large sets of testimonials:
         • Pagination Content Load Method - Choose how new pages of testimonials load:
           • Ajax - Loads new testimonials instantly without refreshing the webpage.
           • Page Reload - Refreshes the webpage when navigating between testimonial pages.
           • Load More - Appends additional testimonials seamlessly when visitors click a Load More button.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Content Toggles Settings (Content Tab) - Divi Testimonial Grid

1. Each testimonial entry can display key details, including:

   • Title
   • Quote Content
   • Author Photo / Avatar
   • Author Name & Company
   • Assigned Page Links
   • Publication Date
   • Star Rating
   • Owner Response

2. You can easily choose which details to show or hide:

   • In the Testimonial Grid Divi module, go to the Content tab.
   • Click on Content Toggle.
   • Use the YES/NO toggle switches to show or hide any testimonial element.
   • Fallback Text - Enter a custom message to display if no testimonials match your filter criteria.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

SEO Schema Settings (Content Tab) - Divi Testimonial Grid

1. Our plugin includes built-in Review Schema, which automatically formats your customer reviews and star ratings into structured data. This helps search engines like Google display eye-catching review star snippets directly in search results.

2. To enable Google Review Schema:

   • In the Testimonial Grid Divi module, go to the Content tab.
   • Click on SEO Schema.
   • Set Include SEO Schema? to YES.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Testimonials Settings (Design Tab) - Divi Testimonial Grid

1. To customize the overall grid layout and outer container styling:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on the Testimonials toggle:
     • Margin - Adjust outer spacing around the grid container.
     • Padding - Adjust inner spacing within the grid container.
     • Columns - Set how many testimonial cards appear side-by-side (with responsive controls for Desktop, Tablet, and Mobile).
     • Row & Column Gap - Adjust the spacing between individual rows and columns in the grid.
     • Rounded Corners - Set corner curvature for the main container.
     • Border Styles - Configure custom borders individually for top, right, bottom, and left edges.
     • Border Width - Adjust border thickness.
     • Border Color - Choose a custom border color.
     • Border Style - Choose solid, dashed, or dotted border styles.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Testimonial Settings (Design Tab) - Divi Testimonial Grid

1. To style individual testimonial cards:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on the Testimonials toggle:
     • Margin - Set spacing around each testimonial card.
     • Padding - Set internal padding inside each card.
     • Layout - Choose how items inside each card are arranged:
       • Flexbox Column - Stacks elements neatly in a flexible vertical list.
       • Grid - Arranges internal elements using an advanced grid arrangement.
     • Background - Apply background colors, gradients, or custom images to cards.
     • Justify Content - Align card contents to the left, center, or right.
     • Rounded Corners - Set corner curvature for testimonial cards.
     • Border Styles - Customize border thickness, color, and styles for individual cards.
     • Box Shadow - Apply drop shadows to give cards depth.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Testimonial Item Flexbox Settings (Design Tab) - Divi Testimonial Grid

1. When Layout is set to Flexbox Column, elements inside each testimonial card are organized in a clean vertical stack.

2. Learn more about layout flexible formatting concepts at the MDN Web Docs Flexbox Guide.

3. In the Testimonial Grid Divi module, go to the Design tab.

4. Click on the Testimonial Item Flexbox toggle.

5. In this section, you can easily change the vertical display order of elements (such as placing stars above the title or author name below the quote):

   • Title
   • Star Rating
   • Date
   • Assigned Page Links
   • Quote Content
   • Author Photo / Avatar
   • Author Name

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Testimonial Item Grid Settings (Design Tab) - Divi Testimonial Grid

1. When Layout is set to Grid, elements inside each testimonial card are positioned using custom grid coordinates.

2. Learn more about advanced grid arrangements at the MDN Web Docs Grid Guide.

3. To customize element positioning in grid layout:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on the Testimonial Item Grid toggle:
     • Grid Column - Define column layouts for desktop, tablet, and mobile displays.
     • Column Gap & Row Gap - Adjust spacing between internal grid items.
     • Title Row & Column Positioning - Position the title across specific grid rows and columns.
     • Assigned Links Positioning - Set row and column placement for page links.
     • Stars Positioning - Position the star rating container.
     • Date Positioning - Set placement for the testimonial date.
     • Content Positioning - Set row and column placement for the main quote text.
     • Response Positioning - Position the owner response box.
     • Avatar Positioning - Set row and column placement for the author photo.
     • Author Positioning - Position the author name and company details.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Beginning Quote Icon Settings (Design Tab) - Divi Testimonial Grid

1. The beginning quote icon appears at the start of your testimonial text to highlight customer quotes.

2. To customize the opening quote icon:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Beginning Quote Icon:
     • Show Icon - Toggle YES to display an opening quote mark.
       • Icon - Choose an icon style.
       • Size - Set icon size (with responsive controls for Desktop, Tablet, and Mobile).
       • Icon Color & Background Color - Customize icon and background colors.
       • Align - Align the quote icon to the left, center, or right.
       • Margin & Padding - Adjust outer and inner spacing around the icon.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Ending Quote Icon Settings (Design Tab) - Divi Testimonial Grid

1. The ending quote icon appears at the conclusion of your testimonial text.

2. To customize the closing quote icon:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Ending Quote Icon:
     • Show Icon - Toggle YES to display a closing quote mark.
       • Icon - Choose an icon style.
       • Size - Set icon size.
       • Icon Color & Background Color - Customize icon and background colors.
       • Align - Align the quote icon to the left, center, or right.
       • Margin & Padding - Adjust outer and inner spacing around the icon.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Title Settings (Design Tab) - Divi Testimonial Grid

1. To style testimonial titles:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Title:
     • Margin & Padding - Adjust spacing around titles.
     • Typography options:
       • Title Font & Weight
       • Title Style & Alignment
       • Title Color & Font Size
       • Letter Spacing & Line Height
       • Text Shadow Effects

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Date Settings (Design Tab) - Divi Testimonial Grid

1. To style testimonial dates:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Date:
     • Margin & Padding - Adjust spacing around dates.
     • Typography options:
       • Date Font & Weight
       • Date Style & Alignment
       • Date Color & Font Size
       • Letter Spacing & Line Height
       • Text Shadow Effects

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Assigned Links Settings (Design Tab) - Divi Testimonial Grid

1. To style page links assigned to testimonials:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Assigned Links:
     • Margin & Padding - Adjust spacing around page links.
     • Typography options:
       • Link Font & Weight
       • Link Style & Alignment
       • Link Color & Font Size
       • Letter Spacing & Line Height
       • Text Shadow Effects

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Content Settings (Design Tab) - Divi Testimonial Grid

1. To style main testimonial quote text:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Content:
     • Background - Set background colors or gradients behind quote text.
     • Margin & Padding - Adjust spacing around quote text.
     • Typography options:
       • Content Font & Weight
       • Text Alignment & Color
       • Font Size, Letter Spacing & Line Height
       • Text Shadow Effects
     • Borders & Corner Radius - Customize content container borders and rounded corners.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Avatar Image Settings (Design Tab) - Divi Testimonial Grid

1. To style customer photos and avatars:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Avatar Image:
     • Size - Set photo dimensions (with responsive controls for Desktop, Tablet, and Mobile).
     • Align - Align photos to the left, center, or right.
     • Margin & Padding - Adjust spacing around photo containers.
     • Rounded Corners - Adjust corner radius (e.g., set to 50% for circular photos).
     • Borders - Configure custom border thickness, colors, and styles around photos.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Author Name Settings (Design Tab) - Divi Testimonial Grid

1. To style author names and company details:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Author Name:
     • Margin & Padding - Adjust spacing around author text.
     • Typography options:
       • Author Font & Weight
       • Text Alignment & Color
       • Font Size, Letter Spacing & Line Height
       • Text Shadow Effects

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Response Settings (Design Tab) - Divi Testimonial Grid

1. To style official owner response boxes:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Response:
     • Background - Set background colors for response boxes.
     • Margin & Padding - Adjust spacing around response boxes.
     • Typography options:
       • Response Font & Weight
       • Text Alignment & Color
       • Font Size, Letter Spacing & Line Height
       • Text Shadow Effects

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Rating Stars Settings (Design Tab) - Divi Testimonial Grid

1. To style review star ratings:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Rating Stars:
     • Color - Choose a custom color for rating stars (e.g., gold or brand blue).
     • Size - Set star dimensions.
     • Align - Align star ratings to the left, center, or right.
     • Margin & Padding - Adjust spacing around star rating containers.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Load More” Button Settings (Design Tab) - Divi Testimonial Grid

1. To style the “Load More” pagination button:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Button - Load More:
     • Use Custom Styles For Button - Toggle YES to apply custom button styles:
       • Button Background - Set background colors, gradients, or images.
       • Typography options:
         • Button Font, Weight & Style
         • Button Text Alignment, Color & Font Size
         • Letter Spacing, Line Height & Text Shadow
       • Button Corner Radius - Set rounded corners.
       • Button Border & Color - Adjust border width and color.
       • Button Alignment - Align button to the left, center, or right.
       • Margin & Padding - Set button spacing.
       • Box Shadow - Apply drop shadow effects.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Pagination Container Settings (Design Tab) - Divi Testimonial Grid

1. To style the outer page navigation container:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Pagination Container:
     • Margin & Padding - Adjust outer and inner spacing around navigation controls.
     • Nav Link Alignment - Align page navigation links to the left, center, or right.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Pagination Nav Link Settings (Design Tab) - Divi Testimonial Grid

1. To style page number navigation links:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Pagination - Nav Link:
     • Typography options:
       • Nav Link Font & Weight
       • Nav Link Color & Font Size
       • Letter Spacing, Line Height & Text Shadows

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Pagination Active Page Number Settings (Design Tab) - Divi Testimonial Grid

1. To style the currently active page number link:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Pagination - Active Page Number:
     • Typography options:
       • Active Link Font & Weight
       • Active Link Color & Font Size
       • Letter Spacing, Line Height & Text Shadows

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Pagination Dots Settings (Design Tab) - Divi Testimonial Grid

1. To style page number dot separators:

   • In the Testimonial Grid Divi module, go to the Design tab.
   • Click on Pagination - Dots:
     • Typography options:
       • Dots Color
       • Dots Size & Line Height
       • Letter Spacing

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Custom CSS (Advanced Tab) - Divi Testimonial Grid

1. Add custom CSS rules to gain fine-grained design control over individual elements within the testimonial grid:

   • In the Testimonial Grid Divi module, go to the Advanced tab.
   • Click on Custom CSS.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial