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.

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 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 name is displayed at the bottom, below the testimonial content.
  • 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 “H3”.
Premium Testimonials Widget Main Settings

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.
Testimonial’s Company/Country Settings

3. Content

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

Add Testimonials Content Using Elementor’s Testimonials Widget

Style

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

1. Image

  • Size: Select the image size in pixels or em.
  • Border Width: Select the border width in pixels.
  • Color: Set the image border color.
Author’s Image Customization Settings

2. Author

  • Color: Select the text color for the author name.
  • Typography: Adjust font settings.
  • Divier Color: Select the color of the dash which separate between the author name and the company name.
Author’s Name Styling Settings

3. Company

  • Color: Select the text color of the company name.
  • Typography: Adjust font settings as per your needs.
Company/Country Styling Settings

4. Content

  • Color: Select the text color of the content.
  • 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 %.
Testimonials Main Content Customization Settings

5. Quotation Icon

  • Color: Select the color and opacity for the icons.
  • Size: Select the size of the icons in pixels, % or em.
  • Top and Bottom Icon Positions: Select the positions of the two icons in pixels, em or %.
Testimonials Quotation Icons Styling Settings

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.
Testimonials Main Container Settings