The Testimonial Carousel widget from Element Pack Pro is a dynamic tool for showcasing customer reviews and feedback in an interactive sliding carousel layout on your website. It allows you to present testimonials with smooth navigation, flexible layout controls, and extensive styling options, helping you highlight social proof in an engaging and visually appealing way. With responsive settings and customizable design features, the Testimonial Carousel widget makes it easy to display testimonials attractively across all devices using Elementor. In this documentation, we will cover how to customize and use the Testimonial Carousel widget provided by Element Pack Pro for Elementor.
Enable the Testimonial Carousel Widget
To use the Testimonial Carousel 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 Carousel Widget Name.
- Enable the Testimonial Carousel 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 Carousel widget
1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the Testimonial Carousel 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 Carousel 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. Layout: You can choose the Carousel layout as default, twyla or vyxo with this option. Here, we have selected the layout as default.
2. Columns: Set here how many columns you want to show by the layout to your audience with this option.
3. Item Gap: You can adjust the space between items using this option.
4. Testimonial Image: Enable the switcher to show the reviewer image to your audience.
5. Title: Enable the switcher to show the title to your audience.
6. Address: Enable the switcher to show the address of the reviewer with this option.
7. Meta Multiline: Enable the switcher to split the title and the address from inline to multiline.
8. Show Comma After Title: Enable the switcher to show a comma after the title.
9. Text: Enable the switcher to show the text to your audience.
10 Text Limit: You can adjust the limit of text appearance in the items with this option.
11. Strip Shortcode: Removes any shortcodes from the testimonial content before displaying it.
12. Text Read More Toggle: Enable the switcher to show the read more toggle button after the text with this option.
13. Rating: Enable the switcher to show the rating stars to your audience with this option.
14. Rating Bullet: Enable the switcher to change the rating visual as bullet style with this option.
15. Review Platform: Enable the switcher to show the logo of the review platform where they have submitted their review.
16. Alignment: You can set the position of the items content to left, center or right with this option.
17. Item Match Height: Enable the switcher to make the items’ height equal.
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.
Navigation Section
Go to Content → Navigation
1. Navigation: You can select the navigation type with this option.
2. Show Scrollbar: Enable the switcher to show 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 arrow on mobile devices with this option.
Carousel Settings Section
Go to Content → Carousel Settings
1. Layout: You can set the slider layout to carousel or coverflow with this option.
2. Autoplay: By enable this option you can automatically play the slides one after another.
3. Autoplay Speed: This option let you set the time between each slide transition.
4. Pause on Hover: Enable the switcher to pause autoplay when the user hovers over the slider.
5. Sliders to Scroll: You can adjust the number of slides that you want to slide in transition.
6. Center Slide: The Center Slide option keeps the active slide centered while partially showing the previous and next slides.
7. Grab Cursor: Enable the switcher to make the cursor a grab icon while hovering over the slide.
8. Drag Free Mode: This option allow the carousel to move freely while dragging instead of snapping directly to each slide.
9. Loop: Enable the switcher to go back to the first automatically after the last slide.
10. Animation Speed (ms): This option controls how fast the transition animation occurs between slides.
11. Observer: Enabling this option helps the slider function correctly when it’s initially hidden.
12. Mousewheel: You can navigate through the slider’s slides by scrolling your mouse wheel while your cursor is over the slider.
13. Show Hidden Item: Enable the switcher to show the hidden carousel items.
14. Hidden Item Opacity: You can adjust the blurness of the hidder carousel items with this option.
Work with The Style Tab
Item Section
Go to Style → Item
In this section, we have three tabs. These are Normal, Hover & Active. Let’s start with the Normal tab first –
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 Radius: The Border Radius controls the roundness of the border.
4. Box Shadow: While working with this option, you will get three more options (Blur, Horizontal & Vertical). Blur Controls how sharp or soft the shadow will appear. By using the horizontal option, you can move the shadow left or right and by using the vertical option, you can move the shadow up or down.
5. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
6. Shadow Mode: Enable the switcher to show the visual of shadow appearance on both sides of the carousel with this option.
7. Shadow Color: You can make changes to the shadow color with this option.
8. Opacity: You can adjust the transparency of the item with this option.
Now, let’s proceed to the Hover tab –
9. Background: This option allows you to change the background hover color.
10. Box Shadow: You can add a hover shadow effect to the item with this option.
11. Match Padding: You can adjust the inner spacing of the item to properly align the hover shadow and prevent overlap issues with this option.
12. Opacity: This option controls the transparency level of the testimonial item while in the hover state.
Now, let’s proceed to the Active Tab –
13. Background: You can change the item’s active background color with this option.
14. Box Shadow: You can add a shadow effect to the active item with this option.
15. Opacity: This option controls the transparency level of the testimonial item while in the active state.
Image Section
Go to Style → Image
1. Background Type: You can choose between the background type classic or gradient with this option.
2. Color: You can change the background color with this option.
Note: You can only change the background color when the image will be png.
3. Image: You can change the background image with this option.
4. Border Type: You can add or change the border type with this option.
5. Border Width: You can set the thickness of the border with this option.
6. Border Color: You can change the border color with this option.
7. Hover Border Color: You can change the hover border color with this option.
8. Border Radius: You can control the roundness of the border with this option.
9. Padding: This option allows you to adjust the inner space of the image with this option.
10. Box Shadow: You can add a shadow effect to the image with this option.
11. Size: You can adjust the size of the image with this option.
12. Vertical Spacing: You can move the image vertically with this option.
Title Section
Go to Style → Title
1. Color: This option allows you to change the title text color.
2. Active Color: You can change the title text active color with this option.
3. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
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. Company Name/Address Active Color: You can make changes to the company name/address text active color with this option.
3. Margin: You can adjust the space around the address field with this option.
4. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Text Section
Go to Style → Text
1. Color: You can change the text color with this option.
2. Active Color: You can change the text’s active color with this option.
3. Top Border Color: You can change the top border color with this option.
4. Top Border Active Color: You can change the active top border color with this option.
5. Padding: You can adjust the inner space of the text field with this option.
6. Margin: You can adjust the space around the text with this option.
7. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
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. Size: You can make changes to the rating star’s size with this option.
5. Spacing: You can adjust the space between each rating star with this option.
6. 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 Radius: You can control the roundness of the border with this option.
7. Padding: You can adjust the inner space of the review platform field with this option.
8. Margin: You can adjust the outer space of the review platform field with this option.
9. Box Shadow: You can add a shadow effect to the review platform with this option.
10. 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 –
11. Color: You can change the review platform’s icon hover color with this option.
12. Background Type: You can select the background type to be classic or gradient with this option.
13. Color: You can change the background color with this option.
14. Image: You can change the background image with this option.
Navigation Section
Go to Style → Navigation
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 border and change it’s type with this option.
4. Border Width: You can set the thickness of the border with this option.
5. Border Color: You can change the border color with this option.
6. Border Radius: You can control the roundness of the border with this option.
7. Padding: You can adjust the inner space of the navigation (arrows field) with this option.
8. Size: You can adjust the size of the arrows with this option.
9. 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 as center.
10. Box Shadow: You can add a shadow effect to the arrows with this option.
11. Arrows Horizontal Offset: You can move the arrows horizontally with this option.
Now, let’s proceed to the Hover Tab –
12. Color: You can change the navigation arrow icon hover color with this option.
13. Background: You can change the background hover color with this option.
14. Border Color: You can change the hover border color with this option.
15. Box Shadow: You can add a hover shadow effect to the navigation with this option.
All done! You have successfully customized the Testimonial Carousel widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Testimonial Carousel Widget. Please visit the demo page for examples.
Thanks for being with us.
