The only factor guests all the time move in search of on a web page is testimonials. They constitute credibility and affect the decision-making procedure leads or attainable shoppers have when visiting your web page. But even so ensuring you’ve sturdy testimonials to proportion, making them visually interesting performs a very powerful position as smartly. On this publish, we’re going to turn you 5 incredible techniques you’ll be able to taste the Divi Testimonial Module whilst the use of the integrated choices handiest.

Let’s get to it!

Preview

Prior to we dive into the academic, let’s check out the outcome on other display screen sizes.

Desktop

 

divi testimonial module

Cell

 

divi testimonial module

Recreate Instance #1

divi testimonial module

Upload New Segment

Let’s get started with the primary instance! Create a brand new web page and upload a standard segment.

divi testimonial module

Upload New Row

Column Construction

Proceed via including a brand new row the use of the next column construction:

divi testimonial module

Sizing

With out including any modules but, open the row settings and make some adjustments to the Sizing settings.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

divi testimonial module

Upload Symbol Module to Column 1

Add Symbol

Time to begin including modules! The primary module we’ll want is an Symbol Module in column 1. Cross forward and add a squared symbol of selection.

divi testimonial module

Filters

Then, move to the filters settings and mess around with the other results.

  • Saturation: 40%
  • Distinction: 126%

divi testimonial module

Upload Button Module to Column 1

Upload Reproduction

The second one and closing module we’ll want in column 1 is a Button Module. Upload some replica of selection.

divi testimonial module

Button Settings

Then, move to the button settings and make some adjustments to the semblance of your button.

  • Use Customized Kinds for Button: Sure
  • Button Textual content Dimension: 14px
  • Colour 1: #5400ff
  • Colour 2: #00fff6
  • Gradient Route: 100deg
  • Button Border Width: 0px
  • Font Weight: Extremely Daring
  • Font Taste: Uppercase

divi testimonial module

divi testimonial module

Spacing

Upload some customized spacing values as smartly.

  • Best Padding: 10px
  • Backside Padding: 10px
  • Left Padding: 30px
  • Proper Padding: 30px

divi testimonial module

Field Shadow

And end off with a refined field shadow.

  • Field Shadow Blur Energy: 80px
  • Shadow Colour: rgba(0,0,0,0.3)

divi testimonial module

Upload Testimonial Module to Column 2

Upload Content material

In the second one column, the one module we’ll want is a Testimonial Module. Upload some content material to the other fields and the content material field.

divi testimonial module

Background Colour

Subsequent, upload a rather clear background colour.

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

divi testimonial module

Quote Icon Settings

Trade the quote icon settings as smartly.

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

divi testimonial module

Frame Textual content Settings

Then, regulate the frame textual content settings.

  • Frame Font: Verdana
  • Frame Line Peak: 1.7em

divi testimonial module

Spacing

Proceed via including other customized margin and padding values within the spacing settings.

  • Best Margin: 15vw (Desktop &  Pill), 0vw (Telephone)
  • Backside Margin: 50px (Pill & Telephone)
  • Left Margin: -10vw (Desktop & Pill), 0vw (Telephone)
  • Proper Margin: 5vw
  • Best Padding: 70px
  • Backside Padding: 70px
  • Left Padding: 50px
  • Proper Padding: 50px

divi testimonial module

Border

Upload a left border as smartly.

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

divi testimonial module

Field Shadow

Finally, upload a refined field shadow to form the Testimonial Module.

  • Field Shadow Blur Energy: 80px
  • Field Shadow Unfold Energy: -10px
  • Shadow Colour: rgba(0,0,0,0.49)

divi testimonial module

Clone Each Modules & Position Duplicates in Column 3 & 4

Whenever you’re completed editing the modules in column 1 and a pair of, you’ll be able to clone the modules and position the duplicates within the two final columns.

divi testimonial module

Trade Symbol

Don’t omit to switch the picture of your 2d testimonial.

divi testimonial module

Trade Button Gradient Background

Trade the button gradient background as smartly.

  • Colour 1: #ff001d
  • Colour 2: #3700ff
  • Gradient Route: 100deg

divi testimonial module

Trade Testimonial Border Colour

And fit the border colour to the brand new button gradient background.

  • Left Border Colour: #ff001d

divi testimonial module

Recreate Instance #2

divi testimonial module

Upload New Segment

Directly to the second one instance! Upload a brand new common segment on your web page.

divi testimonial module

Upload New Row

Column Construction

With out making any adjustments to the segment, upload a brand new row the use of the next column construction:

divi testimonial module

Sizing

Proceed via opening the row settings and making some adjustments to the sizing settings.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

divi testimonial module

Spacing

Subsequent, upload some customized padding values to the row and columns.

  • Left Padding: 200px (Desktop), 30px (Pill), 25px (Telephone)
  • Proper Padding: 200px (Desktop), 30px (Pill), 25px (Telephone)
  • Column 1 Left Padding: 5px (Desktop), 0px (Pill & Telephone)
  • Column 1 Proper Padding: 2.5px (Desktop), 0px (Pill & Telephone)
  • Column 2 Left Padding: 2.5px (Desktop), 0px (Pill & Telephone)
  • Column 2 Proper Padding: 2.5px (Desktop), 0px (Pill & Telephone)
  • Column 3 Left Padding: 2.5px (Desktop), 0px (Pill & Telephone)
  • Column 3 Proper Padding: 5px (Desktop), 0px (Pill & Telephone)

divi testimonial module

Upload Video Module to Column 1

Video Hyperlink

The primary module we’ll want in column 1 is a Video Module. Hyperlink this video on your testimonial video.

divi testimonial module

Symbol Overlay

Upload an Symbol Overlay as smartly.

divi testimonial module

Upload Testimonial Module to Column 1

Upload Content material

The second one and closing module wanted in column 1 is a Testimonial Module. Get started via including the testimonial main points.

divi testimonial module

Disable Quote Icon

Then, disable the quote icon within the components settings.

  • Display Quote Icon: No

divi testimonial module

Background Colour

Upload a white background subsequent.

  • Background Colour: #ffffff

divi testimonial module

Frame Textual content Settings

Regulate the frame textual content settings as smartly.

  • Frame Textual content Colour: #000000
  • Frame Letter Spacing: -0.5px
  • Frame Line Peak: 1.7em

divi testimonial module

Spacing

And upload some customized margin and padding values within the spacing settings.

  • Backside Margin: 30px (Pill & Telephone)
  • Best Padding: 50px
  • Backside Padding: 50px
  • Left Padding: 80px
  • Proper Padding: 80px

divi testimonial module

Border

We’re additionally giving the module backside left and proper rounded corners ’30px’.

divi testimonial module

Field Shadow

And finally, to create some intensity, we’re giving the Testimonial Module a refined field shadow.

  • Field Shadow Blur Energy: 80px
  • Field Shadow Unfold Energy: -10px
  • Shadow Colour: rgba(0,0,0,0.3)

divi testimonial module

Clone Modules 3 Instances & Position Duplicates in Ultimate Columns

Whenever you’re completed editing each modules in column 1, clone them two times and position the duplicates within the two final columns.

divi testimonial module

Trade Video Hyperlinks, Content material & Symbol Overlays

Don’t omit to switch the video hyperlink, content material and symbol overlays of your new testimonials.

divi testimonial module

Recreate Instance #3

divi testimonial module

Upload New Segment

Directly to the 3rd instance! Upload a brand new common segment on your web page.

divi testimonial module

Upload New Row

Column Construction

Proceed via including a brand new row the use of the next column construction:

divi testimonial module

Column 1 Background Colour

Then, move to the background settings and upload a background colour to the primary column.

  • Column 1 Background Colour: #f9f9f9

divi testimonial module

Column 2 Background Colour

The second one column will want a white background colour.

  • Column 2 Background Colour: #ffffff

divi testimonial module

Sizing

Then, move to the sizing settings and take away the gutter width.

  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

divi testimonial module

Spacing

Upload some customized spacing values subsequent.

  • Best Padding: 0px
  • Backside Padding: 0px
  • Left Padding: 0px
  • Proper Padding: 0px
  • Column 1 Best Padding: 100px
  • Column 1 Backside Padding: 100px
  • Column 1 Left Padding: 50px
  • Column 1 Proper Padding: 50px
  • Column 2 Best Padding: 100px
  • Column 2 Backside Padding: 100px
  • Column 2 Left Padding: 50px
  • Column 2 Proper Padding: 50px

divi testimonial module

Border

And provides each and every some of the borders ’20px’.

divi testimonial module

Field Shadow

Final however now not least, give your row a field shadow.

  • Field Shadow Blur Energy: 80px

divi testimonial module

Upload Testimonial Module to Column 1

Upload Content material

Time to begin including modules! The primary module we’ll want in column 1 is a Testimonial Module. Upload the content material.

divi testimonial module

Add Symbol

Proceed via importing a picture within the symbol settings.

divi testimonial module

Disable Quote Icon

Subsequent, disable the quote icon.

  • Display Quote Icon: No

divi testimonial module

Disable Background Colour

Disable the background colour as smartly.

  • Use Background Colour: No

divi testimonial module

Frame Textual content Settings

Proceed via going to the design tab and make some adjustments to the frame textual content settings.

  • Frame Font: Abril Fatface
  • Frame Textual content Colour: #000000
  • Frame Textual content Dimension: 20px

divi testimonial module

Upload Textual content Module to Column 1

Upload Content material

The second one module we’ll want in column 1 is a Textual content Module. Upload the testimonial replica to the content material field.

divi testimonial module

Spacing

Then, move to the design tab and upload some customized most sensible and backside margin.

  • Best Margin: 50px
  • Backside Margin: 50px

divi testimonial module

Upload Symbol Module to Column 1

Add Corporate Emblem

The 3rd and closing module we’ll want in column one is an Symbol Module. You’ll be able to use this module so as to add the corporate brand associated with the testimonial.

divi testimonial module

Clone All Modules & Position Duplicates in Column 2

Whenever you’re completed editing all modules in column 1, you’ll be able to move forward and clone them. Whenever you do, position the duplicates in the second one column.

divi testimonial module

Trade Testimonial Symbol & Reproduction

You should definitely alternate the content material of the testimonial along side the pictures.

divi testimonial module

Recreate Instance #4

divi testimonial module

Upload New Segment

Directly to the fourth instance! Upload a brand new segment on your web page.

divi testimonial module

Upload New Row

Column Construction

Proceed via including a brand new row on your segment the use of the next column construction:

divi testimonial module

Column 1 Background Symbol

Open the row settings and upload a background symbol to the primary column.

  • Column 1 Background Symbol Repeat: No Repeat

divi testimonial module

Column 3 Background Symbol

Do the similar for the 3rd column.

  • Column 3 Background Symbol Repeat: No Repeat

divi testimonial module

Sizing

Then, move to the sizing settings and make some adjustments.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1
  • Equalize Column Heights: Sure

divi testimonial module

Spacing

Take away the default most sensible and backside padding subsequent.

  • Best Padding: 0px
  • Backside Padding: 0px

divi testimonial module

Upload Testimonial Module to Column 1

Upload Content material

Proceed via including a Testimonial Module to the primary column. Whenever you do, upload the testimonial main points.

divi testimonial module

Gradient Background

Give the module a gradient background as smartly.

  • Colour 1: #8b32ff
  • Colour 2: #ff35ae
  • Gradient Route: 120deg

divi testimonial module

Quote Icon Settings

Then, make some adjustments to the icon settings.

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

divi testimonial module

Textual content Settings

And alter the textual content colour within the textual content settings.

  • Textual content Colour: Mild

divi testimonial module

Spacing

To provide the module a squared form, we’re going so as to add some customized padding within the spacing settings.

  • Best Padding: 100px
  • Backside Padding: 100px
  • Left Padding: 100px
  • Proper Padding: 100px

divi testimonial module

Field Shadow

You’ll additionally wish to upload some intensity to the testimonial via the use of a refined field shadow.

  • Field Shadow Blur Energy: 80px
  • Field Shadow Unfold Energy: -10px
  • Shadow Colour: #ff35ae

divi testimonial module

Default Clear out

The theory at the back of this testimonial is that when you hover it, the testimonial disappears and the picture displays up. To succeed in this impact, we’re going to make use of the opacity filter out within the filters settings. Be certain the default opacity is ‘100%’.

  • Opacity: 100%

divi testimonial module

Hover Clear out

And take away all opacity on hover.

  • Opacity: 0%

divi testimonial module

Clone Testimonial Module to Column 3

Whenever you’re completed editing the Testimonial Module in column 1, clone it and position the reproduction within the 3rd column.

divi testimonial module

Trade Gradient Background

Trade the gradient background of the reproduction subsequent.

  • Colour 1: #32b0ff
  • Colour 2: #89009e
  • Gradient Route: 120deg

divi testimonial module

Clone Row

And clone all the row.

divi testimonial module

Take away Testimonial Gradient Background & Trade Background Colour

The following factor it is important to do is take away the gradient background of the Testimonial Modules and use a white background colour as an alternative.

  • Background Colour: #ffffff

divi testimonial module

Trade Testimonial Textual content Settings

Whenever you’ve got rid of the gradient background, you’ll be able to alternate the textual content colour within the textual content settings.

  • Textual content Colour: Darkish

divi testimonial module

Recreate Instance #5

divi testimonial module

Upload New Segment

Directly to the following and closing instance of this educational! Upload a brand new common segment on your web page.

divi testimonial module

Background Colour

Trade the background colour of the segment.

  • Background Colour: #ededed

divi testimonial module

Upload New Row

Column Construction

Then, upload a brand new row the use of the next column construction:

divi testimonial module

Sizing

Make some adjustments to the sizing settings as smartly.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 2

divi testimonial module

Upload Textual content Module to Column 1

Upload Content material

Proceed via including a Textual content Module to the primary column. Upload the testimonial replica to the content material field.

divi testimonial module

Background Colour

And alter the background colour of the module.

  • Background Colour: #ffffff

divi testimonial module

Textual content Settings

Then, move to the design tab and alter the textual content orientation within the textual content settings.

  • Textual content Orientation: Heart

divi testimonial module

Spacing

Upload some customized margin values as smartly.

  • Left Margin: 50px (Desktop & Pill), 20px (Telephone)
  • Proper Margin: 50px (Desktop & Pill), 20px (Telephone)

divi testimonial module

Upload Testimonial Module to Column 1

Upload Content material

Proper underneath the Textual content Module, you’ll be able to move forward and upload a Testimonial Module. Fill within the writer title, task name and corporate title fields.

divi testimonial module

Add Symbol

Add a picture within the symbol settings as smartly.

divi testimonial module

Gradient Background

And upload a gradient background.

  • Colour 1: #5b32ff
  • Colour 2: #32e5f2
  • Gradient Route: 100deg

divi testimonial module

Quote Icon Settings

Proceed via going to the design tab and converting the quote icon settings.

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

divi testimonial module

Textual content Settings

Trade the textual content orientation within the textual content settings as smartly.

  • Textual content Orientation: Heart
  • Textual content Colour: Mild

divi testimonial module

Frame Textual content Settings

Subsequent, mess around with the frame textual content settings.

  • Frame Font Weight: Extremely Daring
  • Frame Font Taste: Uppercase
  • Frame Textual content Dimension: 15px
  • Frame Letter Spacing: -0.5px
  • Frame Line Peak: 2.1em

divi testimonial module

Spacing

Upload some unfavourable most sensible margin to create the overlap between this module and the Textual content Module.

  • Best Margin: -25px

divi testimonial module

Field Shadow

And end the testimonial design via giving the Testimonial Module a refined field shadow.

  • Field Shadow Blur Energy: 80px
  • Shadow Colour: rgba(0,0,0,0.3)

divi testimonial module

Clone Each Modules Two times & Position Duplicates in Ultimate Columns

Whenever you’re completed editing the modules in column 1, you’ll be able to clone them two times and position the duplicates within the two final columns.

divi testimonial module

Trade Testimonial Content material & Pictures

You should definitely alternate the content material and pictures which are used within the modules.

divi testimonial module

Trade Testimonial Gradient Backgrounds

Along side the gradient backgrounds.

  • Colour 1: #a632ff
  • Colour 2: #f7a131

divi testimonial module

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

divi testimonial module

Preview

Now that we’ve long gone via all of the steps, let’s take a last have a look at the outcome on other display screen sizes.

Desktop

divi testimonial module

Cell

divi testimonial module

Ultimate Ideas

On this publish, we’ve proven you 5 incredible techniques you’ll be able to taste the Divi Testimonial Module. We’ve guided you in the course of the educational step-by-step and created testimonials that you’ll be able to use on principally any web page you’re operating on. In case you have any questions or ideas, make sure to depart a remark within the remark segment underneath.

The publish 5 Fantastic Ways You Can Style Divi’s Testimonial Module seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]