1. Home
  2. Docs
  3. Carousel & Slider
  4. Testimonial Slider

Testimonial Slider SA Element

The Testimonial Slider is an impressive, lightweight, responsive testimonial slider element for Elementor Page Builder. This awesome slider element is for creating a responsive testimonial slider that includes an interactive carousel and testimonial contents to make it simple yet eye-catching. It is a fully responsive widget to insert a list of all Testimonials and Reviews with Elementor. Here in this tutorial, you’re going to learn how to use the Testimonial Slider element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Testimonial Slider Element

 

»Content

 

Testimonial Content

Adding the Items:

⇒Display Avatar? Enable if you want to display the avatar in the testimonial.

⇒Testimonial Avatar: Upload the image here for the testimonial avatar.

⇒User Name: Enter the user name here. Click on Dynamic settings to apply the AnalogWP Classes to the name. (Ex. Add a light background).

⇒Company Name: Enter the company name of the user or author. Click on Dynamic settings to apply the AnalogWP Classes to the company name. (Ex. Add a light background).

⇒Testimonial Description: Enter the testimonial description here. This kind of description will help your customers or visitors to know more about the product review.

⇒Display Rating? If you want to display the rating then enable this.

⇒Rating Number: Enter the rating number the author gave you in their review.

⇒Add Item: Use the ‘+Add Item’ button to add more items to the testimonial slider.

 

Carousel Settings

⇒Effect: Add a transition effect to the testimonial slider.

: Set how many items you want to be visible on the testimonial carousel for different dimensions.

⇒Items Gap: Customize some gaps between testimonial items.

⇒Slider Speed: Customize the duration of transition between slides (in ms).

⇒Autoplay: Enable/disable the autoplay to the testimonial carousel.

⇒Autoplay Speed (ms): Set the autoplay speed in the carousel based on ms.

⇒Pause On Hover: Want to pause your carousel on hover? Enable/disable it here.

⇒Infinite Loop: Enable/disable the infinite loop to the testimonial slider.

⇒Grab Cursor: Shows grab cursor when you hover over the slider.

⇒Navigation: 

→Arrows: Enable arrows as the navigation in the testimonial slider.

→Dots: Enable dots as the pagination in the testimonial slider.

 


»Style

 

Testimonial Styles

⇒Select Style: Here you can select the testimonial type from the different options.

⇒Testimonial Background Color: Add a custom color to the background of the testimonial.

⇒Set Alignment: Set the testimonial layout alignment either left, right or center.

⇒Display User & Company Block?: If you want to display the user and company block separately then enable this option. And if you want them in the same line, then disable it.

⇒Margin: Set the margin value for the top, right, bottom and left around the testimonial for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the testimonial for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the testimonial for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the testimonial for different dimensions.

 

Testimonial Image Style

⇒Image Max Width: Set the testimonial image max-width here for different dimensions.

⇒Image Width: Set the image width manually for different dimensions.

⇒Margin: Set the margin value for the top, right, bottom and left around the testimonial image for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the testimonial image for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the testimonial image for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for normal view.

⇒Rounded Avatar: If you want to have a rounded avatar then enable this option.

⇒Border Radius: And if you want to control the border-radius manually then use this option. Set the border radius for the top, right, bottom and left around the avatar for different dimensions.

 

Colors & Typography

⇒User Name

→User Name Color: Add a custom color to the user name of the testimonial.

→Typography: Set the typography options for the user name text.

 

⇒Company Name

→Company Color: Add a custom color to the user company of the testimonial.

→Typography: Set the typography options for the user company text.

 

⇒Testimonial Text

→Testimonial Text Color: Add a custom color to the testimonial description text.

→Typography: Set the typography options for the testimonial description text.

 

⇒Quotation Mark

→Quotation Mark Color: Add a custom color to the testimonial Quotation Mark text.

→Typography: Set the typography options for the testimonial Quotation Mark text.

 

Arrows

⇒Choose Arrow: Add an icon for the navigation arrow.

⇒Arrow Size: Manually customize the size of the arrows for different dimensions.

⇒Align Left Arrow: Customize the align of the left arrow for different dimensions.

⇒Align Right Arrow: Customize the align of the right arrow for different dimensions.

⇒Background Color: Add a custom background color to the navigator arrows for both normal and hover.

⇒Color: Add a custom color to the navigation arrow in the testimonial slider for both normal and hover view.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the navigator arrow for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Set the border-radius around the arrow for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the arrow for different dimensions. You can link the values together or customize them individually.

 

Dot

⇒Position: Set the position of the pagination dot either inside or outside.

⇒Size: Manually customize the size of the dots for different dimensions.

⇒Color: Add a custom color to the pagination dot for both normal and hover.

⇒Active Color: Add a custom color to the active pagination dot in the testimonial slider.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the pagination dot for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Set the border-radius around the dot for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the pagination dot for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Testimonial Slider Element.


Was this article helpful to you? Yes No

How can we help?