The one thing visitors always go looking for on a website is testimonials. They represent credibility and influence the decision-making process leads or potential clients have when visiting your website. Besides making sure you have strong testimonials to share, making them visually appealing plays an important role as well. In this post, we’re going to show you 5 fantastic ways you can style the Divi Testimonial Module while using the built-in options only.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a look at the end result on different screen sizes.

Desktop

5-fantastic-ways-you-can-style-divis-testimonial-module 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Mobile

5-fantastic-ways-you-can-style-divis-testimonial-module-1 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Recreate Example #1

5-fantastic-ways-you-can-style-divis-testimonial-module 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Section

Let’s start with the first example! Create a new page and add a regular section.

5-fantastic-ways-you-can-style-divis-testimonial-module-2 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

5-fantastic-ways-you-can-style-divis-testimonial-module-3 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Sizing

Without adding any modules yet, open the row settings and make some changes to the Sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

5-fantastic-ways-you-can-style-divis-testimonial-module-4 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Image Module to Column 1

Upload Image

Time to start adding modules! The first module we’ll need is an Image Module in column 1. Go ahead and upload a squared image of choice.

5-fantastic-ways-you-can-style-divis-testimonial-module-5 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Filters

Then, go to the filters settings and play around with the different effects.

  • Saturation: 40%
  • Contrast: 126%

5-fantastic-ways-you-can-style-divis-testimonial-module-6 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Button Module to Column 1

Add Copy

The second and last module we’ll need in column 1 is a Button Module. Add some copy of choice.

5-fantastic-ways-you-can-style-divis-testimonial-module-7 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Button Settings

Then, go to the button settings and make some changes to the appearance of your button.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 14px
  • Color 1: #5400ff
  • Color 2: #00fff6
  • Gradient Direction: 100deg
  • Button Border Width: 0px
  • Font Weight: Ultra Bold
  • Font Style: Uppercase

5-fantastic-ways-you-can-style-divis-testimonial-module-8 5 Fantastic Ways You Can Style Divi’s Testimonial Module

5-fantastic-ways-you-can-style-divis-testimonial-module-9 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Add some custom spacing values as well.

  • Top Padding: 10px
  • Bottom Padding: 10px
  • Left Padding: 30px
  • Right Padding: 30px

5-fantastic-ways-you-can-style-divis-testimonial-module-10 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Box Shadow

And finish off with a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

5-fantastic-ways-you-can-style-divis-testimonial-module-11 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Testimonial Module to Column 2

Add Content

In the second column, the only module we’ll need is a Testimonial Module. Add some content to the different fields and the content box.

5-fantastic-ways-you-can-style-divis-testimonial-module-12 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Background Color

Next, add a slightly transparent background color.

  • Background Color: rgba(255,255,255,0.96)

5-fantastic-ways-you-can-style-divis-testimonial-module-13 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Quote Icon Settings

Change the quote icon settings as well.

  • Quote Icon Color: #0c0c0c
  • Quote Icon Background Color: rgba(245,245,245,0)

5-fantastic-ways-you-can-style-divis-testimonial-module-14 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Body Text Settings

Then, modify the body text settings.

  • Body Font: Verdana
  • Body Line Height: 1.7em

5-fantastic-ways-you-can-style-divis-testimonial-module-15 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Continue by adding different custom margin and padding values in the spacing settings.

  • Top Margin: 15vw (Desktop &  Tablet), 0vw (Phone)
  • Bottom Margin: 50px (Tablet & Phone)
  • Left Margin: -10vw (Desktop & Tablet), 0vw (Phone)
  • Right Margin: 5vw
  • Top Padding: 70px
  • Bottom Padding: 70px
  • Left Padding: 50px
  • Right Padding: 50px

5-fantastic-ways-you-can-style-divis-testimonial-module-16 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Border

Add a left border as well.

  • Left Border Width: 7px
  • Left Border Color: #5400ff

5-fantastic-ways-you-can-style-divis-testimonial-module-17 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Box Shadow

Lastly, add a subtle box shadow to shape the Testimonial Module.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(0,0,0,0.49)

5-fantastic-ways-you-can-style-divis-testimonial-module-18 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Clone Both Modules & Place Duplicates in Column 3 & 4

Once you’re done modifying the modules in column 1 and 2, you can clone the modules and place the duplicates in the two remaining columns.

5-fantastic-ways-you-can-style-divis-testimonial-module-19 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Image

Don’t forget to change the image of your second testimonial.

5-fantastic-ways-you-can-style-divis-testimonial-module-20 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Button Gradient Background

Change the button gradient background as well.

  • Color 1: #ff001d
  • Color 2: #3700ff
  • Gradient Direction: 100deg

5-fantastic-ways-you-can-style-divis-testimonial-module-21 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Testimonial Border Color

And match the border color to the new button gradient background.

  • Left Border Color: #ff001d

5-fantastic-ways-you-can-style-divis-testimonial-module-22 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Recreate Example #2

5-fantastic-ways-you-can-style-divis-testimonial-module-1 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Section

On to the second example! Add a new regular section to your page.

5-fantastic-ways-you-can-style-divis-testimonial-module-23 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Row

Column Structure

Without making any changes to the section, add a new row using the following column structure:

5-fantastic-ways-you-can-style-divis-testimonial-module-24 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Sizing

Continue by opening the row settings and making some changes to the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

5-fantastic-ways-you-can-style-divis-testimonial-module-25 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Next, add some custom padding values to the row and columns.

  • Left Padding: 200px (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 200px (Desktop), 30px (Tablet), 25px (Phone)
  • Column 1 Left Padding: 5px (Desktop), 0px (Tablet & Phone)
  • Column 1 Right Padding: 2.5px (Desktop), 0px (Tablet & Phone)
  • Column 2 Left Padding: 2.5px (Desktop), 0px (Tablet & Phone)
  • Column 2 Right Padding: 2.5px (Desktop), 0px (Tablet & Phone)
  • Column 3 Left Padding: 2.5px (Desktop), 0px (Tablet & Phone)
  • Column 3 Right Padding: 5px (Desktop), 0px (Tablet & Phone)

5-fantastic-ways-you-can-style-divis-testimonial-module-26 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Video Module to Column 1

Video Link

The first module we’ll need in column 1 is a Video Module. Link this video to your testimonial video.

5-fantastic-ways-you-can-style-divis-testimonial-module-27 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Image Overlay

Add an Image Overlay as well.

5-fantastic-ways-you-can-style-divis-testimonial-module-28 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Testimonial Module to Column 1

Add Content

The second and last module needed in column 1 is a Testimonial Module. Start by adding the testimonial details.

5-fantastic-ways-you-can-style-divis-testimonial-module-29 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Disable Quote Icon

Then, disable the quote icon in the elements settings.

  • Show Quote Icon: No

5-fantastic-ways-you-can-style-divis-testimonial-module-30 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Background Color

Add a white background next.

  • Background Color: #ffffff

5-fantastic-ways-you-can-style-divis-testimonial-module-31 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Body Text Settings

Modify the body text settings as well.

  • Body Text Color: #000000
  • Body Letter Spacing: -0.5px
  • Body Line Height: 1.7em

5-fantastic-ways-you-can-style-divis-testimonial-module-32 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

And add some custom margin and padding values in the spacing settings.

  • Bottom Margin: 30px (Tablet & Phone)
  • Top Padding: 50px
  • Bottom Padding: 50px
  • Left Padding: 80px
  • Right Padding: 80px

5-fantastic-ways-you-can-style-divis-testimonial-module-33 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Border

We’re also giving the module bottom left and right rounded corners ’30px’.

5-fantastic-ways-you-can-style-divis-testimonial-module-34 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Box Shadow

And lastly, to create some depth, we’re giving the Testimonial Module a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(0,0,0,0.3)

5-fantastic-ways-you-can-style-divis-testimonial-module-35 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Clone Modules Three Times & Place Duplicates in Remaining Columns

Once you’re done modifying both modules in column 1, clone them twice and place the duplicates in the two remaining columns.

5-fantastic-ways-you-can-style-divis-testimonial-module-36 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Video Links, Content & Image Overlays

Don’t forget to change the video link, content and image overlays of your new testimonials.

5-fantastic-ways-you-can-style-divis-testimonial-module-37 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Recreate Example #3

5-fantastic-ways-you-can-style-divis-testimonial-module-2 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Section

On to the third example! Add a new regular section to your page.

5-fantastic-ways-you-can-style-divis-testimonial-module-38 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

5-fantastic-ways-you-can-style-divis-testimonial-module-39 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Column 1 Background Color

Then, go to the background settings and add a background color to the first column.

  • Column 1 Background Color: #f9f9f9

5-fantastic-ways-you-can-style-divis-testimonial-module-40 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Column 2 Background Color

The second column will need a white background color.

  • Column 2 Background Color: #ffffff

5-fantastic-ways-you-can-style-divis-testimonial-module-41 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Sizing

Then, go to the sizing settings and remove the gutter width.

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

5-fantastic-ways-you-can-style-divis-testimonial-module-42 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Add some custom spacing values next.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Left Padding: 0px
  • Right Padding: 0px
  • Column 1 Top Padding: 100px
  • Column 1 Bottom Padding: 100px
  • Column 1 Left Padding: 50px
  • Column 1 Right Padding: 50px
  • Column 2 Top Padding: 100px
  • Column 2 Bottom Padding: 100px
  • Column 2 Left Padding: 50px
  • Column 2 Right Padding: 50px

5-fantastic-ways-you-can-style-divis-testimonial-module-43 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Border

And give each one of the borders ’20px’.

5-fantastic-ways-you-can-style-divis-testimonial-module-44 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Box Shadow

Last but not least, give your row a box shadow.

  • Box Shadow Blur Strength: 80px

5-fantastic-ways-you-can-style-divis-testimonial-module-45 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Testimonial Module to Column 1

Add Content

Time to start adding modules! The first module we’ll need in column 1 is a Testimonial Module. Add the content.

5-fantastic-ways-you-can-style-divis-testimonial-module-46 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Upload Image

Continue by uploading an image in the image settings.

5-fantastic-ways-you-can-style-divis-testimonial-module-47 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Disable Quote Icon

Next, disable the quote icon.

  • Show Quote Icon: No

5-fantastic-ways-you-can-style-divis-testimonial-module-48 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Disable Background Color

Disable the background color as well.

  • Use Background Color: No

5-fantastic-ways-you-can-style-divis-testimonial-module-49 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Body Text Settings

Continue by going to the design tab and make some changes to the body text settings.

  • Body Font: Abril Fatface
  • Body Text Color: #000000
  • Body Text Size: 20px

5-fantastic-ways-you-can-style-divis-testimonial-module-50 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Text Module to Column 1

Add Content

The second module we’ll need in column 1 is a Text Module. Add the testimonial copy to the content box.

5-fantastic-ways-you-can-style-divis-testimonial-module-51 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Then, go to the design tab and add some custom top and bottom margin.

  • Top Margin: 50px
  • Bottom Margin: 50px

5-fantastic-ways-you-can-style-divis-testimonial-module-52 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Image Module to Column 1

Upload Company Logo

The third and last module we’ll need in column one is an Image Module. You can use this module to add the company logo related to the testimonial.

5-fantastic-ways-you-can-style-divis-testimonial-module-53 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Clone All Modules & Place Duplicates in Column 2

Once you’re done modifying all modules in column 1, you can go ahead and clone them. Once you do, place the duplicates in the second column.

5-fantastic-ways-you-can-style-divis-testimonial-module-54 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Testimonial Image & Copy

Make sure you change the content of the testimonial along with the images.

5-fantastic-ways-you-can-style-divis-testimonial-module-55 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Recreate Example #4

5-fantastic-ways-you-can-style-divis-testimonial-module 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Section

On to the fourth example! Add a new section to your page.

5-fantastic-ways-you-can-style-divis-testimonial-module-56 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Row

Column Structure

Continue by adding a new row to your section using the following column structure:

5-fantastic-ways-you-can-style-divis-testimonial-module-57 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Column 1 Background Image

Open the row settings and add a background image to the first column.

  • Column 1 Background Image Repeat: No Repeat

5-fantastic-ways-you-can-style-divis-testimonial-module-58 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Column 3 Background Image

Do the same for the third column.

  • Column 3 Background Image Repeat: No Repeat

5-fantastic-ways-you-can-style-divis-testimonial-module-59 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Sizing

Then, go to the sizing settings and make some changes.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

5-fantastic-ways-you-can-style-divis-testimonial-module-60 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Remove the default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

5-fantastic-ways-you-can-style-divis-testimonial-module-61 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Testimonial Module to Column 1

Add Content

Continue by adding a Testimonial Module to the first column. Once you do, add the testimonial details.

5-fantastic-ways-you-can-style-divis-testimonial-module-62 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Gradient Background

Give the module a gradient background as well.

  • Color 1: #8b32ff
  • Color 2: #ff35ae
  • Gradient Direction: 120deg

5-fantastic-ways-you-can-style-divis-testimonial-module-63 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Quote Icon Settings

Then, make some changes to the icon settings.

  • Quote Icon Color: #000000
  • Quote Icon Background Color: #ffffff

5-fantastic-ways-you-can-style-divis-testimonial-module-64 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Text Settings

And change the text color in the text settings.

  • Text Color: Light

5-fantastic-ways-you-can-style-divis-testimonial-module-65 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

To give the module a squared shape, we’re going to add some custom padding in the spacing settings.

  • Top Padding: 100px
  • Bottom Padding: 100px
  • Left Padding: 100px
  • Right Padding: 100px

5-fantastic-ways-you-can-style-divis-testimonial-module-66 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Box Shadow

You’ll also want to add some depth to the testimonial by using a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: #ff35ae

5-fantastic-ways-you-can-style-divis-testimonial-module-67 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Default Filter

The idea behind this testimonial is that once you hover it, the testimonial disappears and the image shows up. To achieve this effect, we’re going to use the opacity filter in the filters settings. Make sure the default opacity is ‘100%’.

  • Opacity: 100%

5-fantastic-ways-you-can-style-divis-testimonial-module-68 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Hover Filter

And remove all opacity on hover.

  • Opacity: 0%

5-fantastic-ways-you-can-style-divis-testimonial-module-69 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Clone Testimonial Module to Column 3

Once you’re done modifying the Testimonial Module in column 1, clone it and place the duplicate in the third column.

5-fantastic-ways-you-can-style-divis-testimonial-module-70 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Gradient Background

Change the gradient background of the duplicate next.

  • Color 1: #32b0ff
  • Color 2: #89009e
  • Gradient Direction: 120deg

5-fantastic-ways-you-can-style-divis-testimonial-module-71 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Clone Row

And clone the entire row.

5-fantastic-ways-you-can-style-divis-testimonial-module-72 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Remove Testimonial Gradient Background & Change Background Color

The next thing you will need to do is remove the gradient background of the Testimonial Modules and use a white background color instead.

  • Background Color: #ffffff

5-fantastic-ways-you-can-style-divis-testimonial-module-73 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Testimonial Text Settings

Once you’ve removed the gradient background, you can change the text color in the text settings.

  • Text Color: Dark

5-fantastic-ways-you-can-style-divis-testimonial-module-74 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Recreate Example #5

5-fantastic-ways-you-can-style-divis-testimonial-module-3 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Section

On to the next and last example of this tutorial! Add a new regular section to your page.

5-fantastic-ways-you-can-style-divis-testimonial-module-75 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Background Color

Change the background color of the section.

  • Background Color: #ededed

5-fantastic-ways-you-can-style-divis-testimonial-module-76 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add New Row

Column Structure

Then, add a new row using the following column structure:

5-fantastic-ways-you-can-style-divis-testimonial-module-77 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Sizing

Make some changes to the sizing settings as well.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 2

5-fantastic-ways-you-can-style-divis-testimonial-module-78 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Text Module to Column 1

Add Content

Continue by adding a Text Module to the first column. Add the testimonial copy to the content box.

5-fantastic-ways-you-can-style-divis-testimonial-module-79 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Background Color

And change the background color of the module.

  • Background Color: #ffffff

5-fantastic-ways-you-can-style-divis-testimonial-module-80 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Text Settings

Then, go to the design tab and change the text orientation in the text settings.

  • Text Orientation: Center

5-fantastic-ways-you-can-style-divis-testimonial-module-81 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Add some custom margin values as well.

  • Left Margin: 50px (Desktop & Tablet), 20px (Phone)
  • Right Margin: 50px (Desktop & Tablet), 20px (Phone)

5-fantastic-ways-you-can-style-divis-testimonial-module-82 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Add Testimonial Module to Column 1

Add Content

Right below the Text Module, you can go ahead and add a Testimonial Module. Fill in the author name, job title and company name fields.

5-fantastic-ways-you-can-style-divis-testimonial-module-83 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Upload Image

Upload an image in the image settings as well.

5-fantastic-ways-you-can-style-divis-testimonial-module-84 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Gradient Background

And add a gradient background.

  • Color 1: #5b32ff
  • Color 2: #32e5f2
  • Gradient Direction: 100deg

5-fantastic-ways-you-can-style-divis-testimonial-module-85 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Quote Icon Settings

Continue by going to the design tab and changing the quote icon settings.

  • Quote Icon Color: #000000
  • Quote Icon Background Color: #ffffff

5-fantastic-ways-you-can-style-divis-testimonial-module-86 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Text Settings

Change the text orientation in the text settings as well.

  • Text Orientation: Center
  • Text Color: Light

5-fantastic-ways-you-can-style-divis-testimonial-module-87 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Body Text Settings

Next, play around with the body text settings.

  • Body Font Weight: Ultra Bold
  • Body Font Style: Uppercase
  • Body Text Size: 15px
  • Body Letter Spacing: -0.5px
  • Body Line Height: 2.1em

5-fantastic-ways-you-can-style-divis-testimonial-module-88 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Spacing

Add some negative top margin to create the overlap between this module and the Text Module.

  • Top Margin: -25px

5-fantastic-ways-you-can-style-divis-testimonial-module-89 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Box Shadow

And finish the testimonial design by giving the Testimonial Module a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

5-fantastic-ways-you-can-style-divis-testimonial-module-90 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Clone Both Modules Twice & Place Duplicates in Remaining Columns

Once you’re done modifying the modules in column 1, you can clone them twice and place the duplicates in the two remaining columns.

5-fantastic-ways-you-can-style-divis-testimonial-module-91 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Testimonial Content & Images

Make sure you change the content and images that are used in the modules.

5-fantastic-ways-you-can-style-divis-testimonial-module-92 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Change Testimonial Gradient Backgrounds

Along with the gradient backgrounds.

  • Color 1: #a632ff
  • Color 2: #f7a131

5-fantastic-ways-you-can-style-divis-testimonial-module-93 5 Fantastic Ways You Can Style Divi’s Testimonial Module

  • Color 1: #3281ff
  • Color 2: #2cf483

5-fantastic-ways-you-can-style-divis-testimonial-module-94 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Preview

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

Desktop

5-fantastic-ways-you-can-style-divis-testimonial-module 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Mobile

5-fantastic-ways-you-can-style-divis-testimonial-module-1 5 Fantastic Ways You Can Style Divi’s Testimonial Module

Final Thoughts

In this post, we’ve shown you 5 fantastic ways you can style the Divi Testimonial Module. We’ve guided you through the tutorial step by step and created testimonials that you can use on basically any website you’re working on. If you have any questions or suggestions, make sure you leave a comment in the comment section below.

SEO News and More

SEO News and More

Share This