Testimonial V1 #
The Testimonial V1 widget allows you to display customer reviews in an elegant slider format. This section details all the configuration options available.
Adding Testimonials Content #
To add and manage the testimonial entries:
- Edit the Widget: Drag the “Testimonial V1” widget onto your canvas.
- Navigate to the ‘Content’ Tab: This is where you add individual testimonials.
- Add Items: Click the ‘Add Item’ button to create a new testimonial. For each one, you can configure:
- Image: Upload the author’s photo.
- Name: The author’s full name (e.g.,
Dr. Aiken Ward). - Position: The author’s title or company (e.g.,
Endocrinologists). - Content/Quote: The main body of the testimonial. You can use the built-in text editor or the “Write with AI” feature to craft the perfect quote.
General Settings (‘Content’ Tab) #
Control the core elements and functionality of the slider.
- Icon: Choose an optional icon to display alongside the testimonial.
- Image Style: Control the styling of the author’s image (e.g., border-radius for a circle or square).
- Image Size: Manually define the width of the author images.
- Navigation Arrows: Enable or disable the left/right arrows for manually navigating the slider.
- Navigation Dots: Enable or disable the navigation dots at the bottom of the slider.
Slider Settings #
Configure how the testimonial slider behaves.
- Autoplay: Enable to have the slides advance automatically.
- Autoplay Speed: Set the delay (in milliseconds) between slide transitions.
- Pause on Hover: Choose if the autoplay should pause when a user hovers over the slider.
- Loop: Choose whether the slider should loop back to the beginning after the last slide.
- Animation Speed: Control the speed of the slide transition animation.
Style Tab Customization #
The Style tab in Elementor provides extensive visual control over every part of the widget.
You can style the following parts:
- Content Box: Style the main box containing the quote.
- Background Type: Set a classic, gradient, or image background.
- Border Type: Control the border style, width, and color.
- Border Radius: Round the corners of the box.
- Box Shadow: Apply and customize a shadow effect.
- Padding: Adjust the internal spacing of the content box.
- Icon: Change the color and background of the optional icon in both Normal and Hover states.
- Image: Style the author’s image.
- Context/Quote: Customize the typography (font, size, weight), color, and spacing of the testimonial text.
- Author Name: Style the author’s name separately from the quote.
- Author Position: Style the author’s position or title.
- Navigation Arrows: Fully customize the arrows.
- Color & Background: Set colors for normal and hover states.
- Size: Define the width and height of the arrow buttons.
- Padding & Border: Adjust spacing and add borders.
- Arrow Icon Size: Control the size of the arrow icon inside the button.
- Position: Fine-tune the vertical position of the arrows (e.g.,
m-*classes).
- Navigation Dots: Style the color of the dots and the “active” dot.
Testimonial Slider V2 #
The Testimonial Slider V2 widget offers a modern, highly customizable carousel for displaying customer reviews, complete with ratings and fine-grained stylistic control.
Adding Testimonials Content #
To add and manage the testimonial entries:
- Edit the Widget: Drag the “Testimonial Slider V2” widget onto your canvas.
- Navigate to the ‘Content’ Tab: This is where you add individual testimonials.
- Add Items: Click the ‘Add Item’ button to create a new testimonial. For each one, you can configure:
- Client Image: Upload the author’s photo.
- Client Name: The author’s full name (e.g.,
Kerby Mario). - Client Title: The author’s title or company (e.g.,
Body Builder). - Rating: Set a star rating for the testimonial (e.g.,
5). - Content/Quote: The main body of the testimonial. You can use the built-in text editor or the “Write with AI” feature to craft the perfect quote.
Slider Settings (‘Content’ Tab) #
Control the core functionality and behavior of the testimonial carousel.
- Loop: Enable to allow the slider to loop continuously from the last slide back to the first.
- Autoplay: Enable to have the slides advance automatically.
- Show Navigation: Enable or disable the left/right arrow buttons for manual navigation.
- Show Pagination: Enable or disable the navigation dots (pagination) at the bottom of the slider.
- Pagination Clickable: Enable to allow users to click on dots to navigate to a specific slide.
Style Tab Customization #
The Style tab provides detailed visual control over every component of the widget.
You can style the following parts:
- General / Slide: Style the individual slide container.
- Background Type: Set a classic, gradient, or image background for each testimonial card.
- Slide Padding: Adjust the internal spacing within each slide.
- Border Type & Radius: Control the border style and round the corners of the slide box.
- Box Shadow: Apply and customize a shadow effect for depth.
- Client Info: Style the area containing the client’s image and details.
- Image Size: Manually define the dimensions of the author’s image.
- Image Spacing: Adjust the margin around the client’s image.
- Client Name: Customize the appearance of the author’s name.
- Color & Typography: Set the color, font, size, and weight.
- Bottom Spacing: Control the margin below the name.
- Client Title: Style the author’s title or position separately.
- Color & Typography
- Rating: Style the star ratings.
- Color: Set the color of the inactive stars.
- Active Color: Set the color for the filled-in stars.
- Size: Control the size of the stars.
- Spacing: Adjust the space between each star.
- Left/Top Spacing: Fine-tune the position of the rating element.
- Testimonial Content: Style the main quote text.
- Color, Alignment, & Typography
- Width: Constrain the width of the text block for better readability.
- Top/Bottom Spacing: Adjust margins around the quote.
- Line Height: Control the spacing between lines of text for improved legibility.
- Navigation (Arrows): Style the previous/next buttons.
- Color & Background: Set colors for normal and hover states.
- Border Type & Radius: Add and style borders on the buttons.
- Size: Define the width and height of the arrow buttons.
- Previous/Next Button Spacing: Precisely position the arrows relative to the slider.
- Pagination (Dots): Style the navigation dots.
- Color: Set the color of the inactive dots.
- Active Color: Set the color for the dot representing the current slide.
- Width & Height: Control the size of the dots.
- Spacing Between: Adjust the space between each dot.
- Border Radius: Make the dots circular or square.
- Opacity & Active Opacity: Control the transparency of inactive vs. active dots.
