Elementor Testimonials Widget Tutorial

Premium Testimonials Widget allows you to add single or Multiple user testimonials to your website along with images, names, and more content fields. The widget has many styling options that give you the ability to customize the widget to fit your design.

Requirements:

• You will need the Premium Addons free plugin installed and activated on your website.
• Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Testimonial
• Display Options

Testimonial

• Multiple Testimonials: Enable this option if you need to add multiple testimonials.

Single Testimonial

• Author:
  • Image: Add the author’s image.
  • Name: Add the author’s name.

• Content:
  • Heading: You can leave this field empty if it’s not needed.
  • Job: Add the author’s job title.
  • Link: If enabled, you can add a link to the job text.
  • Rating Score: Add a rating score between 1-5 or you can leave this field empty if it’s not needed.
  • Content: Here you can add a paragraph in addition to headings and images.

Multiple Testimonials

• Testimonials:
  • Image: Add the author’s image.
  • Heading: You can leave this field empty if it’s not needed.
  • Name: Add the author’s name.
  • Job: Add the author’s job title.
  • Link: If enabled, you can add a link to the job text.
  • Rating Score: Add a rating score between 1-5 or you can leave this field empty if it’s not needed.
  • Content: Here you can add a paragraph in addition to headings and images.
• Carousel: Enable this option to show the testimonials inside a carousel.
  • Auto Play.
  • Autoplay Speed.
  • Arrows Position.

Display Options

• Choose Skin: Choose between 4 premade skins. (Note that skin 2 & 3 & 4 available only for PRO)
• Show Author Image: Keep it disabled if you don’t want the author’s image to be displayed. (Available for skin 1 & 2 & 3 only)
• Image Position (For Skin 1): Set the image position to be relative or absolute top or absolute bottom.
• Image Position (For Skin 2 and 3): Set the image position to be before or after info.
• Stars Position: Set the rating position to be above or below text. (Available for skin 2 & 3 only)
• Name HTML Tag: Set the HTML tag for the name field, it can be a heading, paragraph, span, or div.
• Job HTML Tag: Set the HTML tag for the job field, it can be a heading, paragraph, span, or div.
• Quotation Skin: Choose the quotation skin to be sharp or rounded.
• Members/Row: Set the number of testimonials per row. (Available when the Multiple Testimonials option is enabled)
• Spacing: Set spacing around the testimonials in (PX), (%), or (em). (Available when the Multiple Testimonials option is enabled)
• Equal Height: This option searches for the testimonial with the largest height and applies that height to the other testimonials. (Available when the Multiple Testimonials option is enabled)

Style

• Author Image
• Heading
• Author
• Jop
• Rating Score
• Content
• Quotation Icon
• Carousel
• Container

Author Image

• Size: Set the image size in pixels or em.
• Border Type: Set the border type, width, and color.
• Border Radius: Set the border width in pixels, em, or %.
• CSS Filers: Apply CSS filters on the image in the normal state.
• Hover CSS Filers: Apply CSS filters on the image in the hover state.

Heading

• Color: Pick a color for the heading text.
• Typography: Adjust font settings.
• Text Shadow.
• Margin.

Author

• Color: Pick a color for the author’s name.
• Typography: Adjust font settings.
• Text Shadow.
• Margin.

Job

• Alignment: Align the text to the top, center, or bottom.
• Color: Pick a color for the job name text.
• Typography: Adjust font settings.
• Text Shadow.
• Margin.

Rating Score

• Star Size: Set the star size in pixels.
• Star Color.
• Empty Star Color.
• Margin.

Content

• Color: Pick a color for content text.
• Typography: Adjust font settings to fit your needs.
• Margin: Margin is the space between the testimonial content and the edge of the container, the image, and the names. Adjust the margins in pixels, em, or %.

Quotation Icon

• Color: Pick a color for the icons.
• Size: Set icon size in pixels, %, or em.
• Top and Bottom Icon Positions: Set two icon positions in pixels, em or %.

Carousel

• Color: Pick the arrow icon color in the normal state.
• Hover Color: Pick the arrow icon color in the hover state.
• Size: Set icon size in pixels, %, or em.
• Background Color: Pick the arrow’s icon background color in the normal state.
• Background Hover Color: Pick the arrow’s icon background color in the hover state.
• Border Radius.
• Padding: Set spacings around the arrow.

Container

• Alignment: Align the container to the left, center, or right.
• Background Type.
• Border Type.
• Border Radius: Increasing the border-radius will add circular corners to the container. You can adjust the border-radius in pixels, %, or em.
• Advanced Border Radius: Apply custom radius values for the Testimonials widget container. Get the radius value from here.
• Box Shadow: You can add a shadow around the widget with this option by adjusting the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset
• Padding: Padding is the space between the edge of the container and the testimonial and text inside it. Adjust the padding using pixels, %, or em.

Conclusion

Testimonial Widget For Elementor is a perfect solution to show your testimonials on your website in a unique and creative way with a lot of customization options.

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.