The Testimonial Element is a professional, easy-to-use format to display social proof on your sites. It is a great way to get customers invested in your brand and improve their trust in your services, so let's check how to use it!

To start, access the funnel or website builder by editing a page of one of your sites.

Click the plus sign icon to access the element’s menu. Then locate the Testimonial Element, and drag it into place.

General Settings

Testimonials

In this section, you can control the content of your Testimonials. Click the trash can icon (1) to remove them, click the pencil icon (2) to edit them, or click + Add Testimonial (3) if you need one more testimonial card.

Inside the editing module, you can modify the details of the testimonial. These details consist of:

1. Content: This is the text that will be displayed as the review.
2. Star Rating: Use the one to five scale to show the level of satisfaction the customer expressed.
3. Name: To note who left the testimonial.
4. Caption: To provide more explanation on who the reviewer is.
5. Date: For when the review was received.
6. Profile Picture: If you have a display photo for the reviewer, add it here.
7. Profile URL and Business URL: To link any socials or sites relevant to the reviewer.
8. Logo: If the reviewers are working with a business, this is a great way to display it.

Once satisfied with your changes, click Done to save them.

Testimonial Settings

This section lets you control what's shown in the testimonials, to remove anything from display uncheck the box next to it.

Layout

This section lets you customize how the testimonials are displayed. You can pick between the three layout options.

The Columns (1) will determine how many testimonials are shown per line, and the spacing (2) will determine how close a testimonial is to the next.

Card Style

To customize the look of the testimonial card, head to this section. The options you have here are:

1. Card Layout: To define the order of the information inside the card.
2. Corner Radius: To round the corners of the testimonial card.
3. Rating Size: This controls the sizing of the star rating of your testimonial card if displayed.
4. Content and Author Font Size: To define the size of the text in your testimonial card.
5. Content and Author Font Family: To define the typography of the text in your testimonial card.

Size 

This section lets you define the Width of the Testimonial Element.

Color

This section lets you customize the colors of your Testimonial Element.

Style Settings

Spacing Option

There are different spacing options available to adjust your content. Depending on the Edit option you are working on, the settings will only apply to that option. For example, if you are editing a particular Row (the BLUE box), only the content in that Row will follow the command of what settings you make.

• Padding Left, Right, Top, and Bottom: These four (4) different toggle bars move the content to either the left, right, top, or bottom, depending on the toggle bar you click on. 
• Margin Top and Bottom: You can adjust the top or bottom margin of your content by toggling its bars.

Border Options

1. Border Thickness: When you increase the border number, it increases the thickness of the border.
2. Border Color: To change the color of the border, click on this color icon.
3. Corner Radius: Adjusting the radius of your border curves the edges of the border; the higher the number you select, the curvier it becomes.
4. Border Style: There are three (3) Different styles for your border. It could be a Solid, Dashed, or Dotted border.

Shadow

Use this option to add a shadow effect to the entire element. Adjust the shadow’s blur, spread, and color to create depth.

Visibility

You can make this page visible on both desktop and mobile, and you can also select just one of the two by simply clicking on the one you want to activate.

Custom Class

To add a Custom Class, simply fill in the Custom Class field with your desired class name.

CSS Selector

Click on the copy icon located on the right side of the reference number you wish to copy to copy the CSS Selector.

This element helps you increase your credibility and reinforce brand trust by showcasing your client feedback without relying on workarounds or external design tools.