Testimonials Widget Tutorial

Intro

Premium Testimonials Widget allows you to add user testimonials to your website along with image, name, and more. The widget has many additional styling options, with no coding knowledge required.

Click here to check Premium Testimonials Widget demo.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Also, make sure that this widget/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

• Author
• Company
• Content

1. Author

• Image: Choose an image for the author, upload or select a custom image from the WordPress Media Library. The author’s image is displayed at the top, above the testimonial content.
• Image Style: Select from the following styles
  • Square
  • Circle
  • Rounded
• Name: Enter the author’s name. The author’s name is displayed at the bottom, below the testimonial content.
• HTML Tag: Select which HTML tag will be used to display the author’s name. Choose between H1 to H6, where H1 is the largest and H6 is the smallest. The default is “H3”.

2. Company

• Name: Enter the name of the company that the author represents. The Company name will be displayed beside the author name.
• HTML Tag: Select which HTML tag that will be used to display the author name. Choose between H1 to H6, where H1 is the largest and H6 is the smallest. The default is H4.
• Link: You can enable or disable a link for the company name. When enabled, you can enter the link URL and select the link target. Choose from blank, parent, self and top.

Blank: The link will be loaded in a new window.
Parent: The link will be loaded in the parent frame-set.
Self: The link will be loaded in the same frame as it was clicked.
Top: The link will be loaded in the full body of the window.

3. Content

Testimonial Content: You can add the content of the testimonial in the Rich Text editor.

Style

• Image
• Author
• Company
• Content
• Quotation Icon
• Container

1. Image

• Size: Set the image size in pixels or em.
• Border Width: Set the border width in pixels.
• Color: Pick a color for the image border.

2. Author

• Color: Pick a color for the author’s name.
• Typography: Adjust font settings.
• Divider Color: Pick a color for the dash which separate between the author name and the company name.

3. Company

• Color: Pick a color for company name text.
• Typography: Adjust font settings as per your needs.

4. 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 %.

5. Quotation Icon

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

6. Container

Background Type: Select a background type for the container. You can select a solid background color, a gradient background color, select or upload an image via the WordPress Media Library. If an image is selected, the following options become available:

• Position:
  • Default
  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right
  • Custom -Adjust the image’s X and Y positions using pixels, em % or vw.
• Attachment: Default, Scroll or Fixed.
• Repeat:
  • Default
  • No-repeat
  • Repeat
  • Repeat-x
  • Repeat-y
• Size:
  • Default
  • Auto
  • Cover
  • Contain
  • Custom -Adjust the image width using pixels, em % or vw.
• Border Type: elect between the following border types, as well as the color and the width of the border on each side of the widget:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border-radius will add circular corners to the container. You can adjust the border-radius in pixels, % or em.
• 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.