Testimonial

The Testimonial Element adds a testimonial on the page. To add the Testimonial Element, simply search for "Testimonial" and drag "Testimonial" to the canvas.

Testimonial Settings

The Testimonial settings contain options to fine-tune the testimonial portion of the Element.

Content

Use this option to add the main testimonial content.

Setup

The Setup section contains controls for the initial setup of the Testimonial.

• Base Font Size - Use this option to set the base font of the Testimonial.
• Width - Use this options to set the width of the Testimonial.
• Max Width - Use this options to set the maximum width of the Testimonial.
• Background - Use this option to set the background color of the Testimonial.

Flexbox

The Flexbox section contains controls to set the positioning of the Testimonial using the CSS Flexbox display.

• Child Placement: Use this option to decide if the items of the Testimonial Element should be laid out vertically (Column) or horizontally (Row).
• Reverse: Enabling this option will cause the Testimonial Element to be laid in a reverse manner.
• Wrap: Enable this option to wrap the Testimonial Element when there is not enough space in smaller devices.
• Align Horizontal: Use this option to layout the Testimonial Element horizontally.
• Align Vertical: Use this option to layout the Testimonial Element vertically.

Click here for more information about the Flexbox display.

Margin

Use this option to set the margin of the Testimonial. You can change the settings for all the sides of the Testimonial or modify them individually.

Padding

Use this option to set the padding of the Testimonial. You can change the settings for all the sides of the Testimonial or modify them individually.

Border

Use this option to set the border of the Testimonial. You can set the style, width and color of the border on all sides or each side individually.

Border Radius

Use this option to set a border-radius for the Testimonial. You can set the curve on all sides or set them individually.

Box Shadow

You can set a shadow over the Testimonial using the box-shadow control group.

• X-Offset - Use this option to set the X offset of the shadow in the Testimonial.
• Y-Offset - Use this option to set the Y offset of the shadow in the Testimonial.
• Blur - Use this option to set the intensity of the blur effect in the Testimonial.
• Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the Testimonial.
• Color - Use this option to set the color of the Testimonial shadow.

Text Format

You can use this control group to set the format of the text in the Testimonial.

• Font Family - Use this option to set the font of the Testimonial text.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.
• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible values are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Text Shadow

The text-shadow control group contains settings to set a text-shadow for the Testimonial text.

• X-Offset - Use this option to set the X offset of the text-shadow.
• Y-Offset - Use this option to set the Y offset of the text-shadow.
• Blur - Use this option to set the intensity of the blur effect in the text-shadow.
• Color - Use this option to set the color of the text-shadow.

Citation Settings

The Testimonial Element has the Citation section, which shows the information of the person providing the testimonial. Following is the settings to fine-tune the Citation section.

Setup

Use this option to set if the Citation should sit After or Before the Testimonial itself. Also, you can use the Background option to set a background color for the Citation section.

Flexbox

The Flexbox section contains controls to set the positioning of the Citation using the CSS Flexbox display.

• Child Placement: Use this option to decide if the items of the Citation should be laid out vertically (Column) or horizontally (Row).
• Reverse: Enabling this option will cause the Citation to be laid in a reverse manner.
• Wrap: Enable this option to wrap the Citation when there is not enough space in smaller devices.
• Align Horizontal: Use this option to layout the Citation horizontally.
• Align Vertical: Use this option to layout the Citation vertically.

Click here for more information about the Flexbox display.

Margin

Use this option to set the margin of the Citation. You can change the settings for all the sides of the Citation or modify them individually.

Padding

Use this option to set the padding of the Citation. You can change the settings for all the sides of the Citation or modify them individually.

Border

Use this option to set the border of the Citation. You can set the style, width and color of the border on all sides or each side individually.

Border Radius

Use this option to set a border-radius for the Citation. You can set the curve on all sides or set them individually.

Box Shadow

You can set a shadow over the Citation using the box-shadow control group.

• X-Offset - Use this option to set the X offset of the shadow in the Citation.
• Y-Offset - Use this option to set the Y offset of the shadow in the Citation.
• Blur - Use this option to set the intensity of the blur effect in the Citation.
• Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the Citation.
• Color - Use this option to set the color of the Citation shadow.

Text Format

You can use this control group to set the format of the text in the Citation.

• Font Family - Use this option to set the font of the Citation text.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.
• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible values are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Text Shadow

The text-shadow control group contains settings to set a text-shadow for the Citation text.

• X-Offset - Use this option to set the X offset of the text-shadow.
• Y-Offset - Use this option to set the Y offset of the text-shadow.
• Blur - Use this option to set the intensity of the blur effect in the text-shadow.
• Color - Use this option to set the color of the text-shadow.

Graphic Settings

The Testimonial Element has a graphic section which you can add an Icon or an Image for aesthetic purposes. Following is the settings to fine-tune the Graphic section.

Graphic Setup

The graphics setup control group gives you options to enable and set up the graphic icon of the Testimonial.

• Enable - Use this option to enable or disable the icon of the Testimonial.
• Type - Use this option to decide if the Testimonial graphic type should be Icon, or Image. There will be different control groups depending on the graphic type selection.
• Position: Use this option to decide if you want to have the graphic positioned near the Citation or outside the Testimonial Element.

Graphic Margin

Use this option to set the margin of the Testimonial graphic. You can change the settings for all the sides of the Testimonial graphic or modify them individually.

Graphic Icon

Use this option to fine-tune the graphics icon of the Testimonial. This option will show if you set the graphics type of the Testimonial to the icon.

• Font Size - Use this option to set the base font for the graphic icon of the Testimonial.
• Width & Height - Use these options to set the width and height of the Testimonial graphic icon.
• Primary Icon - Use this option to select the primary icon of the Testimonial graphic.
• Color - Use this option to set the color of the Testimonial graphic icon.
• Background - Use this option to set the background of the Testimonial graphic icon.

Graphic Icon Border

Use this option to set the border of the Testimonial graphic icon. You can set the style, width and color of the border on all sides or each side individually.

Graphic Icon Border Radius

Use this option to set a border-radius for the Testimonial graphic icon. You can set the curve on all sides or set them individually.

Graphic Icon Box Shadow

You can set a shadow over the Testimonial graphic icon using the box-shadow control group.

• X-Offset - Use this option to set the X offset of the shadow in the Testimonial.
• Y-Offset - Use this option to set the Y offset of the shadow in the Testimonial.
• Blur - Use this option to set the intensity of the blur effect in the Testimonial.
• Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the Testimonial.
• Color - Use this option to set the color of the Testimonial shadow.

Graphic Icon Text Shadow

The primary text-shadow control group contains settings to set a text-shadow for the Testimonial graphic icon.

• X-Offset - Use this option to set the X offset of the text-shadow.
• Y-Offset - Use this option to set the Y offset of the text-shadow.
• Blur - Use this option to set the intensity of the blur effect in the text-shadow.
• Color - Use this option to set the color of the text-shadow.

Graphic Image

This option will appear if you select the image as the graphic type.

• Max Width - Use this option to set the maximum width of the Testimonial graphic image.

Primary Graphic Image

The Graphic Image control group is to set the image for the Testimonial graphic.

• Retina & Dimensions - Retina support is enabled out the box. Click the Eye to disable the Retina support. Also supports options to set the width and height of the image.
• Source - The image to be used. Click to select an image from the WordPress media library or upload a new one.
• Alt Text - The alternative text for your image. Make sure to set this for screen readers!

Customize

The Customize pane consists of various features that allow you to take further control over your Element's styling and functionality:

• ID – Sets an HTML ID on the Element.
• Class – Sets an HTML Class on the Element.
• Element CSS – Use this feature for increased stylistic control of your Element, especially over nested markup. Click here for more detailed information on this feature, such as using $el to dynamically target the base tag, et cetera.
• Hide During Breakpoints – Hides the Element at different screen sizes when design alterations are needed. Click here for more information.
• Conditions – Adds / removes Elements from the page when certain criteria are met (e.g. “If a featured image is set...”). Click here for more information.
• Custom Attributes – Use this option to add custom HTML attributes to the root tag of the Element (e.g. data-info="123"). This can be particularly helpful when integrating with various scripts and libraries.

Demo

To see a live demo of the Testimonial Element click here.

Summary

To sum up, we've discussed the Testimonial Element. We've discussed that a Testimonial Element is an easy tool for adding testimonials on a page and we've learned how to change it's content and design and delved into details of the Testimonial Element settings.