Testimonials Element
The Testimonials Element shows quotes from customers or partners, one at a time, in a slider that changes automatically. Each quote carries the name of the person, the company with an optional link and an avatar. Visitors can also move between the quotes with navigation bullets.
Real statements from people who have worked with you build trust, especially near a contact form, on service pages or next to a price list. Two designs, a speech bubble option and full control over colors, borders and typography let the quotes match the rest of the page.
In this article: How To Use · Element Options · Testimonial Options · Tips · Related Elements · Example
How To Use The Testimonials Element
Add the Testimonials Element to a column and create one Testimonial per quote. Enter the Name, the Company with an optional Link, the Testimonial Content and choose an Avatar: a male or female icon, your own image or none.
On the General tab of the element choose the Design. Classic shows the quote in a box with an optional speech bubble triangle, and each Testimonial can be aligned left or right. Clean centers the quote in larger text, and each Testimonial places its avatar above or below the quote. Set Testimonials Speed for the time each quote is shown, turn on Navigation Bullets and, if you like, Random Order.
The Design tab controls the background, the border size, style, color and radius, the typography and colors of the quote and of the name and company line, and the size and color of the navigation bullets. Settings left empty or on Default follow the Testimonials section of Global Options.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Testimonials. Change them there to style every Testimonials at once.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this testimonial element. |
| Design | Choose a design for the element. |
| Navigation Bullets | Select to show navigation bullets. |
| Testimonials Speed | Set the speed of the testimonial slider. for example 1000 = 1 second. IMPORTANT: Setting speed to 0 will disable autoplay for testimonials slider. |
| Random Order | Turn on to display testimonials in a random order. |
| Margin | Enter values including any valid CSS unit, for example 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, for example 10px. |
| Testimonial Speech Bubble Style | Enable or disable the testimonial speech bubble triangle. |
| Testimonial Typography | Controls the testimonial text typography. |
| Testimonial Text Color | Controls the text color. |
| Name / Company Typography | Controls the name and company typography. |
| Name / Company Text Color | Controls the name / company text color. |
| Navigation Bullet Size | Controls the size of the navigation bullets. In pixels. |
| Navigation Bullet Color | Controls the color of the navigation bullets. |
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. |
Testimonial Options
Each Testimonial holds one quote with the name, company, link and avatar of its author, plus an optional background icon. Its alignment and avatar position depend on the design chosen for the element.
General
| Heading | Description |
|---|---|
| Name | Insert the name of the person. |
| Avatar | Choose which kind of Avatar to be displayed. |
| 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), for example 1px, or “round”. |
| 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. |
| Testimonial Content | Add the testimonial content. |
| Alignment | Controls the testimonial alignment. |
| Background Icon | Click an icon to select, click again to deselect. |
| Icon Alignment | Choose the alignment of the icon on the testimonial. |
Tips
- Set Testimonials Speed to 0 to stop the automatic change; visitors then use the navigation bullets. Turn the bullets on in that case.
- Give readers enough time: longer quotes need a higher speed value than the default of 4 seconds.
- Use real quotes with the person’s permission, and name the company where you can. Anonymous praise convinces far less.
- Testimonial Speech Bubble Style is only available for the Classic design, Avatar Position only for the Clean design.
- For a custom avatar use a square, cropped face photo with the face in the middle, so it stays recognizable when it is shown small or with rounded corners.