Customize testimony module

Customize testimony module divi: The only thing visitors always look for on a website are testimonials. They represent the credibility and influence the decision-making process of potential customers when visiting your website.

Along with making sure you have a strong customized testimonials module to share, their visual appeal also plays an important role. In this tutorial, we are going to show you 3 fantastic ways to Customize testimony module divi using only the built-in options.

Customize testimony module

Customize testimony module Divi

Office

Add a new section

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

Add a new row

Column structure

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

Customize testimony module

Sizing

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

  • Make this line full width: Yes
  • Use custom gutter width: Yes
  • Gutter width: 1

Add an image module to column 1

Upload Image

It’s time to start adding modules! The first module we will need is an Image module in column 1. Go ahead and upload a square image of your choice.Filters

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

  • Saturation: 40%
  • Contrast: 126%

Add a button module to column 1

Add a copy

The second and last module that we will need in column 1 is a button module. Add a copy of choice.

Button settings

Then go to button settings and change the look 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

Spacing

Also add custom spacing values.

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

Shadow box

And finish with a subtle box shadow.

  • Box Shadow Blur Force: 80px
  • Shadow color: rgba (0,0,0,0,3)

Add a testimonial module to column 2

Add content

In the second column, the only module we will need is a Customize testimony module.  Add content to the different fields and to the content area.

Background color

Then add a slightly transparent background color.

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

Testimonial Icon Settings

Change the settings for the testimonial icon as well.

  • Testimonial Icon Color: # 0c0c0c
  • Testimonial icon background-color: rgba (245,245,245,0)

Body text parameters

Then change the body text settings.

  • Police Corps: Verdana
  • Body height: 1.7em

Spacing

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

  • Top margin: 15vw (desktop and tablet), 0vw (phone)
  • Bottom margin: 50px (tablet and phone)
  • Left margin: -10vw (desktop and tablet), 0vw (phone)
  • Right margin: 5vw
  • Top padding: 70px
  • Bottom padding: 70px
  • Left padding: 50px
  • Right Padding: 50px

Frontier

Also add a left border.

  • Left border width: 7px
  • Left border color: # 5400ff

Shadow box

Finally, add a subtle box-shadow to shape the testimonial module.

  • Box Shadow Blur Force: 80px
  • Box shadow propagation force: -10px
  • Shadow color: rgba (0,0,0,0,49)

Clone the two modules and place the duplicates in columns 3 and 4

Once you are done modifying the modules in columns 1 and 2, you can clone them and place the duplicates in the remaining two columns.

Change image

Don’t forget to change the image of your second Customize testimony module

Change the gradient background

Also change the gradient background of the button.

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

Change the color of the testimonial border

And associate the color of the border with the gradient background of the new button.

  • Left border-color: # ff001d

create example # 2

Add a new section

Let’s move on to the second example! Add a new regular section to your page.

Add a new row

Column structure

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

testimony module

Sizing

Continue by opening the row settings and changing the sizing settings.

  • Make this line full width: Yes
  • Use custom gutter width: Yes
  • Gutter width: 1

Spacing

Then add custom padding values ​​to the row and columns.

  • Padding on the left: 200px (desktop), 30px (tablet), 25px (phone)
  • Right padding: 200px (desktop), 30px (tablet), 25px (phone)
  • Column 1 Padding on the left: 5px (desktop), 0px (tablet and phone)
  • Column 1 Right padding: 2.5px (desktop), 0px (tablet and phone)
  • Column 2 Padding on the left: 2.5px (desktop), 0px (tablet and phone)
  • Column 2 Right padding: 2.5px (desktop), 0px (tablet and phone)
  • Column 3 Padding on the left: 2.5px (desktop), 0px (tablet and phone)
  • Column 3 Right padding: 5px (desktop), 0px (tablet and phone)

Add a video module to column 1

Video link

The first module we will need in column 1 is a video module. Link this video to your testimonial video.

Image overlay

Also, add an image overlay.

Add a testimonial module to column 1

Add content

The second and final module needed in column 1 is a testimonial module. Start by adding the details of the testimonial.

Disable the testimonial icon

Next, turn off the testimonial icon in item settings.

  • Show testimonial icon: No

Background color

Then add a white background.

  • Background color: #ffffff

Body text parameters

Change the body text settings as well.

  • Text Body Color: # 000000
  • Body letter spacing: -0.5px
  • Body height: 1.7em

Spacing

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

  • Bottom margin: 30px (tablet and phone)
  • Padding: 50px
  • Bottom padding: 50px
  • Left padding: 80px
  • Right Padding: 80px

Frontier

We also give the module rounded corners at the bottom left and right ’30px’.

Shadowbox

Finally, to give depth, we give the Testimonial module a subtle box-shadow.

  • Box Shadow Blur Force: 80px
  • Box shadow propagation force: -10px
  • Shadow color: rgba (0,0,0,0,3)

Clone modules three times and place duplicates in the remaining columns

Once you are done modifying the two modules in column 1, clone them twice and place the duplicates in the remaining two columns

Edit video links, content, and image overlays

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

create example # 3

Add a new section

Let’s move on to the third example! Add a new regular section to your page.

Add a new row

Column structure

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

Customize testimony 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

Column 2 Background color

The second column will need a white background.

  • Column 2 Background color: #ffffff

Sizing

Then go to sizing settings and delete the gutter width.

  • Use custom gutter width: Yes
  • Gutter width: 1

Spacing

Add custom spacing values ​​next.

  • Best padding: 0px
  • Bottom Padding: 0px
  • Left padding: 0px
  • Right Padding: 0px
  • Column 1 Top Padding: 100px
  • Column 1 Bottom padding: 100px
  • Column 1 Padding on the left: 50px
  • Column 1 Right padding: 50px
  • Column 2 Top Padding: 100px
  • Bottom padding of column 2: 100px
  • Column 2 Padding on the left: 50px
  • Column 2 Right padding: 50px

Frontier

And give each of the borders ’20px’.

Shadowbox

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

  • Box Shadow Blur Force: 80px

Add a testimonial module to column 1

Add content

It’s time to start adding modules! The first module we will need in column 1 is a testimonial module. Add content.

Upload Image

Continue by uploading an image in the image settings.

Disable the testimonial icon

Then turn off the testimonial icon.

  • Show testimonial icon: No

Disable background color

Also turn off the background color.

  • Use background color: No

Body text parameters

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

  • Police Corps: Abril Fatface
  • Text Body Color: # 000000
  • Body text size: 20px

Add a text module to column 1

Add content

The second module we will need in column 1 is a text module. Add the testimonial copy to the content area.

Spacing

Then go to the Design tab and add custom top and bottom margins.

  • Top margin: 50px
  • Bottom margin: 50px

Add an image module to column 1

Download company logo

The third and last module we will need in the first column is an image module. You can use this module to add the company logo associated with the testimonial.

Clone all modules and place duplicates in column 2

Once you have finished modifying all the modules in column 1, you can copy and copy them. Once you’ve done that, place the duplicates in the second column.

Change the image and copy of the testimonial

Make sure to change the content of the testimonial with the pictures.

To finish Customize testimony module divi

That’s all for this tutorial, I hope it will allow you to offer several variations

 

For website maintenance service contact us.

Leave a comment

echo "";