Testimonial

In this article, we're going to discuss the Testimonial Element and its settings. The Testimonial Element can be used to add testimonials in pages created in either Cornerstone or Pro's Content Builder (can also be used in Footer and Header as well). So let's dive in!

  1. Testimonial Settings
  2. Citation Settings
  3. Graphic Settings
  4. Customize
  5. Summary

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 Element Add

Testimonial Settings

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

Testimonial Element Front

Content

Use this option to add the main testimonial content.

Testimonial Element Content

Setup

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

Testimonial Element Setup
  • 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.

Testimonial Element Flexbox
  • 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 elements to be laid in a reverse manner.
  • Wrap: Enable this option to wrap the Testimonial elements when there is not enough space in smaller devices.
  • Align Horizontal: Use this option to layout the Testimonial elements horizontally.
  • Align Vertical: Use this option to layout the Testimonial elements 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.

Testimonial Element Margin

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.

Testimonial Element Padding

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.

Testimonial Element Setup Border

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.

Testimonial Element Setup Border Radius

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.
Testimonial Element Setup Box Shadow

Text Format

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

Testimonial Text Format
  • 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.
Testimonial Text Format 2

Text Shadow

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

Testimonial Text Shadow
  • 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.

Testimonial Element Citation Setup

Flexbox

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

Testimonial Element Citation Flexbox
  • 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 elements 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.

Testimonial Element Citation Margin

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.

Testimonial Element Citation Padding

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.

Testimonial Element Citation Setup Border

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.

Testimonial Element Citation Setup Border Radius

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.
Testimonial Element Citation Setup Box Shadow

Text Format

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

Testimonial Element Citation Text Format
  • 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.
Testimonial Element Citation Text Format 2

Text Shadow

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

Testimonial Element Citation Text Shadow
  • 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.

Testimonial Element Graphic Setup
  • 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.

Testimonial Element Graphic Margin

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.

Testimonial Element Graphic 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.

Testimonial Element Graphic Icon Border

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.

Testimonial Element Graphic Icon Border Radius

Graphic Icon Box Shadow

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

Testimonial Element Graphic Icon Box Shadow
  • 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.

Testimonial Element Graphic Icon Text Shadow
  • 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.

Testimonial Graphic Image
  • 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.

Testimonial Primary Graphic Image
  • 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 section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

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.

See something inaccurate? Let us know