Add Testimonial Slider to a page using Reviewer

Get a testimonial slider with the Reviewer WordPress plugin quickly and easily. The main purpose of the plugin is to create a block with customer reviews for your products or services. At the same time, flexible plugin settings allow using the slider for different purposes. You are free to add any content for each slide using TinyMCE editor and upload an image from the media library. The Reviewer is the perfect solution for displaying rated reviews, team members, specific products, images, services, offers, and so on.

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 testimonial slider widget, you can add content for the slides and manage the basic carousel settings.

Testimonials

The block for managing the content of reviews/sliders. The items can be added, removed or duplicated.

Slides list of the Testimonial Slider

To add a new slide, click “Add Item” and fill all the necessary fields:

  • Author – enter the author name of the review into the text field
  • Author align – manage the author text alignment (left, center, right, justify).
  • Author separator – enter the character that will be used as a separator for the author.
  • Author link – specify the link that will be applied to the text in the Author field.
  • Author tag – select one of the available tags from the list for the author text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
  • Company – enter the company name of the review into the text field
  • Company align – manage the company text alignment (left, center, right, justify).
  • Company link – specify the link that will be applied to the text in the Company field.
  • Company tag – select one of the available tags from the list for the company text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
  • Description – a text field with TinyMCE editor for entering a slider description.
  • Description align – manage the description text alignment (left, center, right, justify).
  • Rating count – specify the rating you want to display in the current slider with the review.
  • Rating icon – select the icon for the rating using the icon library or upload your own icon in SVG format.
  • Rating align – manage the rating block alignment (left, center, right)
  • Author Image – select an author photo/image for the current slider with the review.
  • Custom size – an option that allows specifying custom width and height of the uploaded author image in different units(px,%).
  • Image Size – choose one of the available sizes for the uploaded author image.
  • Alignment – manage the image block alignment (left, center, right).

Slide Layout

Set slide layout elements according to your needs. The items can be added, removed or duplicated.

The list of slide layout elements

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

Layout item settings 

Carousel

A block with general settings of the reviews carousel.

General carousel settings
  • Slides switching mode – select one of the available slide switching modes: To Left, To Right, To Bottom, To Top, Fade.
  • Autoplay speed – specify the speed of slides scrolling in seconds. The option is applied when the Autoplay mode is on.
  • Transition speed – specify the speed of slides transition in seconds.
  • Slides to show – specify the number of slides to display per one screen for different devices.
  • Slides to scroll – specify the number of slides to scroll.
  • Infinite loop – the toggle to enable/disable infinite scrolling of the carousel.
  • Show navigation arrows – the toggle to enable/disable the navigation arrows
  • Center mode – the toggle to enable/disable the center mode.
  • Show dots – the toggle to enable/disable the navigation dots.
  • Autoplay – the toggle to enable/disable autoplay mode for the carousel.
  • Pause on hover – the toggle to enable/disable the pause on hover feature.

Arrows

Manage the icons for navigation arrows.

  • Previous arrow – select the icon for the previous arrow using the icon library or upload your own icon in SVG format.
  • Next arrow – select the icon for the next arrow using the icon library or upload your own icon in SVG format.

Dots

Manage the icons for navigation dots.

  • Dot icon – select the icon for the nav dots using the icon library or upload your own icon in SVG format.
  • Active dot icon – select the icon for the active nav dots using the icon library or upload your own icon in SVG format.

Style tab

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

Slide

General settings of the carousel slides.

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

The slide style settings for different states.

  • 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.

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.

  • Separator color(available for Author) – specify the color and opacity of the separator 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.

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.

Arrows

  • 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.
  • Arrows size – specify the size of the nav arrows in different units(px, %).
NORMAL/HOVER

The arrows 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.

Dots

  • 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.
  • Dots size – specify the size of the nav dots in pixels.
  • Space between dots – specify the space between nav dots in pixels.
NORMAL/HOVER

The dots 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.

Was this article helpful to you?