Testimonials are, without a doubt, a vital part of every website selling products or services. They provide your website with the social proof and credibility people need to form a positive impression about your company and/or product. In Divi, we have the Testimonial Module that specifically helps you showcase testimonials in a beautiful way. However, using the Testimonial Module isn’t the only way to go. You can, for instance, use the Slider Module to showcase testimonials as well.

In this post, we’re going to show you how to recreate a beautiful section that includes a Slider Module with testimonials. To follow along with this tutorial, the only things you’ll need are Divi’s built-in options and portrait images of the people who are putting the good word about your brand out there.

Result

Before we dive into the tutorial, let’s take a quick look at the example we’ll recreate, step by step, on different screen sizes.

On Desktop

testimonials

On Tablet

testimonials

On Mobile

testimonials

Start Recreating the Example

Add a New Standard Section

Background Color

The first you’ll need to do after adding a standard section to a new or existing page is choose ‘#e7e0d6’ as the background color of that section.

testimonials

Spacing

Then, move on to the Design tab and add the following custom padding to your section to increase the distance between the beginning and ending of the section and the row we’ll add next:

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

testimonials

Add a New Row

Column Structure

Once you’ve finished editing your section, add a new row to it with the following column structure:

testimonials

Background Color

Without adding any modules yet, open the row settings and add ‘#fcfaf2’ as the background color.

testimonials

Column 2 Background Color

Scroll down the same tab and give your second column the ‘#a2eaf2’ background color.

testimonials

Sizing

Next, move on to the Design tab, open the Sizing subcategory and use the following settings to increase the width of your row and remove the space between both columns:

  • Use Custom Width: Yes
  • Custom Width: 1200px
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

testimonials

Spacing

Then, open the Spacing subcategory within the Design tab and make use of the following custom padding:

  • Top, Right, Bottom & Left: 0px
  • Column 1 Bottom: 50px
  • Column 2 Bottom: 50px

testimonials

Box Shadow

Lastly, select the first premade Box Shadow and make the following modifications to it:

  • Box Shadow Spread Strength: -3px
  • Shadow Color: rgba(0,0,0,0.3)

Add Text Module #1 to the First Column

Text Settings

Now that we’ve modified the row, we can start adding modules to the columns. The first module you’ll need to add to the first column is a Text Module. Once you add the content, move on to the Text subcategory within the Design tab and use the following settings for it:

  • Text Font: Allerta
  • Text Font Weight: Regular
  • Text Size: 22px
  • Text Color: #ffd870
  • Text Orientation: Left

testimonials

testimonials

Spacing

Scroll down the Design tab, open the Spacing subcategory and apply the following custom padding next:

  • Top Padding: 200px
  • Left Padding: 15.7%

testimonials

Add Text Module #2 to the First Column

Text Settings

After adding a second Text Module to the first column, apply the following settings to the Text subcategory:

  • Text Font: Allerta
  • Text Font Weight: Regular
  • Text Size: 93px (Desktop), 70px (Tablet), 60px (Phone)
  • Text Color: #433b7f
  • Text Line Height: 1.2em
  • Text Orientation: Left

testimonials

testimonials

Spacing

Add ‘15%’ to the left padding of this Text Module as well.

testimonials

Add Text Module #3 to the First Column

Text Settings

The last Text Module of the first column needs a center Text Orientation in the Text subcategory.

testimonials

Sizing

After you’ve put the Text Orientation to left in the Text subcategory, open the Sizing subcategory and use ‘74%’ for the Width.

testimonials

Spacing

Lastly, add the following values to the Spacing subcategory of this Text Module:

  • Top Margin: 50px
  • Left Padding: 15,7%

testimonials

Add a Button Module to the First Column

Button Settings

The last module within the first column is a Button Module. After adding the copy and link, move on to the Design tab and use the following settings for the Button subcategory:

  • Use Custom Styles for Button: Yes
  • Button Text Size: 15px
  • Button Text Color: #000000
  • Button Background Color: #a2eaf2
  • Button Border Width: 0px
  • Button Font: Allerta
  • Font Weight: Regular

testimonials

testimonials

Spacing

Then, open the Spacing subcategory and add the following values:

  • Top: 30px
  • Bottom: 70px
  • Left: 15.7%

testimonials

Add a Slider Module to the Second Column

Title Text Settings

Now that we’ve finished adding modules to the first column (and editing them), let’s move on to the second one. The first thing you’ll need to add to the second column is the Slider Module. We’ll use this module to showcase testimonials creatively. Before adding any sliders, we’ll modify the Slider Module in its total. These changes will apply to all the slides that will be added to this module. Go to the Design tab, open the Title Text subcategory and apply the following settings to the H2 tab:

  • Title Font: Allerta
  • Title Font Weight: Regular
  • Title Font Style: Italic
  • Title Text Alignment: Left

testimonials

Body Text Settings

Then, open the Body Text Subcategory and apply the following settings:

  • Body Font: Allerta
  • Body Font Weight: Regular
  • Body Text Alignment: Left
  • Body Text Color: #ffd870

testimonials

Spacing

Lastly, add ‘180px’ to the top and bottom padding within the Spacing subcategory.

testimonials

Slider Content

Now that you’ve made the general changes, go ahead and add the different testimonial sliders to the module. For each one of those, use Heading field for the testimonial itself and the Content box for the name of the person testifying.

testimonials

Slider Background Color Overlay

For each one of the sliders, add ‘#605550’ as the background color.

testimonials

Slider Background Image

Along with the background color, add a background image and apply ‘Multiply’ for the Background Image Blend.

testimonials

Add a Text Module to the Second Column

Text Settings

Now, add a Text Module right below the Slider Module you’ve created along with the following Text settings:

  • Text Font: Allerta
  • Text Font Weight: Bold
  • Text Size: 24px
  • Text Color: #3f3f3f
  • Text Line Height: 1.3em
  • Text Orientation: Left

testimonials

testimonials

Spacing

Lastly, add the following custom padding to this Text Module as well:

  • Top: 30% (Desktop), 20% (Tablet & Phone)
  • Bottom: 10%
  • Left: 10%

testimonials

Add a Button Module to the Second Column

Button Settings

The last thing you’ll need to add to the second column is a Button Module. After adding the copy and link, modify the Button subcategory according to the following settings:

  • Use Custom Styles for Button: Yes
  • Button Text Size: 15px
  • Button Text Color: #000000
  • Button Background Color: #ffd870
  • Button Border Width: 0px

testimonials

Spacing

To make the Button Module fit with the other Modules, use the following custom margin:

  • Bottom: 70px
  • Left: 10%

testimonials

Result

Now that we’ve gone through all the steps on how to use the Slider Module creatively for testimonials, let’s take a final look at the result on different screen sizes.

On Desktop

testimonials

On Tablet

testimonials

On Mobile

testimonials

Final Thoughts

In this post, we’ve shown you how to creatively use the Slider Module to include testimonials in one of your sections. This design can be used for any website in combination with your color palette of choice. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post How to Beautifully Use a Slider Module for Testimonials with Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico