Divi Builder

Before you can add a testimonial module to your page, you must first access Divi Builder. Once the Divi theme is installed on your website, you will notice a Use Divi Builder button above the post editor every time you create a new page. Click this button to activate Divi Builder and access all the modules it offers. Then click on the Use Visual Builder button to launch the builder in visual mode. You can also click the Activate Visual Builder button when browsing your foreground website if you are logged into your WordPress dashboard.

Once you have entered Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside rows. If you are starting a new page, remember to add a row to your page first.

Locate the testimonial module in the list of modules and click on it to add it to your page. The list of modules is searchable, which means you can also type “testimonial” and then press enter to automatically search and add the testimonial module! Once the module is added, you will be greeted by the module options list. These options are separated into three main groups: Content, Design, and Advanced.

Divi Builder

Use case example: Testimonial section for a product page

Adding a testimonial section is one of the best ways to promote your product or service. For this example, I’ll show you how to use the Testimonial module to create a testimonial section at the bottom of a landing page to promote your product or service. The title of the testimonial section is “Happy Customers”. It is important to have an effective title that is both creative and relevant. All three testimonials are short in a three-column layout followed by a CTA button at the bottom of the page.

To add the testimonial section to the page, use the visual builder to add a standard section with a row of three columns. Then add a testimonial module to the first column in your row.

Update the Testimonial module settings with the following:

Content tab

Author name: [enter name] Article title: [enter title] Company name: [enter company] Content: [enter testimonial content] Portrait Image URL: [download 90 × 90 image] Quote icon :

Design tab

Text color: Light Text
orientation:
Body Body Font: Roboto Light
Body Font size: 20px
Body line height: 1.5em

Now that you have created your first testimonial mod, duplicate it twice and drag the duplicated mods to fill the second and third columns.

Since all the design parameters have been transferred to the duplicate modules in the second and third row, you just need to go back and update the contents of each one.

That’s all.

The content parameters of the Testimonial module

The settings on the content tab are organized into groups that you can open to view more options. This makes it much easier for you to find the setting you are looking for. You can also use the search bar at the top to search all the settings tabs at once for the setting you are looking for. It will get you straight to the point!

Text

This is where you can add the name of the testimonial author, the article title, the company, and the content of the testimonial itself.

Picture

If you have a profile photo or other type of image to accompany your testimonial, this is where you’ll add it.

Link

Here you can add the author or company URL and control its opening.

Elements

Here you can choose to make the quote icon visible or hidden.

context

Here you can choose to add a background color or an image to your testimonial.

Admin Label

In this drop-down list, you can add an admin label that will appear in the Divi Builder on the dashboard, as well as on the visual builder view.

Read more:

Divi Tutorial: How to use the Divi Text module

The design parameters of the testimonial module

The settings on the Design tab are organized into the following groups to make it easier to find the setting you want. And remember, you can also use the search bar to find an even faster setting!

Quote icon

This is where you can adjust the color of the quote icon.

Portrait

The portrait settings allow you to adjust the border-radius, portrait width, and portrait height for the image you may have added in the Content tab.

Text

These settings allow you to change the color and orientation of the text.

The body of the text

These settings allow you to adjust the font, weight, size, color, spacing, line height, and more.

Frontier

Here you can choose to use a border. And if you choose to use a border, you can also select its color, change its width, and choose its style.

Spacing

In the spacing area, you can add custom fill to the top, right, bottom, or left of the testimonial. You can also change these values ​​for desktops, tablets, or mobile devices.

The advanced parameters of the Testimonial module

In the Advanced tab of your testimonial module, you can add an ID (identifier) ​​and a unique CSS class. You can also add custom CSS to various predefined (and preselected) CSS selectors in the custom CSS dropdown video slider module. Finally, in the Visibility drop-down list, you can adjust the visibility of your module on phones, tablets, and desktops.

 

For website maintenance service contact us.

Leave a comment

echo "";