The Testimonial V1 widget allows you to display customer feedback with a professional layout. It supports a manual list of testimonials and can be toggled between a static grid and an interactive slider.

Content Tab: Testimonials #

Manage the individual reviews and client details.

• Testimonials List: Add multiple items to the list; each item represents a single testimonial card.
• Content: Enter the main testimonial or review text provided by the client.
• Name: Input the name of the person giving the testimonial.
• Position: Add the client’s job title, designation, or company name.
• Image: Upload a profile picture or company logo for the reviewer.

Content Tab: Icon #

This section allows you to customize the decorative quotation mark icon for each testimonial card.

• Show Icon: Toggle this to Show or Hide the testimonial icon.
• Icon: Select a custom icon from your library to represent the quote.
• Position: Choose the horizontal alignment of the icon: Left, Center, or Right.
• Position Offset: Use the slider to precisely adjust the horizontal position of the icon in pixels.
• Top Position: Move the icon vertically (up or down) to overlap with the card border or content.
• Z-index: Set the stack order to ensure the icon appears above or below other elements.
• Icon Size: Adjust the scale of the icon itself.
• Width & Height: Define the specific dimensions for the icon’s container.

Content Tab: Slider Settings #

This section allows you to convert the default grid layout into an interactive carousel.

• Enable Slider: Toggle this On to transform the testimonial display into a touch-responsive slider. This is disabled by default.
• Slides Per View: Choose how many testimonial cards are visible at once in the slider (supports responsive settings for Desktop, Tablet, and Mobile).
• Space Between Slides: Adjust the horizontal gap (in pixels) between the testimonial cards within the slider.
• Loop: When enabled, the slider will return to the first item automatically after reaching the last slide.
• Autoplay: Toggle this On to have the slides transition automatically without user interaction. This is disabled by default.
• Autoplay Speed (ms): (Appears only when Autoplay is On) Set the delay time (in milliseconds) before the slider moves to the next item (e.g., 3000 for 3 seconds).
• Show Arrows: Toggle to display or hide the “Previous” and “Next” navigation arrows.
• Show Dots: Toggle to display or hide the pagination dots at the bottom of the slider.

Style Tab: General #

Style the primary testimonial card for both Normal and Hover states.

• Background Type: Choose a Classic color or Gradient for the card background.
• Border Settings: Define the Border Type, Border Radius, and Box Shadow for depth.
• Padding: Control the inner spacing of the testimonial card.
• Margin Top: Adjust the external spacing at the top of the widget.

Style Tab: Icon Style #

Specific styling for the quotation mark icon.

• Color & Background: Set custom colors for the icon and its background for both Normal and Hover states.
• Transition Duration: Control how quickly the hover effects take place.
• Border Radius: Round the icon’s container (e.g., 50% for a circular icon).
• Box Shadow & Padding: Further refine the icon’s appearance and spacing.

Image Style #

Width: Use the slider to precisely adjust the size (in pixels) of the reviewer’s profile image.

Content Style #

• Color & Typography: Define the text color and font properties (family, size, weight) for the main testimonial body.

Author Name #

Color & Typography: Define the text color and font properties (family, size, weight) for the author name.

Author Position #

Color & Typography: Define the text color and font properties (family, size, weight) for the author position.

Navigation Arrows #

Available when the slider is active to style the control elements.

• Color & Background: Set custom colors for the navigation arrows and its background for both Normal and Hover states.
• Dimensions: Set the Width, Height, and Arrow Icon Size.
• Positioning: Fine-tune the Previous Arrow Position and Next Arrow Position for custom placement.
• Shape: Customize the Border Radius (e.g., 50% for circular arrows) and Padding.

Navigation Dots #

• Color: Set the base color for the pagination dots.
• Active Color: Define a unique color for the dot representing the current slide.