Testimonials Element

Last Update: August 11, 2026

The Testimonials Element allows you to add beautifully styled testimonials anywhere to your site easily. Testimonials are the perfect way to present client feedback on your website. The Testimonials Element offers three design styles and four layouts, which makes it possible to create a huge variety of testimonials.

Watch the video below for a visual overview of the Element, view the Avada Testimonials Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Testimonials Element

The Avada Testimonials Element is a handy way of adding testimonials to your page content. There are both Parent Options, which affect the whole series of testimonials (if you have more than one), while you can also configure and style the individual testimonials. This Element has a huge range of options, starting with three designs. Once you have chosen your design, there are four layouts and a huge range of General and Design options for you to configure.

Apart from the Parent Options, there are the Child Items. Click the pencil icon to edit the existing item, and the Child Item Options Panel appears. This is where you add the content for the individual testimonials. Here, you can add the person’s name, title and company, choose an avatar (including the option to upload your own image), and the actual testimonial content.

You can then set up other testimonials, either by duplicating existing ones or creating new testimonials, by clicking on the Clone Item icon or the + Testimonials button, respectively. Read below for a description of all element options.

Parent Element Options

Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Testimonials Elements section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Design		Choose a design for the element.
Layout		Choose how the testimonials are arranged. Fade Slider: one testimonial at a time with a cross-fade. Carousel: multiple sliding testimonials. Marquee: a continuously scrolling ticker of testimonials. Grid: a static grid ("wall of love"), no slider.
Marquee Direction		Select the direction the marquee scrolls.
Columns		Set the number of columns to display. Leave at 0 to fit all testimonials into a single row, up to a maximum of 6.
Column Gap		Controls the spacing between the columns / items. Enter a value including any valid CSS unit, ex: 30px. Leave empty for the default.
Column Vertical Alignment		Controls how the columns / items align vertically within their row.
Scroll Slides		Set how many testimonials the carousel advances at a time. The default of 1 keeps every testimonial readable as it comes into view.
Show Navigation		Choose to show navigation on the testimonials slider. Note: You can also set the CSS ID (e.g. my-id) for this Testimonials element and use #my-id-next, #my-id-prev as links on a Button element to navigate through the testimonials.
Autoplay		Choose to autoplay the testimonials slider.
Testimonials Speed		Set the speed of the testimonial slider. ex: 1000 = 1 second. IMPORTANT: Setting speed to 0 will disable autoplay for testimonials slider.
Pause Autoplay On Hover		Choose to pause the testimonials slider autoplay on hover.
Loop		Choose to enable continuous loop mode.
Mask Edges		Choose if the edges should be masked with a fade out effect. Navigation arrows will not be displayed, if masked edges are active.
Random Order		Turn on to display testimonials in a random order.
Margin		Enter values including any valid CSS unit, ex: 4%.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Testimonial Background Color		Controls the background color of the testimonial.
Testimonial Border Size		Controls the border size of the testimonial. In pixels.
Testimonial Border Style		Controls the border style of the testimonial.
Testimonial Border Color		Controls the border color of the testimonial.
Testimonial Border Radius		Enter values including any valid CSS unit, ex: 10px.
Box Shadow		Set to "Yes" to enable box shadows.
Box Shadow Position		Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur Radius		Set the blur radius of the box shadow. In pixels.
Box Shadow Spread Radius		Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow Color		Controls the color of the box shadow.
Box Shadow Style		Set the style of the box shadow to either be an outer or inner shadow.
Testimonial Speech Bubble Style		Enable or disable the testimonial speech bubble triangle.
Speech Bubble Triangle Size		Controls the size of the speech bubble triangle. Enter a value including any valid CSS unit, ex: 12px. Leave empty to scale with the testimonial text size.
Testimonial Typography		Controls the testimonial text typography.
Testimonial Text Color		Controls the text color.
Name / Base Typography		Controls the name typography. Also used as the base for the role / company, unless the separate Role / Company Typography below is set.
Name / Base Text Color		Controls the name text color. Also used as the base for the role / company, unless the separate Role / Company Text Color below is set.
Role / Company Typography		Optionally controls the role / company typography separately from the name. Falls back to the Name / Base Typography when left empty.
Role / Company Text Color		Optionally controls the role / company text color separately from the name. Falls back to the Name / Base Text Color when left empty.
Box Padding		Controls the inner padding of the testimonial box / card. Enter values including any valid CSS unit, ex: 2em. Leave empty for the default (which scales with the text size on the classic / clean designs).
Card Content Alignment		Controls the alignment of the content inside the card.
Card Content Vertical Alignment		Controls how the card content is distributed vertically in equal-height cards.
Author Block Position		Controls where the author block (avatar and author details) sits in relation to the rating / quote. "Above" and "Below" stack it vertically; "Left" and "Right" place it beside the rating / quote in a split layout.
Author Side Width		Controls the width of the author side in the split (Left / Right) card layout. Enter a value including any valid CSS unit, ex: 35%. Leave empty to size to the content.
Author Block Gap		Controls the space between the author block and the quote. Enter a value including any valid CSS unit, ex: 2em. Leave empty for the automatic default, which allows for the speech bubble triangle and avatar size where applicable.
Author Avatar Position		Controls where the author avatar sits in relation to the name / details.
Author Block Distribution		Controls how the avatar and the author details are distributed. "Space Between" pushes them to opposite ends of the row.
Author Avatar Gap		Controls the spacing between the avatar and the author details / content. Enter a value including any valid CSS unit, ex: 10px. Leave empty to use the default spacing.
Author Details Layout		Controls how the author title / role and company display in relation to the name. "Inline" keeps everything on one comma-separated line; "Stacked" puts the name on its own line with the title / company beneath.
Rating Position		Controls where the star rating appears. "With Author" places it inside the author block.
Maximum Rating		Select the maximum possible star rating. Ratings are set per testimonial.
Rating Icon		Click an icon to select, click again to deselect. Used for the star rating.
Rating Icon Size		Enter value including any valid CSS unit, ex: 20px.
Rating Filled Color		Select the color of the filled rating icons.
Rating Empty Color		Select the color of the empty rating icons.
Initials / Icon Background Color		Controls the background color of the initials and icon avatars.
Initials / Icon Color		Controls the color of the letters and of the icon in the initials and icon avatars.
Background Icon Color		Controls the color of the background icon set on individual testimonials. Leave empty to use the testimonial text color at a reduced opacity.
Background Icon Size		Controls the size of the background icon set on individual testimonials. Enter a value including any valid CSS unit, ex: 40px. Leave empty to use the default value of 2em.
Arrow Box Dimensions		Controls the width and height of the arrow box. Enter values including any valid CSS unit.
Arrow Icon Size		Set the arrow icon size. Enter value including any valid CSS unit, ex: 14px.
Previous Icon		Click an icon to select, click again to deselect.
Next Icon		Click an icon to select, click again to deselect.
Arrow Position		Controls the position of the arrows. Enter value including any valid CSS unit, ex: 14px.
Arrow Border Radius		Enter values including any valid CSS unit, ex: 10px.
Arrows Styling
Arrow Background Color		Controls the background color of the arrows.
Arrow Icon Color		Controls the color of the arrow icons.
Dots Position		Controls the position of the navigation dots.
Dots Alignment		Controls the alignment of the navigation dots.
Dots Spacing		In pixels.
Dots Margin		In pixels or percentage, ex: 10px or 10%.
Dots Styling
Size		Controls the size of the navigation dots. In pixels.
Color		Controls the color of the navigation dots.
Size		Controls the size of the active navigation dot. In pixels. Leave empty to use the regular dot size.
Color		Controls the color of the active navigation dot. Leave empty to use the regular dot color.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.

Child Element Options

Heading		Description
Name		Insert the name of the person.
Title / Role		Insert the title or role of the person, e.g. "CEO". Displayed alongside the company.
Company		Insert the name of the company.
Link		Add the URL the company name will link to.
Link Target		Controls how the link will open.
Avatar		Choose which kind of Avatar to be displayed.
Avatar Icon		Select the icon to show in the avatar. It uses the same size and colors as the initials avatar.
Custom Avatar		Upload a custom avatar image.
Avatar Position		Controls whether the Avatar will be shown above or below the testimonial content.
Avatar Size		Set the size of the testimonial avatar.
Avatar Border Radius		Choose the radius of the testimonial avatar. In pixels (px), ex: 1px, or "round".
Rating		Enter a star rating for this testimonial, e.g. 4.5. Leave empty to hide the rating. The maximum rating and star styling are set on the parent element.
Rating Text		Optional text shown next to the star rating, e.g. "For Features Availability". Shown below the stars in the clean design. Leave empty to hide.
Testimonial Content		Add the testimonial content.
Testimonial Side		Controls which side the testimonial sits on. Alternate Left / Right across testimonials for a conversation-style wall.
Background Icon		Click an icon to select, click again to deselect.
Icon Alignment		Choose the side the icon sits on. In the Card design the icon follows the Card Content Alignment set on the parent, so this control is only shown for the Classic design.