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

How To Create Testimonial Slider Using Divi Theme

The Divi Testimonial Slider Module is a dynamic way to showcase your testimonials.

It allows you to create a slideshow of your testimonials, highlighting each one with a different image of the testimonial giver, their quotes, star rating etc.

It can automatically rotate, or controlled by navigation arrows & dots, making it a perfect option for a homepage or landing page.

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.

Testimonial Management - Add & Edit

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.

Add "Testimonial Slider 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 Slider, click and add the divi module.

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

Testimonial Filter Settings (Content Tab) - Divi Testimonial Slider

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 Slider 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

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

Slider Settings (Content Tab) - Divi Testimonial Slider

Adjust the parameters or settings of the slider control. It gives you complete control over how your slider should function. Settings are
- In the Testimonial Slider divi module, goto Content tab.
- Click on Testimonials Filter. Setting options are
  - Effect - Sets the carousel effect. Options are
    - Slide - Slides carousel items.
    - Coverflow - Gives a coverflow effect to the slider.
      
      Enable Coverflow Slide Shadow - Set YES to enable coverflow slide shadow
      
      Shadow Color - Set the shadow color
      
      Coverflow Rotate - Set the slide rotation
      
      Coverflow Depth - Set the slide depth
  - Slides Per View - Set the number of slider items visible.It has responsive settings for desktop, tablet & phone.
  - Space Between Slides - Set the space (in pixels) between the visible slider items.
  - Initial Slide - Set the index number of the initial slide
  - Centered Slide - When set to YES, active slide in the center
  - Enable Loop - Set YES to enable continuous loop mode.
  - Autoplay - Set YES to auto-start the sliders
    - Autoplay Delay - Set the delay between each slide transition
    - Pause On Hover - Set YES to pause the slide show on mouse hover
  - Transition Duration - Set the transition duration between slides
  - Show Arrows - Set YES to show the arrow navigation
    - Arrows On Hover - Set YES to show arrows on mouse hover
  - Show Dots Pagination - Set YES to show dots pagination

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

Content Toggles Settings (Content Tab) - Divi Testimonial Slider

A testimonial consists of the following elements
- Title
- Content
- Avatar Image
- Author
- Assigned Links - Pages assigned to the testimonials
- Date
- Rating - Star rating
In this section you can show/hide the testimonial elements. Do so
- In the Testimonial Slider 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.

SEO Schema Settings (Content Tab) - Divi Slider 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 Slider 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.

Testimonials Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for testimonials & testimonials container,
- In the Testimonial Slider divi module, goto Design tab.
- Click on Testimonials toggle
  - Margin - Set margins for testimonials container
  - Padding - Set padding for testimonials container

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

Testimonial Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for a testimonial item,
- In the Testimonial Slider divi module, goto Design tab.
- Click on Testimonials toggle
  - 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
  - Padding - Set padding for testimonial item
  - 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.

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

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
To style & set design settings for testimonial item in flex layout,
- In the Testimonial Slider 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.

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

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 Slider 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.
  - 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.

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

Beginning quote icon represents the quote icon placed before the content begins
To style & set design settings for quote icon,
- In the Testimonial Slider 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.

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

Ending quote icon represents the quote icon placed after the content ends
To style & set design settings for quote icon,
- In the Testimonial Slider 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.

Title Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for testimonial title,
- In the Testimonial Slider 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.

Date Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for testimonial date,
- In the Testimonial Slider 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.

Assigned Links Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for "Assigned Links",
- In the Testimonial Slider 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.

Content Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for testimonial content,
- In the Testimonial Slider 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.

Avatar Image Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for avatar image,
- In the Testimonial Slider 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.

Author Name Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for author name,
- In the Testimonial Slider 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.

Rating Stars Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for rating stars and rating star container,
- In the Testimonial Slider 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.

Arrow Navigation Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for arrow navigation,
- In the Testimonial Slider divi module, goto Design tab.
- Click on Arrow Navigation toggle
  - Background Set the background for the arrows. You can set a background color or background gradient or background image.
  - Previous Arrow Margin - Set margins for "previous" arrow
  - Previous Arrow Padding - Set padding for "previous" arrow
  - Next Arrow Margin - Set margins for "next" arrow
  - Next Arrow Padding - Set padding for "next" arrow

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

Dot Navigation Settings (Design Tab) - Divi Testimonial Slider

To style & set design settings for dot navigation,
- In the Testimonial Slider divi module, goto Design tab.
- Click on Dot Navigation toggle
  - Dot Pagination - Set the alignment of dots pagination control. Aligns to left, center or right
  - Change Active Dot Dimensions - Set YES to change the active dot navigation. Effective when you desire to highlight the active dot.
    - Active Dot Width - Set the width of the active dot
    - Active Dot Height - Set the height of the active dot
  - Active Dot Color - Set the color of the active dot
  - Inactive Dot Color - Set the color of the inactive dot
  - Dot Border Radius - Set the border radius of the dots (in percentage)
  - Dot Width - Set the width of the dot
  - Dot Height - Set the height of the dot
  - Gaps Between Dots - Set the gap between dots
  - Margin - Set margins for dot
  - Padding - Set padding for dot

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

Custom CSS (Advanced Tab) - Divi Testimonial Slider

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

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