Home » WordPress Plugins » Divi Testimonial Plus: Advanced Testimonial Grid, Slider, Form and SEO Schema » How To Create Testimonial Grid Using Divi Theme

How To Create Testimonial Grid Using Divi Theme

The Divi Testimonial Grid Module allows you to display a list of testimonials in a grid format, with images of the testimonial givers, their quotes, star rating etc.

It’s great for displaying a large number of testimonials in a compact space, making it easy for visitors to read through them.

And also it’s fully customizable, you can adjust the colors, fonts, layout etc of each testimonial to match the look and feel of your site.

We offer 7-day FREE trial & pre-made layouts

Pre-requisites

Tools

Computer

Estimated Cost : $ 29.99

Total Duration : 9 minutes

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 1 - Testimonial Management - Add & Edit

We use the Site Reviews Plugin to manage testimonials
Testimonial Management refers to the process of adding, editing, and managing customer testimonials on a WordPress website.
It involves steps like gathering testimonials from customers, editing and formatting them for the website.
For details refer to How To Manage Testimonials In Your WordPress Website

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 2 - Add "Testimonial Grid Divi Module" On A Page

Now that you have saved testimonials from happy customers in your website's admin panel, it's time to show them to people visiting your website.
One of the ways to show testimonials is in a grid. To do so,
- Create or edit a page in the divi visual builder
- Within a divi row click on the plus icon for Add New Module
- Search for Testimonial Grid, click and add the divi module.

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 3 - Testimonial Filter Settings (Content Tab) - Divi Testimonial Grid

Filtering of testimonials refers to the process of selecting and displaying certain testimonials rather than displaying all testimonials.
As a result, you can show the most relevant testimonials. To do so
- In the Testimonial Grid divi module, goto Content tab.
- Click on Testimonials Filter. Setting options are
  - Fetch Testimonials From - A testimonial links to one or more pages. In this dropdown setting, you have the following options
    - Current Page - Fetches testimonials linked to the current page.
    - Custom Pages - Fetches testimonials linked to one or more pages.
      
      Custom Page IDs - Enter comma-separated page ids of the custom pages
    - Filter By Categories - A toggle YES/NO switch. On selecting YES, you can fetch testimonials linked to one or more categories.
      
      Categories - A list of category checkboxes. You can select one or more categories
    - Assigned Users - Limit testimonials to those assigned to specific users. You can enter a list of comma-separated user IDs
    - Minimum Star Rating - Set the minimum star rating of the testimonials to display
    - Number of Reviews To Display - Set the maximum number of testimonials to display on the page
    - Skip Testimonials - Offset - Select the number of testimonials to skip. It's NOT recommended to use this option with pagination
    - Enable Pagination - Select the YES toggle to enable pagination. When selected
      
      Pagination Content Load Method - Sets the method to load testimonial data on pagination link click.
      
      Ajax - Loads testimonials without refreshing the page
      
      Page Reload - Loads testimonials by refreshing the page
      
      Load More - Shows and appends testimonials without reloading the whole page when you press the Load More button

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 4 - Content Toggles Settings (Content Tab) - Divi Testimonial Grid

A testimonial consists of the following elements
- Title
- Content
- Avatar Image
- Author
- Assigned Links - Pages assigned to the testimonials
- Date
- Rating - Star rating
- Response - User response
In this section you can show/hide the testimonial elements. To do so,
- In the Testimonial Grid divi module, goto Content tab.
- Click on Content Toggle
- Show/hide an element of the testimonial by selecting corresponding YES/NO toggle switch
- Fallback Text - Add custom text message to show when you cannot fetch testimonials using the Testimonial Filter settings

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 5 - SEO Schema Settings (Content Tab) - Divi Testimonial Grid

Our plugin adds Review Schema, a structured data markup, to your website's HTML code. It communicates testimonials and ratings of products or services to search engines.
To enable structured data markup,
- In the Testimonial Grid divi module, goto Content tab.
- Click on SEO Schema
- Set the Include SEO Schema? to YES

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 6 - Testimonials Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for testimonials & testimonials container,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Testimonials toggle
  - Margin - Set margins for testimonials container
  - Padding - Set padding for testimonials container
  - Columns - Set the number of columns for the testimonial grid. It has responsive settings for desktop, tablet & phone
  - Row & Column Gap - Set the gap between the rows and columns of the testimonial grid. It has responsive settings for desktop, tablet & phone
  - Rounded Corners - Set the border radius for testimonials container
  - Border Styles - Set the border style setup for testimonials container. You can setup borders for all sides (top, right, bottom & left) individually.
  - Border Width - Set the border width for testimonials container
  - Border Color - Set the border color for testimonials container
  - Border Style - Set the border style for testimonials container

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 7 - Testimonial Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for a testimonial item,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Testimonials toggle
  - Margin - Set margins for testimonial item
  - Padding - Set padding for testimonial item
  - Layout - Set the layout type for the testimonial item contents. Options are
    - Flexbox Column - Arranges testimonial items in a Flexible Box CSS Layout. We use flexbox columns
    - Grid - Arranges testimonials items in a Grid CSS Layout
  - Background Set the background for the testimonial item. You can set a background color or background gradient or background image
  - Justify Content - Justifies the contents of the testimonial item to left, center or right
  - Rounded Corners - Set the border radius for testimonial item
  - Border Styles - Set the border style setup for testimonial item. You can setup borders for all sides (top, right, bottom & left) individually.
  - Border Width - Set the border width for testimonial item
  - Border Color - Set the border color for testimonial item
  - Border Style - Set the border style for testimonial item
  - Box Shadow - Set box shadow for testimonial item

Start your FREE trial. You can cancel your trial anytime within the trial period.

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

We use CSS Flexbox Layout for testimonial item contents when the Layout settings in the Testimonial toggle is Flexbox Column.
Details on flexbox layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
In the Testimonial Grid divi module, goto Design tab.
Click on Testimonial Item Flexbox toggle
In this section you can change the layout order of testimonial item contents. We use the order css property. Set the order property for
- Title
- Star - Rating stars container
- Date
- Assigned Links - Pages assigned to the testimonials
- Content
- Avatar Image
- Author Name

Start your FREE trial. You can cancel your trial anytime within the trial period.

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

We use CSS Grid Layout for testimonial item contents when the Layout settings in the Testimonial toggle is Grid.
This is an advanced layout. Details on grid layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
To style & set design settings for testimonial item in grid layout,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Testimonial Item Grid toggle
  - Grid Column - Set the css grid-template-columns value. It has responsive settings for desktop, tablet & phone.
  - Column Gap - Set the gap for the columns in the grid. It has responsive settings for desktop, tablet & phone.
  - Row Gap - Set the gap for the rows in the grid. It has responsive settings for desktop, tablet & phone.
  - Title Row Start - Set the grid-row-start css property for the title. It has responsive settings for desktop, tablet & phone.
  - Title Row End - Set the grid-row-end css property for the title. It has responsive settings for desktop, tablet & phone.
  - Title Column Start - Set the grid-column-start css property for the title. It has responsive settings for desktop, tablet & phone.
  - Title Column End - Set the grid-column-end css property for the title. It has responsive settings for desktop, tablet & phone.
  - Assigned Links Row Start - Set the grid-row-start css property for the assigned links. It has responsive settings for desktop, tablet & phone.
  - Assigned Links Row End - Set the grid-row-end css property for the assigned links. It has responsive settings for desktop, tablet & phone.
  - Assigned Links Column Start - Set the grid-column-start css property for the assigned links. It has responsive settings for desktop, tablet & phone.
  - Assigned Links Column End - Set the grid-column-end css property for the assigned links. It has responsive settings for desktop, tablet & phone.
  - Stars Row Start - Set the grid-row-start css property for the rating stars container. It has responsive settings for desktop, tablet & phone.
  - Stars Row End - Set the grid-row-end css property for the rating stars container. It has responsive settings for desktop, tablet & phone.
  - Stars Column Start - Set the grid-column-start css property for the rating stars container. It has responsive settings for desktop, tablet & phone.
  - Stars Column End - Set the grid-column-end css property for the rating stars container. It has responsive settings for desktop, tablet & phone.
  - Date Row Start - Set the grid-row-start css property for the testimonial date. It has responsive settings for desktop, tablet & phone.
  - Date Row End - Set the grid-row-end css property for the testimonial date. It has responsive settings for desktop, tablet & phone.
  - Date Column Start - Set the grid-column-start css property for the testimonial date. It has responsive settings for desktop, tablet & phone.
  - Date Column End - Set the grid-column-end css property for the testimonial date. It has responsive settings for desktop, tablet & phone.
  - Content Row Start - Set the grid-row-start css property for the testimonial content. It has responsive settings for desktop, tablet & phone.
  - Content Row End - Set the grid-row-end css property for the testimonial content. It has responsive settings for desktop, tablet & phone.
  - Content Column Start - Set the grid-column-start css property for the testimonial content. It has responsive settings for desktop, tablet & phone.
  - Content Column End - Set the grid-column-end css property for the testimonial content. It has responsive settings for desktop, tablet & phone.
  - Response Row Start - Set the grid-row-start css property for the testimonial response container. It has responsive settings for desktop, tablet & phone.
  - Response Row End - Set the grid-row-end css property for the testimonial response container. It has responsive settings for desktop, tablet & phone.
  - Response Column Start - Set the grid-column-start css property for the testimonial response container. It has responsive settings for desktop, tablet & phone.
  - Response Column End - Set the grid-column-end css property for the testimonial response container. It has responsive settings for desktop, tablet & phone.
  - Avatar Row Start - Set the grid-row-start css property for the avatar image. It has responsive settings for desktop, tablet & phone.
  - Avatar Row End - Set the grid-row-end css property for the avatar image. It has responsive settings for desktop, tablet & phone.
  - Avatar Column Start - Set the grid-column-start css property for the avatar image. It has responsive settings for desktop, tablet & phone.
  - Avatar Column End - Set the grid-column-end css property for the avatar image. It has responsive settings for desktop, tablet & phone.
  - Author Row Start - Set the grid-row-start css property for the author name. It has responsive settings for desktop, tablet & phone.
  - Author Row End - Set the grid-row-end css property for the author name. It has responsive settings for desktop, tablet & phone.
  - Author Column Start - Set the grid-column-start css property for the author name. It has responsive settings for desktop, tablet & phone.
  - Author Column End - Set the grid-column-end css property for the author name. It has responsive settings for desktop, tablet & phone.

Start your FREE trial. You can cancel your trial anytime within the trial period.

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

Beginning quote icon represents the quote icon placed before the content begins
To style & set design settings for quote icon,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Beginning Quote Icon toggle
  - Show Icon - Set toggle to YES to display the quote icon before content
    - Icon - Select the icon
    - Size - Set the size for the icon. It has responsive settings for desktop, tablet & phone.
    - Icon Color - Set the color of the icon
    - Background Color - Set the background color for the icon
    - Align - Aligns the icon to left, center or right
    - Margin - Set margins for quote icon
    - Padding - Set padding for quote icon

Start your FREE trial. You can cancel your trial anytime within the trial period.

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

Ending quote icon represents the quote icon placed after the content ends
To style & set design settings for quote icon,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Ending Quote Icon toggle
  - Show Icon - Set toggle to YES to display the quote icon after content
    - Icon - Select the icon
    - Size - Set the size for the icon. It has responsive settings for desktop, tablet & phone.
    - Icon Color - Set the color of the icon
    - Background Color - Set the background color for the icon
    - Align - Aligns the icon to left, center or right
    - Margin - Set margins for quote icon
    - Padding - Set padding for quote icon

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 12 - Title Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for testimonial title,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Title toggle
- Margin - Set margins for testimonial title
- Padding - Set padding for testimonial title
- Set font typography options like
  - Title Font
  - Title Font Weight
  - Title Font Style
  - Title Text Alignment
  - Title Text Color
  - Title Text Size
  - Title Letter Spacing
  - Title Line Height
  - Title Text Shadow

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 13 - Date Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for testimonial date,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Date toggle
  - Margin - Set margins for testimonial date
  - Padding - Set padding for testimonial date
  - - Set font typography options like
    - Date Font
    - Date Font Weight
    - Date Font Style
    - Date Text Alignment
    - Date Text Color
    - Date Text Size
    - Date Letter Spacing
    - Date Line Height
    - Date Text Shadow

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 14 - Assigned Links Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for "Assigned Links",
- In the Testimonial Grid divi module, goto Design tab.
- Click on Assigned Links toggle
  - Margin - Set margins for testimonial assigned links
  - Padding - Set padding for testimonial assigned links
  - - Set font typography options like
    - Assigned Link Font
    - Assigned Link Font Weight
    - Assigned Link Font Style
    - Assigned Link Text Alignment
    - Assigned Link Text Color
    - Assigned Link Text Size
    - Assigned Link Letter Spacing
    - Assigned Link Line Height
    - Assigned Link Text Shadow

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 15 - Content Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for testimonial content,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Content toggle
  - Background Set the background for the testimonial content. You can set a background color or background gradient or background image.
  - Margin - Set margins for testimonial content
  - Padding - Set padding for testimonial content
  - Set font typography options like
    - Testimonial Content Font
    - Testimonial Content Font Weight
    - Testimonial Content Font Style
    - Testimonial Content Text Alignment
    - Testimonial Content Text Color
    - Testimonial Content Text Size
    - Testimonial Content Letter Spacing
    - Testimonial Content Line Height
    - Testimonial Content Text Shadow
  - Rounded Corners - Set the border radius for testimonial content container
  - Border Styles - Set the border style setup for testimonial content container. You can setup borders for all sides (top, right, bottom & left) individually.
  - Border Width - Set the border width for testimonial content container
  - Border Color - Set the border color for testimonial content container
  - Border Style - Set the border style for testimonial content container

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 16 - Avatar Image Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for avatar image,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Avatar Image toggle
  - Size - Set the image size. It has responsive settings for desktop, tablet & phone.
  - Align - Aligns image to left, center or right. It has responsive settings for desktop, tablet & phone.
  - Margin - Set margins for image container
  - Padding - Set padding for image container
  - Rounded Corners - Set the border radius for avatar image
  - Border Styles - Set the border style setup for avatar image. You can setup borders for all sides (top, right, bottom & left) individually.
  - Border Width - Set the border width for avatar image
  - Border Color - Set the border color for avatar image
  - Border Style - Set the border style for avatar image

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 17 - Author Name Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for author name,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Author Name toggle
  - Margin - Set margins for author name container
  - Padding - Set padding for author name container
  - Set font typography options like
    - Author Name Font
    - Author Name Font Weight
    - Author Name Font Style
    - Author Name Text Alignment
    - Author Name Text Color
    - Author Name Text Size
    - Author Name Letter Spacing
    - Author Name Line Height
    - Author Name Text Shadow

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 18 - Response Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for testimonial response,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Response toggle
  - Background Set the background for the response container
  - Margin - Set margins for response container
  - Padding - Set padding for response container
  - Set font typography options like
    - Response Font
    - Response Font Weight
    - Response Font Style
    - Response Text Alignment
    - Response Text Color
    - Response Text Size
    - Response Letter Spacing
    - Response Line Height
    - Response Text Shadow

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 19 - Rating Stars Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for rating stars and rating star container,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Rating Stars toggle
  - Color Set the color for the rating star
  - Size Set the size for the rating star
  - Align Align the rating stars container to left, center or right
  - Margin - Set margins for rating stars container.
  - Padding - Set padding for rating stars container.

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 20 - "Load More" Button Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for "Load More Button",
- In the Testimonial Grid divi module, goto Design tab.
- Click on Button - Load More toggle
  - Use Custom Styles For Button Toggle YES to set custom style for the button
    - Button Background Set the background for the button. You can set a background color or background gradient or background image.
    - Set font typography options like
      
      Button Font
      
      Button Font Weight
      
      Button Font Style
      
      Button Text Alignment
      
      Button Text Color
      
      Button Text Size
      
      Button Letter Spacing
      
      Button Line Height
      
      Button Text Shadow
    - Button Border Radius - Set the border radius for button
    - Button Border Width - Set the border width for button
    - Button Border Color - Set the border color for button
    - Button Alignment - Align the button to left, center or right
    - Button Margin - Set margins for button
    - Button Padding - Set padding for button
    - Button Box Shadow - Set box shadow for button

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 21 - Pagination Container Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for pagination container,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Pagination Container toggle
  - Margin - Set margins for pagination container
  - Padding - Set padding for pagination container
  - Nav Link Alignment - Align the navigation links container to left, center or right

Start your FREE trial. You can cancel your trial anytime within the trial period.

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

To style & set design settings for pagination navigation links,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Pagination - Nav Link toggle
  - Set font typography options like
    - Nav Link Font
    - Nav Link Font Weight
    - Nav Link Font Style
    - Nav Link Text Color
    - Nav Link Text Size
    - Nav Link Letter Spacing
    - Nav Link Line Height
    - Nav Link Text Shadow

Start your FREE trial. You can cancel your trial anytime within the trial period.

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

To style & set design settings for active pagination navigation link,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Pagination - Active Page Number toggle
  - Set font typography options like
    - Active Nav Link Font
    - Active Nav Link Font Weight
    - Active Nav Link Font Style
    - Active Nav Link Text Alignment
    - Active Nav Link Text Color
    - Active Nav Link Text Size
    - Active Nav Link Letter Spacing
    - Active Nav Link Line Height
    - Active Nav Link Text Shadow

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 24 - Pagination Dots Settings (Design Tab) - Divi Testimonial Grid

To style & set design settings for pagination dot mark,
- In the Testimonial Grid divi module, goto Design tab.
- Click on Pagination - Dots toggle
  - Set font typography options like
    - Dots Text Color
    - Dots Text Size
    - Dots Letter Spacing
    - Dots Line Height

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 25 - Custom CSS (Advanced Tab) - Divi Testimonial Grid

Add custom css to gain fine control over the design of elements constituting the testimonial grid
- In the Testimonial Grid divi module, goto Advanced tab.
- Click on Custom CSS toggle

Start your FREE trial. You can cancel your trial anytime within the trial period.