How to Create a Testimonial Grid Layout with Divi’s Testimonial Module

Posted on March 27, 2022 by in Divi Resources

How to Create a Testimonial Grid Layout with Divi’s Testimonial Module
Blog / Divi Resources / How to Create a Testimonial Grid Layout with Divi’s Testimonial Module

Grid layouts are great for content that needs to be kept together. Testimonials are an excellent example. Divi’s testimonials are created with a new module for each testimonial, but fortunately, displaying them in a grid is simple. In this article, we’ll see how to create a testimonial grid layout with Divi’s testimonial module. We’ll see two different layouts, so you can choose which is best for your needs.

Let’s get started!

Preview

Here’s a look at what we’ll make in this tutorial. I’m creating a testimonial section using the design styles from the free Print Shop Layout Pack that’s available within Divi.

Testimonial Grid Layout Results

Testimonial Grid Layout Results

Alternate Testimonial Layout Results

Alternate Testimonial Layout Results

Creating the First Grid Layout

We’ll show the details of both layouts, but the second layout will use the modules from this first layout.

Create a Row

First, create a new row and select a 3-column layout.

Create a Row

Next, open the row’s settings by clicking its gear icon.

Create a Row

Select the design tab and enable Use Custom Gutter Width and set the Gutter Width to 1.

  • Use Custom Width: Yes
  • Gutter Width: 1

Create a Row

Next, scroll down to Spacing and change the Top and Bottom Padding to 0px. Close the row. We’ll create a second row, but we’ll finish this one first and then clone it.

  • Padding: 0px Top and Bottom

Create a Row

Add a Testimonial Module

Next, add a testimonial module to the left column.

Add a Testimonial Module

Testimonial Module Content Settings

Next, add the testimonial content. This includes the Author’s name, Job Title, Company name, Body content, and the person’s image. I’m using the field names and default body content for my examples.

  • Author: author’s name
  • Job Title: person’s title
  • Company: company name
  • Body Content: the testimonial
  • Image: the featured image

Testimonial Module Content Settings

Testimonial Module Design Settings

Next, select the design tab.

Quote Icon

Change the Quote Icon Color to #fd335a and set the Background Color to white. The icon color will also be used for the person’s name. This will be the same for all the modules.

  • Color: #fd335a
  • Background Color: #ffffff

Testimonial Module Design Settings

Image

Next, scroll down to Image. Set the Image Border Width to 4px and change the Border Color to #000645. The border will match the module’s border for each module. We’ll change them individually.

  • Image Border Width: 4px
  • Image Border Color: #000645

Testimonial Module Design Settings

Body Text

Next, scroll down to Body Text and choose Roboto Mono. Leave the rest of the settings at their defaults.

  • Body Font: Roboto Mono

Testimonial Module Design Settings

Author Text

Next, scroll down to Author Text. Change the Font to Oswald, select Semi Bold for the Weight, TT for the Style, and change the Color to #fd335a.

  • Font: Oswald
  • Style: semi bold
  • Style: TT
  • Text Color: #fd335a

Testimonial Module Design Settings

Position Text

Next, scroll to Position Text (the job title) and change the Font to Roboto Mono. Leave the rest of the settings at their defaults.

  • Position Font: Roboto Mono

Testimonial Module Design Settings

Company Text

Next, scroll down to Company Text and choose Roboto Mono for the Font. Leave the settings at their defaults.

  • Company Font: Roboto Mono

Testimonial Module Design Settings

Border

Finally, scroll down to Border. Change the Width to 24px and the Border Color to #000645 to match the Image Border. Close the module’s settings. The border color will also change for each module.

  • Width: 24px
  • Color: #000645

Testimonial Module Design Settings

Duplicate the Testimonial Module

Next, duplicate the module twice and drag the two cloned modules to the other columns in the row.

Testimonial Module Design Settings

Style the Second Testimonial Module

Open the settings for the second testimonial module and change the content.

Style the Second Testimonial Module

Image

Next, select the design tab and scroll down to Image. Change the Border Color to #acf8f5.

  • Image Border Color: #acf8f5

Style the Second Testimonial Module

Border

Finally, scroll down to Border. Change the Border Color to #acf8f5 to match the Image Border. Close the module’s settings. Close the module’s settings.

  • Color: #acf8f5

Style the Second Testimonial Module

Style the Third Testimonial Module

Open the settings for the third testimonial module and change the content.

Style the Third Testimonial Module

Image

Next, go to the design tab, scroll down to Image and change the Border Color to #fccaa0.

  • Image Border Color: #fccaa0

Style the Third Testimonial Module

Border

Finally, scroll down to Border and the Border Color to #fccaa0 to match the Image Border. Close the module’s settings.

  • Color: #fccaa0

Style the Third Testimonial Module

Duplicate the Row

Next, duplicate the row by clicking the duplicate option that appears when you hover over the row. Since we’ve added 0px to the Top and Bottom Padding, this new row automatically touches the row above it. We’ll open each module in the second section to change its content and colors.

Duplicate the Row

Style the Fourth Testimonial Module

Open the settings for the second testimonial module and change the content.

Style the Fourth Testimonial Module

Image

Next, scroll down to Image and change the Border Color to #6eea9d.

  • Image Border Color: #6eea9d

Style the Fourth Testimonial Module

Border

Finally, scroll down to Border and change the Border Color to #6eea9d to match the Image Border. Close the module’s settings.

  • Color: #6eea9d

Style the Fourth Testimonial Module

Style the Fifth Testimonial Module

Open the settings for the fifth testimonial module and add its content.

Style the Fifth Testimonial Module

Image

Next, scroll down to Image and change the Border Color to #fff67f.

  • Image Border Color: #fff67f

Style the Fifth Testimonial Module

Border

Finally, scroll down to Border and the Border Color to #fccaa0 to match the Image Border. Close the module’s settings.

  • Color: #fff67f

Style the Fifth Testimonial Module

Style the Sixth Testimonial Module

Finally, open the settings for the sixth testimonial module and replace the testimonial content.

Style the Sixth Testimonial Module

Image

Next, scroll down to Image and change the Border Color to #593a94.

  • Image Border Color: #593a94

Style the Sixth Testimonial Module

Border

Finally, scroll down to Border and the Border Color to #593a94 to match the Image Border. Close the module’s settings.

  • Color: #593a94

Style the Sixth Testimonial Module

Alternate Testimonial Layout

The testimonial grid we’ve made works great if the testimonials are about the same size. What if you have a few small and a few large testimonials? For this, a grid with different sizes for the columns is ideal. We can place the testimonials with the most information in the larger columns.

For this example. we’ll create new columns with the same spacing settings, and use the same testimonials as before, but with varying amounts of text.

Create the Alternate Rows

First, add a 2-column row that has a 1/3 column on the left and a 2/3 column on the right.

Create the Alternate Rows

Next, open the row’s settings, go to the design tab, scroll down to Sizing, and select Use Custom Gutter Width. Change the Gutter Width to 1.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

Create the Alternate Rows

Next, scroll to Spacing. Enter 0px for the Top and Bottom Padding. Close the row’s settings.

  • Padding: 0px Top, Bottom

Create the Alternate Rows

Next, duplicate the row.

Create the Alternate Rows

Select the second row’s layout options and choose the layout with 2/3 on the left and 1/3 on the right.

Create the Alternate Rows

Add Four Testimonial Modules

Finally, create or drag your testimonial modules to the rows. I’m using the same modules as in the previous example, but I’ve changed the body content to create different sizes.

Add Four Testimonial Modules

The modules fit the width of their columns as they did in the previous example, but each is different heights because of their body content. This creates awkward spacing within the grid. Fortunately, this is easy to fix. This also works for the regular grid if your testimonial content is of different sizes.

Open the settings for the first module and go to the design tab. Scroll down to Sizing and enter 100% for Height. Repeat this for each module.

  • Height: 100%

Add Four Testimonial Modules

Results

Testimonial Grid Layout Results

Here’s a look at our grid layout. This works great if the testimonials are the same size.

Testimonial Grid Layout Results

Alternate Testimonial Layout Results

Here’s the alternate layout. It’s ideal for content in multiple sizes.

Alternate Testimonial Layout Results

Ending Thoughts

That’s our look at how to create a testimonial grid layout with Divi’s testimonial module. Divi’s row and module settings work great together to create a grid of multiple rows and column counts. The examples we’ve shown here can easily be expanded upon to create even larger grids. The concepts also work with other types of Divi modules.

We want to hear from you. Have you created a testimonial grid using the method we’ve discussed here? Let us know about your experience in the comments.  

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Hostel Layout Pack for Divi

Get a Free Hostel Layout Pack for Divi

Posted on August 15, 2022 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you. This time around, the design team has created a beautiful Hostel Layout Pack that’ll help you get...

View Full Post
Join To Download Today