The only thing the visiteurs always looking for a Website, these are testimonials. They represent credibility and influence the decision-making process of potential customers when visiting your Website.
Along with making sure you have strong testimonials to share, their visual appeal also plays an important role. In this tutorial, we are going to show you 3 fantastic ways to customize the Divi testimonial module using only the built-in options.
Preview
Before we dive into the tutorial, let's take a look at the end result in different screen sizes.
Office
Mobile
Recreate example # 1
Add a new section
Let's start with the first example! Create a new page and add a regular section.
Add a new line
Column structure
Continue adding a new row using the following column structure:
sizing
Without adding more modules, open the line parameters and make some changes to the sizing parameters.
- Make this line full width: Yes
- Use a custom gutter width: Yes
- Gutter width: 1
Add an image module to column 1
Download Image
It's time to start adding modules! The first mod that we will need is an Image mod in column 1. Go ahead and upload a square image of your choice.
filters
Then go to the filter settings and play with the different effects.
- Saturation: 40%
- Contrast: 126%
Add a button module to the 1 column
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 the button: Yes
- Button text size: 14px
- 1 color: # 5400ff
- 2 color: # 00fff6
- Gradient Direction: 100deg
- Width of the button border: 0px
- Font weight: Ultra Bold
- Font Style: uppercase
Spacing
Also add custom spacing values.
- Top Padding: 10px
- Bottom padding: 10px
- Left padding: 30px
- Upholstery Right: 30px
Shadow box
And finish with a subtle box shade.
- Box Shadow Blur Force: 80px
- Shadow color: rgba (0,0,0,0,3)
Add a testimonial module to the 2 column
Add content
In the second column, the only module we will need is a testimonial module. Add some contents to the different fields and the area of contents.
Background color
Then add a slightly transparent background color.
- Background color: rgba (255,255,255,0.96)
Testimonial Icon Settings
Also change the settings for the testimonial icon.
- Testimonial Icon Color: # 0c0c0c
- Testimonial icon background color: rgba (245,245,245,0)
Body text settings
Then change the body text settings.
- Body Font: 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
- Upholstery Right: 50px
Border
Also add a left border.
- Width of the left border: 7px
- Left border color: # 5400ff
Shadow box
Finally, add a subtle box shadow to shape the testimony module.
- Box Shadow Blur Force: 80px
- Box shadow propagation force: -10px
- Shadow color: rgba (0,0,0,0,49)
Clone both modules and place the duplicates in columns 3 and 4
Once you have finished editing the modules in the 1 and 2 columns, you can clone them and place the duplicates in the two remaining columns.
Change image
Don't forget to change the image of your second testimonial.
Change the gradient background
Also change the gradient background of the button.
- 1 color: # ff001d
- 2 color: # 3700ff
- Gradient Direction: 100deg
Change the color of the border of the testimony
And associate the color of the border with the gradient background of the new button.
- Left border color: # ff001d
Recreate 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 line
Column structure
Without making any changes to the section, add a new row using the following column structure:
sizing
Continue by opening the line parameters and changing the sizing parameters.
- Make this line full width: Yes
- Use a custom gutter width: Yes
- Gutter width: 1
Spacing
Then add custom fill values to the row and columns.
- Padding left: 200px (desktop), 30px (tablet), 25px (phone)
- Padding on the right: 200px (desktop), 30px (tablet), 25px (phone)
- 1 column Padding on the left: 5px (desktop), 0px (tablet and phone)
- 1 column Padding on the right: 2.5px (desktop), 0px (tablet and phone)
- 2 column Padding on the left: 2.5px (desktop), 0px (tablet and phone)
- 2 column Padding on the right: 2.5px (desktop), 0px (tablet and phone)
- 3 column Padding on the left: 2.5px (desktop), 0px (tablet and phone)
- 3 column Padding on the right: 5px (desktop), 0px (tablet and phone)
Add a video module to the 1 column
Video link
The first module that 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 the 1 column
Add content
The second and final module needed in column 1 is a testimony module. Start by adding the details of the testimonial.
Disable the testimonial icon
Then turn off the testimonial icon in item settings.
- Show testimonial icon: No
Background color
Add a white background then.
- Background color: #ffffff
Body text settings
Also change the body text settings.
- Body colored text: # 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
- Upholstery Right: 80px
Border
We also give the module rounded corners at the bottom left and right '30px'.
Shadow box
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 the modules three times and place the duplicates in the remaining columns
Once you have finished editing the two modules in the 1 column, clone them twice and place the duplicates in the two remaining columns.
Edit video links, content, and image overlays
Don't forget to change the video link, the contents and image overlays of your new testimonials.
Recreate 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 line
Column structure
Continue adding a new row using the following column structure:
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 the sizing parameters and remove the width of the gutter.
- Use a custom gutter width: Yes
- Gutter width: 1
Spacing
Add custom spacing values next.
- Best padding: 0px
- Upholstery Bottom: 0px
- Left padding: 0px
- Upholstery Right: 0px
- Column 1 Upper Padding: 100px
- Column 1 Bottom Padding: 100px
- Column 1 Padding left: 50px
- 1 column Padding on the right: 50px
- Column 2 Upper Padding: 100px
- Bottom padding of the 2 column: 100px
- Column 2 Padding left: 50px
- 2 column Padding on the right: 50px
Border
And give each of the borders '20px'.
Shadow box
Last but not least, give your line a box shadow.
- Box Shadow Blur Force: 80px
Add a testimonial module to the 1 column
Add content
It's time to start adding modules! The first module we will need in column 1 is a testimonial module. Add content.
Download 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 settings
Continue by going to the Design tab and make some changes to the body text settings.
- Body Police: Abril Fatface
- Body colored text: # 000000
- Body text size: 20px
Add a text module to the 1 column
Add content
The second module that 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.
- Upper margin: 50px
- Bottom margin: 50px
Add an image module to column 1
Download company logo
The third and final module that 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 the 2 column
Once you are done editing all of 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
Be sure to change the content of the testimony with the pictures.
Finally
That's all for this tutorial, I hope it will allow you to offer several variations
