How to add Testimonials widget to a page

Testimonials widget is a great way to improve visitor confidence in your services, products, information on your site, as you can point out your benefits using fake reviews. Along with the fact that you get a beautiful review block, the Rich snippet markup can be added as well. This allows you to get rich search results for your site pages and attract more customers.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content tab

On the Content tab of the Testimonials widget, you can manage the basic settings of the box and each element.

Layout

Repeater list

Add layout elements and order them according to your needs.

Elements layout settings of the Testimoner widget

To add a new box element, click “Add Item” and select one of the available item types:  Author_image, Description, Author, Company, Rating.

Layout item settings of the Testimonials widget
Author item settings of the Testimonials widget

Description

The settings block for the description element of the reviews block.

Text area of the description settings
  • Description – enter the review into the text box with an editor.
  • Alignment – manage the current block alignment (left, center, right, justify).

Author image

The settings block for the image element of the reviews block.

Author photo block settings
  • Image – select an author photo/image for the review block.
  • Custom size – an option that allows specifying custom width and height of the uploaded image in different units(px,%).
  • Image Size – choose one of the available image sizes.
  • Alignment – manage the current block alignment (left, center, right)

Author

The settings block to enter the name of the reviewer.

Author name block settings
  • Author – enter the author into the text field.
  • Alignment – manage the current block alignment (left, center, right, justify).
  • Link – specify the link that will be applied to the text in the Author field.

Company

The settings block to enter the name of the company.

Company name block settings
  • Company – enter a name into the text field.
  • Alignment – manage the current block alignment (left, center, right, justify).
  • Link – specify the link that will be applied to the text in the Company field.

Rating

The settings block for the rating configuration.

Rating block settings
  • Rating count – specify the rating you want to display in the testimonials block.
  • Alignment – manage the current block alignment (left, center, right)
  • Rating icon – select the icon for the rating using the icon library or upload your own icon in SVG format.
  • Enable Rich Snippet – the toggle to enable/disable the Rich Snippets option. The function adds schema markup automatically for your rating block to display advanced results in Google Search. Read more about this https://developers.google.com/search/docs/data-types/faqpage

Style tab

On the style tab, you can manage the element styles of the testimonials widget like colors in different states, size, typography, borders, padding/margin, etc.

Description

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The description text style settings for different states.

  • Color– specify the font color and opacity of the text using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Author/Company

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Width – specify the width of the block in different units(px, %).
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The text style settings for different states.

  • Color– specify the font color and opacity of the text using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Author image

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER

The image style settings for different states.

  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Rating

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Rating icons size – specify the icon size(px) of the rating using the slider.
  • Space between icons – specify the space(px) between icons of the rating using the slider.
NORMAL/HOVER

The rating style settings for different states.

  • Active star color – specify the font color and opacity of the active star using the color picker.
  • Color– specify the font color and opacity of the text using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Was this article helpful to you?