The Testimonial Slider widget from Element Pack Pro is an interactive tool for displaying customer reviews and feedback in a smooth sliding layout on your website. It enables you to showcase testimonials one by one with flexible navigation controls, layout options, and customizable styling features, helping you present social proof in a clean and engaging manner. With responsive settings and design customization, the Testimonial Slider widget ensures an optimized viewing experience across all devices using Elementor. In this documentation, we will cover how to customize and use the Testimonial Slider widget provided by Element Pack Pro for Elementor.
Enable the Testimonial Slider Widget
To use the Testimonial Slider by Element Pack, first, you have to enable the widget.
- Go to WordPress Dashboard → Element Pack Plugin dashboard.
- Then, click the 3rd Party Widgets Tab.
- Search the Testimonial Slider Widget Name.
- Enable the Testimonial Slider Widget.
- Hit the Save Settings Button.
Note: Please note that you need to install & activate the Testimonial Plugin first to use this widget.
Inserting the Testimonial Slider widget
1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the Testimonial Slider widget.
3. Drag the widget and drop it on the editor page
Note: Please ensure that testimonials are added from the WP Dashboard → Testimonials beforehand; otherwise, the Testimonial Slider widget will display no content after being dragged and dropped into the Elementor Editor.
Configuring the Content Tab
Layout Section
Go to Content → Layout
1. Skin: You can choose the Testimonial Slider layout between default, thumb, or single with this option. Here, we have selected the layout as the default.
2. Testimonial Image: Enable the switcher to show the reviewer image to your audience.
3. Title: Enable the switcher to show the title to your audience.
4. Company Name/Address: Enable the switcher to show the address of the reviewer with this option.
5. Meta Multiline: Enable the switcher to split the title and the address from inline to multiline.
6. Show Comma After Title: Enable the switcher to show a comma after the title.
7. Text: Enable the switcher to show the text to your audience.
8. Text Limit: You can adjust the limit of text appearance in the items with this option.
9. Strip Shortcode: Removes any shortcodes from the testimonial content before displaying it.
10. Text Read More Toggle: Enable the switcher to show the read more toggle button after the text with this option.
11. Rating: Enable the switcher to show the rating stars to your audience with this option.
12. Review Platform: Enable the switcher to show the logo of the review platform where they have submitted their review.
13. Meta Position: You can move the position of the meta to before or after the text with this option.
14. Alignment: You can set the position of the item’s content to left, center or right with this option.
Query Section
Go to Content → Query
1. Limit: You can adjust the limit here of how many posts you want to show in the thumbs gallery.
2. Include/Exclude Selection: Select the Include / Exclude filter to show/hide specific posts by Terms (Tags/Categories) or Authors. Here, we selected the include field as Author.
3. Author: This option lets you select the author’s name whose post you want to add to the slider.
4. Offset: The Offset option lets you skip a certain number of posts from the start, so the display begins from the next post instead. Keeping it 0 means post without any exclusion.
5. Date: You can select the post as per the date of creation with this option.
6. Order By: It controls the data you want to display through title, id, date, author, comment count, menu order & random. Here we selected the order as date.
7. Order: This option controls the order by which data is arranged. There are two types of order. Ascending Order (Starts from the smallest or lowest value and goes to the largest or highest.) & Descending Order (Starts from the largest or highest value and goes to the smallest or lowest.)
8. Only Featured Image Post: Enable or disable the switcher to show or hide the featured image post.
9. Query ID: Give your query a custom, unique ID to allow server-side filtering. Learn more about the Query.
Slider Settings Section
Go to Content → Slider Settings
1. Autoplay: By enabling this option, you can automatically play the slides one after another.
2. Autoplay Speed: This option lets you set the time between each slide transition.
3. Pause on Hover: Enable the switcher to pause autoplay when the user hovers over the slider.
4. Animation Speed (ms): This option controls how fast the transition animation occurs between slides.
5. Loop: Enable the switcher to go back to the first automatically after the last slide.
6. Auto Height: Enable the switcher to change the slider height automatically as per the content width with this option.
Navigation Section
Go to Content → Navigation
1. Navigation: You can select the navigation type with this option.
2. Show Scrollbar: Enable or disable the switcher to show or hide the scrollbar to the audience while moving the slide with this option.
3. Arrow Position: You can change the arrow’s position with this option.
4. Arrows Icon: You can change the arrows icon style with this option.
5. Hide Arrow on Mobile: Enable the switcher to hide the arrow on mobile devices with this option.
Work with The Style Tab
Item Section
Go to Style → Item
1. Background: You can change the item background color with this option.
2. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
3. Border Width: You can set the thickness of the border with this option.
4. Border Color: You can change the color of the border with this option
5. Border Radius: The Border Radius controls the roundness of the border.
6. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
Image Section
Go to Style → Image
1. Background Type: You can choose between the background type classic or gradient with this option. (By selecting the background type, you will get the option to change the color. Please note that you need to use the PNG image to change the background color. Here we have used an image with a background, so the background color won’t apply here.)
2. Border Type: You can add or change the border type with this option.
3. Border Radius: You can control the roundness of the border with this option.
4. Margin: You can adjust the space around the image with this option.
5. Size: You can adjust the size of the image with this option.
6. Box Shadow: You can add a shadow effect to the image with this option.
Quotation Section
Go to Style → Quotation
1. Color: You can change the color of the quotation mark icon with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Offset: You can move the quotation icon horizontally, vertically, and rotate the quotation icon to X & Y directions with this option.
Title Section
Go to Style → Title
1. Color: This option allows you to change the title text color.
2. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Margin: You can adjust the space around the title field with this option.
Text Section
Go to Style → Text
1. Color: You can change the text color with this option.
2. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Meta Space: You can adjust the space between the meta and the text with this option.
Address Section
Go to Style → Address
1. Company Name/Address Color: You can make changes to the company name/address text color with this option.
2. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Margin: You can adjust the space around the address field with this option.
Rating Section
Go to Style → Rating
1. Enable Original Color: Enable the switcher to activate the default rating color for each platform with this option.
2. Color: You can change the rating color with this option.
3. Active Color: You can change the rating’s active color with this option.
4. Margin: You can adjust the outer space of the ratings with this option.
Review Platform Section
Go to Style → Review Platform
In this section, we have two more tabs. These are Normal & Hover. Let’s start describing the Normal Tab first –
1. Color: You can change the review platform icon color with this option.
2. Background Type: You can change the background type to be classic or gradient with this option.
3. Background Color: You can change the background color with this option.
4. Image: You can change the background image with this option.
5. Border Type: You can add or change the border type with this option.
6. Border Width: You can set the thickness of the border with this option.
7. Border Color: You can change the border color with this option.
8. Border Radius: You can control the roundness of the border with this option.
9. Padding: You can adjust the inner space of the review platform field with this option.
10. Margin: You can adjust the outer space of the review platform field with this option.
11. Box Shadow: You can add a shadow effect to the review platform with this option.
12. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now let’s proceed to the Hover Tab –
13. Color: You can change the review platform’s icon hover color with this option.
14. Background Type: You can select the background type to be classic or gradient with this option.
15. Color: You can change the background color with this option.
16. Image: You can change the background image with this option.
17. Border Color: You can change the hover border color with this option.
Navigation Section
Go to Style → Navigation
In this section, we have two sub-sections. These are Arrows & Offset. Let’s start by describing those one by one.
Arrows Sub-Section
In this subsection, we have two more tabs. These are Normal & Hover. Let’s start with the Normal Tab first –
1. Color: You can change the arrow’s icon color with this option.
2. Background: You can change the arrows background color with this option.
3. Border Type: You can add a border and change its type with this option.
4. Border Radius: You can control the roundness of the border with this option.
5. Padding: You can adjust the inner space of the navigation (arrows field) with this option.
6. Size: You can adjust the size of the arrows with this option.
7. Space Between Arrows: You can adjust the space between the arrows with this option. Please note that this option will work only when you haven’t set the arrows position to the center.
8. Box Shadow: You can add a shadow effect to the arrows with this option.
Now, let’s proceed to the Hover Tab –
9. Color: You can change the navigation arrow icon hover color with this option.
10. Background: You can change the background hover color with this option.
11. Box Shadow: You can add a hover shadow effect to the navigation with this option.
Offset Sub-Section
1. Arrows Horizontal Offset: You can move the arrows navigation horizontally with this option.
2. Arrows Vertical Offset: You can move the arrows navigation vertically with this option.
Text Read More Toggle Section
Go to Style → Text Read More Toggle
1. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
2. Color: You can change the read more toggle text color with this option.
3. Hover Color: You can change the read more toggle text hover color with this option.
All done! You have successfully customized the Testimonial Slider widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Testimonial Slider Widget. Please visit the demo page for examples.
Thanks for being with us.
