The Testimonials Carousel widget allows you to create a special section on your web pages to display positive customer feedback or reviews in an engaging, rotating carousel or slider format.
Content tab
By default, the testimonials carousel widget includes menu items: Item #1, Item #2, etc. You can add, delete, or further customize these default menu items.
- To add a new slide, click the "Add Item" button.
- To create an exact copy of an existing slide, click the duplication icon on the Testimonials Carousel widget.
- To delete a slide, click the delete icon.
Slides
- View Type: Select from Carousel or Masonry view type.
In the Carousel view, testimonials are typically presented in a horizontal row, where each testimonial occupies a single slot or slide.
In Masonry view, testimonials are arranged in a grid-like layout, where each testimonial card may vary in size and placement. - Slides: Displays a list of all items in the slide. You can rearrange them by dragging and dropping. This section includes
Content: Input the testimonial text.
Image: Upload an image or select one from the media library.
Name: Type the customer’s name.
Title: Enter the customer’s title. - Skin: Choose a pre-designed skin from either Default or Bubble.
- Layout: Select from the options Image Inline, Image Stacked, Image Above, Image Left, or Image Right.
- Alignment: Align the testimonial to the left, center, or right.
- Slides Per View: Choose the number of slides to display simultaneously, ranging from 1 to 10.
- Slides to Scroll: Choose the number of slides to scroll per swipe, ranging from 1 to 10.
- Width: Adjust the width of the widget.
Additional options
- Arrows: Enable this toggle to display navigation arrows for easy testimonial browsing.
- Pagination: Choose from various pagination styles, including None, Dots, Fraction, or Progress, to indicate the current position within the carousel.
- Transition Duration: Set the speed of slide transitions in milliseconds for smooth and seamless animation.
- Autoplay: Toggle to YES to enable automatic sliding of the carousel.
- Autoplay Speed: Adjust the speed at which the carousel slides, specified in milliseconds.
- Infinite Loop: Set to YES to allow the carousel to continue sliding infinitely, looping back to the beginning after reaching the end.
- Pause on Interaction: Determine if autoplay should pause when a user interacts with the carousel, ensuring a seamless experience.
- Image Resolution: Set the size of the image, choosing from thumbnail to full resolution, or specify a custom size.
Stars for the Masonry View type
- Show Stars: Toggle to display star ratings for testimonials.
- Rating Scale: Define the scale for the star ratings, such as out of 5 stars or any custom scale.
- Rating: Specify the rating value for each testimonial.
- Icon: Choose the icon for the star ratings.
- Alignment: Determine the alignment of the star ratings within the testimonial card.
Style tab
Slides
- Space Between: Adjust the slider to set the spacing between slides.
- Background Color: Select the background color for the slides.
- Border Size: Specify the size of the border around each slide.
- Border Color: Choose a color for the border surrounding each slide.
- Padding: Set the amount of padding within the border of each slide.
- Border Radius: Adjust the border radius to control the roundness of the corners of each slide.
- Box Shadow: Add a shadow effect to the slides for a 3D appearance.
Rating Stars icon
- Gap: Adjust the gap between each star icon.
- Size: Set the size of the star icons.
- Spacing: Define the spacing between individual star icons.
- Color: Choose the color for the filled-in star icons representing the rating.
- Unmarked Color: Specify the color for the unfilled star icons.
Content
- Gap: Adjust the space between the image and the testimonial text.
- Text Color: Select the color of the testimonial text.
- Typography: Customize the font style, size, and other typography settings.
- Name:
Text Color: Select the color for the name text.
Typography: Personalize the font style, size, and other typography attributes for the name. - Title:
Text Color: Select the color for the title text.
Typography: Customize the font style, size, and other typography settings for the title. - Image:
Size: Modify the size of the image.
Gap: If Image Inline is selected, the gap determines the space between the image and the name and title.
Border: Toggle to YES to apply a border around the image.
Border Color: If Border is set to YES, choose the color of the border.
Border Width: If Border is set to YES, specify the thickness of the border around the image.
Border Radius: Adjust the border radius to control the roundness of the corners. - Navigation:
Arrows Size: Utilize the slider to adjust the size of the arrows.
Arrows Color: Choose the color for the arrows.
Pagination Size: Specify the size of the dots
Pagination Color: Select the color for the dots.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.