Testimonial

The Testimonial element presents quotes from customers as a grid or a carousel. Each item holds an author name, a role or company, the quote itself, a star rating, an author photo and a company logo, and every one of those parts can be switched off for the whole set at once.

Adding the element

Add an element in the YOOtheme Pro builder and pick Testimonial from the Planckie Elements group. The builder starts you with three example items so the layout is visible immediately.

The element renders only when at least one item carries content. An element whose items are all empty produces nothing on the page.

Content

Option	Description
Items	The testimonials themselves.
Show the author name	Hides or shows that part across every item.
Show the author meta	As above.
Show the quote	As above.
Show the avatar image	As above.
Show the rating	As above.
Show the logo	As above.

The six switches hide content without deleting it. Turning the logo off empties the logo of every item for rendering only; switch it back on and the logos return. It is the fastest way to try a leaner card without touching the content you already entered.

Testimonial items

Option	Description
Author Name	Who said it.
Author Meta	Role, company or anything else that qualifies the quote.
Quote	The testimonial text.
Rating	0 to 5 stars. Default 5. Set it to 0 to hide the rating on this item alone.
Author Image	Optional photo, with its own alt text and focal point.
Logo	Optional company or publication logo, with its own alt text.
Style	Overrides the panel style for this item. Inherit follows the element.

An item with nothing in it is skipped, so a spare item left blank does no harm.

Settings

Display

Display Mode decides everything below it: Grid lays the items out in columns, Carousel puts them in a UIkit slider. The groups that do not apply to the chosen mode disappear from the panel.

Grid

Column Gap, Row Gap, Divider and Alignment, plus a column count per breakpoint under Columns: Phone Portrait, Phone Landscape, Tablet Landscape, Desktop and Large Screens. Each one takes a fixed number of columns or Auto, and the breakpoints above inherit from the ones below unless you set them.

Defaults are one column on phones and three from tablet landscape up.

Slider, Item Width and Animation

Item Width Mode chooses between fixed responsive widths, set per breakpoint like the grid columns, and widths that follow the item content. Sets, Center, Finite and Velocity map onto the UIkit slider options of the same names. Autoplay runs the carousel on its own, with an interval in seconds and a switch for pausing on hover.

Navigation and Slidenav

Option	Description
Navigation	A dotnav under the carousel, or none. Its position, margin and the breakpoint above which it appears are separate settings.
Slidenav	Previous and next arrows. Default and Outside place them relative to the carousel, and the corner options pin them inside it. A larger style, a hover-only mode, a margin and two breakpoints refine that.

Panel

Style covers card and tile variants from the active theme style, or a blank panel. Padding, Max Width and Height — which matches the height of every card in a row — belong here too.

Author Name, Author Meta and Author

Text style, color and the HTML element used for each of the two lines, plus the margin above the author block as a whole. The HTML element matters for the document outline: the default is a div, so a testimonial does not enter the heading structure of the page unless you decide it should.

Author Image

Size — Small at 40px, Medium at 56px or Large at 72px — and a border that can be rounded, a circle or a pill. The image is cropped to a square, with the focal point set per item.

Quote

Text style, color, the margin above and a Border, which draws the vertical quote line of the active theme style.

Rating

Position above or below the quote, the star color, whether inactive stars are outlined or filled, and the margin above.

Logo

Position above or below the card content, a maximum height in pixels and the margin above.

Quote Mark

A decorative icon above the quote, off by default. Pick any icon from the library, size it, give it a margin and either a color from the theme style or your own.

Accessibility

Option	Description
ARIA Label	Names the set for assistive technology, for example What our clients say. Left empty, it reads Testimonials.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-testimonial-item, .pe-testimonial-author-name, .pe-testimonial-author-meta, .pe-testimonial-quote, .pe-testimonial-rating, .pe-testimonial-author, .pe-testimonial-author-image, .pe-testimonial-logo, .pe-testimonial-quote-mark, .pe-testimonial-nav, .pe-testimonial-slidenav

Two settings travel to CSS as custom properties, so you can override them per breakpoint or per context:

Property	Meaning
--pe-testimonial-rating-color	Color of the active stars.
--pe-testimonial-logo-height	Maximum logo height.

Accessibility and keyboard

Both layouts are exposed as a list, named by the ARIA Label field, so a screen reader announces how many testimonials there are before reading them. Each rating is an image with a text alternative that spells the value out — Rating: 4 out of 5 — rather than five separate star characters.

The carousel is the UIkit slider and keeps its keyboard behaviour: the navigation and the arrows are buttons that take focus in the normal tab order. When the operating system asks for reduced motion, the carousel stops animating its scroll and jumps instead.

Autoplay deserves a thought before you switch it on. Content that moves on its own is hard to read for some visitors, and it moves away from anyone who needs longer with it.

Notes and limits

• The element renders nothing until at least one item has content.
• The six Content switches apply to the whole set. To drop one part from a single testimonial, clear that field on the item, or set its rating to 0.
• Author images are cropped square. A focal point on the item decides which part survives the crop.
• Author Name and Author Meta default to div elements, which keeps testimonials out of the page heading outline. Change that only where the quote genuinely acts as a heading.