How to Create Custom Testimonial Tabs with Divi (FREE Download!)

How to Create Custom Testimonial Tabs with Divi (FREE Download!)

For many businesses, testimonials are one of the key arguments to get new clients. That means paying a bit of extra attention to testimonials on your website will never go to waste. Within Divi, there are many different ways to share testimonials, using the Divi Testimonial Module for instance. But if you’re looking for a more interactive approach, you’re going to love this tutorial. We’re going to show you how to create custom testimonial tabs inside Divi. Once someone hovers the Blurb Module at the left, a corresponding testimonial will appear on the right. The transition effects in this design are seamless too, which helps you give that extra feel of customization to your website. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

testimonial tabs

Mobile

testimonial tabs

Download The Custom Testimonial Tabs Layout for FREE

To lay your hands on the free custom testimonial tabs layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating!

Add New Section

Background Color

Start by adding a new section to the page you’re working on. Open the section settings and add a background color.

  • Background Color: #ffefdb

testimonial tabs

Spacing

Move on to the section’s design tab and add some custom margin and padding values.

  • Top Margin: 5%
  • Bottom Margin: 5%
  • Left Margin: 5%
  • Right Margin: 5%
  • Left Padding: 5%
  • Right Padding: 5%

testimonial tabs

Border

Include some rounded corners as well.

  • All Corners: 20px

testimonial tabs

Add Row #1

Column Structure

Continue by adding the first row to the section using the following column structure:

testimonial tabs

Spacing

Without adding any modules yet, open the row settings and add some bottom margin.

  • Bottom Margin: 3%

testimonial tabs

Add Text Module to Column

Add H2 Content

Time to add modules, starting with a Text Module containing some H2 content.

testimonial tabs

H2 Text Settings

Move on to the module’s design tab and change the H2 text settings accordingly:

  • Heading 2 Font: Montserrat
  • Heading 2 Font Weight: Semi Bold
  • Heading 2 Text Size: 31px
  • Heading 2 Letter Spacing: -1px

testimonial tabs

Add Divider Module to Column

Visibility

Right below the Text Module, we’re adding a Divider Module. Make Sure the “Show Divider” option is enabled.

  • Show Divider: Yes

testimonial tabs

Line

Move on to the module’s design tab and change the line color to white.

  • Line Color: #ffffff

testimonial tabs

Sizing

Modify the sizing settings too.

  • Divider Weight: 10px
  • Width: 14%
  • Height: 10px

testimonial tabs

Border

And complete the module settings by adding some rounded corners to the border settings.

  • All Corners: 10px

testimonial tabs

Add Row #2

Column Structure

On to the next row. Use the following column structure:

testimonial tabs

Sizing

Without adding any modules yet, open the row settings and equalize the column heights in the sizing settings.

  • Equalize Column Heights: Yes

testimonial tabs

Column 2 Settings

Background Color

Then, open the column 2 settings and apply a background color.

  • Background Color: #fffbf9

testimonial tabs

testimonial tabs

Spacing

Move on to the column’s design tab and apply some top and bottom padding on smaller screen sizes.

  • Top Padding:
    • Desktop: None
    • Tablet & Phone: 300px
  • Bottom Padding
    • Desktop: None
    • Tablet & Phone: 300px

testimonial tabs

Border

Include some rounded corners too.

  • All Corners: 10px

testimonial tabs

Add Blurb Module #1 to Column 1

Add Content

Time to add modules, starting with a first Blurb Module in column 1. Add some content of your choice.

testimonial tabs

Upload 1:1 Ratio Image

Upload an image with a 1:1 ratio next.

testimonial tabs

Background Color

Then, apply the following background color:

  • Background Color: #d5d6ea

testimonial tabs

Image Settings

Make changes to the image settings too.

  • Image/Icon Placement: Left
  • Image Rounded Corners: 100px

testimonial tabs

Title Text Settings

Then, modify the title text settings accordingly:

  • Title Font: Montserrat
  • Title Font Weight: Semi Bold
  • Title Letter Spacing: -1px

testimonial tabs

Body Text Settings

We’re changing the body text settings as well.

  • Body Font: Lato
  • Body Text Size: 13px

testimonial tabs

Spacing

Next, we’ll add some space around our module’s content by applying the following padding values:

  • Top Padding: 5%
  • Bottom Padding: 5%
  • Left Padding: 5%
  • Right Padding: 5%

testimonial tabs

Border

Add some rounded corners too.

  • All Corners: 10px

testimonial tabs

Animation

By default, there’s an animation effect applied to the Blurb Module’s image. We’re removing this animation in the animation settings.

  • Image/Icon Animation: No Animation

testimonial tabs

CSS ID

To create the testimonial tab design, we’re going to need to add some code at the end of this tutorial. To prepare for that, we’ll add a CSS ID to the Blurb Module’s advanced tab.

  • CSS ID: testimonial-person-1

testimonial tabs

Blurb Image & Title CSS

We’re using two lines of CSS code in the advanced tab as well. One for the blurb image and the other for the blurb title.

width: 25% !important;
margin-top: 25px;

testimonial tabs

Clone Blurb Module Three Times

Once you’ve completed the first Blurb Module, you can clone it three times.

testimonial tabs

Change Content & Images

Make sure you change the content and images for each duplicate Blurb Module.

testimonial tabs

Change Background Colors

Along with the background colors.

  • Duplicate 1: #fffed6
  • Duplicate 2: #d7ecd9
  • Duplicate 3: #f5d5cb

testimonial tabs

Change CSS IDs

And, of course, the CSS IDs. Use consecutive numbering.

  • Duplicate 1: testimonial-person-2
  • Duplicate 2: testimonial-person-3
  • Duplicate 3: testimonial-person-4

testimonial tabs

Add Quote Text Module to Column 2

Add Quote to Content Box

On to the second column. There, the first module we need is a Text Module with a quote character.

testimonial tabs

Text Settings

Move on to the module’s design tab and change the text settings as follows:

  • Text Font: Playfair Display
  • Text Color: #ffefdb
  • Text Size: 200px
  • Text Line Height: 1em

testimonial tabs

Position

Reposition the module too.

  • Position: Absolute
  • Location: Top Left
  • Horizontal Offset: 5%

testimonial tabs

Add Testimonial Text Module to Column 2

Add Testimonial Content

On to the next Text Module. This one will be dedicated to our first testimonial. The testimonial you place in the content box has to match the first Blurb Module in column 1.

testimonial tabs

Text Settings

Change the module’s text settings accordingly:

  • Text Font: Lato
  • Text color: #000000
  • Text Size: 20px
  • Text Line Height: 2.1em
  • Text Alignment: Center

testimonial tabs

Sizing

Make sure the width is set to “100%” too.

  • Width: 100%

testimonial tabs

Spacing

Then, add some custom margin and padding values to the spacing settings.

  • Top Margin: 30%
  • Left Padding: 10%
  • Right Padding: 10%

testimonial tabs

CSS ID

And add a CSS ID to the advanced tab. The number at the end of this CSS ID needs to match the number at the end of the corresponding Blurb Module’s CSS ID.

  • CSS ID: testimonial-copy-1

testimonial tabs

Clone Text Module Three Times

Once you’ve completed the first testimonial Text Module, you can clone it three times.

testimonial tabs

Change Testimonial Content

Make sure you change the testimonial content in the duplicate modules.

testimonial tabs

Change CSS IDs

Along with the CSS IDs. Make sure you follow a consecutive order.

  • Duplicate 1: testimonial-copy-2
  • Duplicate 2: testimonial-copy-3
  • Duplicate 3: testimonial-copy-4

testimonial tabs

Add CSS Class to First Testimonial Text Module

And we’ll need to add a CSS class to the testimonial that we want to be enabled at the beginning. In this case, that’s the first one.

  • CSS Class: show-testimonial

testimonial tabs

Add Code Module Below Divider Module (Row #1)

Now that we have all elements in place, it’s time to make the magic happen. Add a new Code Module right below the Divider Module in the section’s first row.

testimonial tabs

Add CSS Code

Insert the following lines of CSS code between style tags as you can see in the print screen below.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
} .testimonial-active {
transform: translateX(-10%);
} [id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; cursor: context-menu;
} [id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease; position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto; visiblity: hidden;
opacity: 0;
}

testimonial tabs

Add JQuery Code

Next, place the following lines of JQuery code between script tags as you can see in the print screen below and you’re done!

jQuery(function($){
$(document).ready(function(){ $('#testimonial-person-1').addClass('testimonial-active'); $('[id*="testimonial-person"]').hover(function() { var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector); $('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial'); $('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active'); }); });
});

testimonial tabs

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

testimonial tabs

Mobile

testimonial tabs

Final Thoughts

In this post, we’ve shown you how to create an interactive testimonial design for any kind of website you build. More specifically, we’ve shown you how to create custom testimonial tabs that are triggered once someone hovers one of the Blurb Modules on the left. You were able to download the JSON file fore free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Leave a Reply

Your email address will not be published. Required fields are marked *