The Testimonial Element is a clean, easy-to-use format for displaying social proof on your sites. It is a great way to get customers invested in your brand and build trust in your services, so let's look at 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) to add another testimonial card.

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

  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 context 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 you are happy with your changes, click Done to save them.

Testimonial Settings

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

Layout

This section lets you customise 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 customise the look of the testimonial card, head to this section. The options available 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.

Colour

This section lets you customise the colours 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 spacing settings you apply.

  • 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 Colour: To change the colour of the border, click on this colour 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 colour to create depth.

Visibility

You can make this page visible on both desktop and mobile, or select just one of the two by clicking on the option 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 build credibility and reinforce brand trust by showcasing client feedback without relying on workarounds or external design tools.