10Web Help Center

Hi, how can we help?

Testimonials Widget

Copy article URL

in this article

The Testimonials widget is a dynamic tool designed to help you share customer success stories, endorsements, or detailed reviews. This widget offers flexibility in style to present testimonials in the most compelling way possible.

Adding Testimonials widget 

  1. Find the Testimonials widget under the Elementos section of your 10Web Builder page.
  2. Drop the widget onto your preferred location on the canvas.  For details, see Add elements to a page.

Content tab

Testimonial view type 

  • Skin: You can choose from 10 different skin types. Each skin changes the appearance and style of the testimonial cards. 
  • Slider View: can be turned On or Off. 

If Slider View is On, additional settings become available:

  • Testimonials per Slide: You can set the number of testimonials shown per slide (default or up to 10).
  • Items to Scroll: Determines how many testimonials move with each scroll (default or up to 10).

If slider view is Off, you will see the following settings: 

  • View Type: Select from Grid or Masonry view type
  • Grid: Testimonials are arranged evenly in rows and columns. Each testimonial card has the same size, giving a neat and structured look.
  • Masonry: Testimonials are arranged in a more dynamic layout. Each card can have a different height based on its content, creating a more organic and less uniform appearance.
  • Columns: You can set how many columns you want to display for testimonials. More columns make each testimonial card smaller (great for modern, minimal designs), while fewer columns create a more spacious and focused layout.

Layout options

  • Content Alignment: Choose how the content inside the testimonial card is aligned. Left, Center, or Right alignment.
  • Graphic Element: Decide if you want to add a graphic element to your testimonials, such as icons, images, or design accents to enhance the visual appeal.
    Graphic Element Position: Set where the graphic element appears relative to the testimonial text either above, beside, or within the content.
  • Rating Stars: You can enable or disable rating stars to visually represent customer satisfaction.
    Stars Location: Choose to display the stars either above or below the content.
  • Quote Icon: Choose to show or hide a decorative quote icon to highlight the testimonial.
  • Author Image: Option to display the author's photo for a more personal and authentic feel.
    Author Image Position: Select where the author's image appears — above, beside, or next to the text.
  • Author Text Alignment: Set the alignment of the author’s name and details — left, center or right.
  • Company Logo: Option to display the company’s logo alongside the testimonial. If enabled  additional settings become available:
    Company Logo Location: Choose to show the logo either with the author info or above the testimonial content.
    Company Logo Position: Set the logo’s position to the left, top, right or bottom relative to the author info.
    Divider: Option to add a horizontal line to separate different sections of the testimonial card for better visual structure.

Slider Settings

  • Full-Width Slider: This option overrides the container box width, impacting the overall layout design. It makes the testimonial slider stretch across the full width of the screen, overriding container limits.
  • Slider Layout: Choose the visual structure of the slider between Full-Width or Cut From Right.
  • Transition Duration: Set the speed of the slide transitions.
  • Arrows: Show or hide the navigation arrows used to move between slides.
  • Arrows Icon: Choose the style or type of arrow used.
  • First/Last Slide Arrow: If autoloop is disabled, you can hide or disable the arrows when the slider reaches the first or last testimonial.
  • Arrows Position: Determines whether the arrows appear Outside or Inside.
  • Arrows Alignment: Choose the alignment of the arrows (left/right, centered, etc.).
  • Pagination: Toggle to show or hide the slide indicator.
  • Pagination Position: Decide whether the pagination appears Inside within the bounds of the slider or Outside positioned just below or outside the slider for a cleaner, more separated look.
  • Pagination Type: Choose if the pagination appears as Dots or Fraction.
  • Pagination Alignment: Control where the pagination appears below content, centered, etc.
  • Autoplay: If enabled, the slider will automatically rotate through testimonials.
  • Autoplay Speed: Set how long each testimonial is shown before switching.
  • Pause on Interaction: Stops the autoplay if a user clicks or hovers, allowing them to read comfortably.
  • Infinite Loop: Enables the slider to loop back to the first testimonial after the last one, creating a continuous rotation.

Testimonials

  • Open each testimonial separately by clicking on the name. 
  • Content: The full name of the person providing the testimonial. This helps personalize and authenticate the feedback.
  • Author Name: The individual’s job title or role within their organization (e.g., Marketing Director, Founder).
  • Author Position: The name of the company or brand the testimonial is associated with.
  • Company Name: A profile photo of the testimonial author. Including an image builds trust and makes the testimonial feel more relatable.
  • Author Image: The logo of the company the author represents. This adds brand recognition and visual credibility.
  • Company Logo: You can enhance the testimonial with a visual element
  • Graphic Element Type: You can add either an image or a video. Videos add a strong personal touch, while images can support branding.
  • Rating: A visual star rating (or similar) that reflects the author’s level of satisfaction. 

Style

General

  • Background Color: Select the background color for the testimonial.
  • Column Gap: Set the horizontal spacing between testimonial columns/slides.
  • Row Gap: Set the vertical spacing between testimonial rows/slides.

Testimonial card

  • Card Padding: Adjust the inner spacing within the testimonial card to control how content is positioned inside the card.
  • Border Radius: Sets how rounded the corners of the card appear. Higher values create more curves.
  • Background Type: Choose the background style for the testimonial card from:
    Default: Inherits the theme or global background style.
    None: No background.
    Solid: A single color background.
    Double, Dotted, Dashed, Groove: Various decorative border styles to add visual interest.
  • Border Width: Define how thick the border surrounding the testimonial card will be.
  • Border Type: Select the style of the border: solid, dotted, dashed, or groove for different visual effects.
  • Box Shadow: Apply a shadow effect around the testimonial card to add depth and make it stand out on the page. Learn more about shadows.
  • Hover Animation: Choose the hover effect for the testimonial card when users mouse over it. Choose from: None, Float, Scale, Float&Scale
  • Transition Duration: Set how fast or slow the hover animation should occur when interacting with the testimonial card.

Stars

  • Stars Color: Set the color of the filled (marked) stars to visually represent the rating.
  • Star Size: Adjust the size of each star icon to fit your design style.
  • Gap: Control the spacing between each star icon for better visual balance.
  • Space Below Stars: Add space between the stars and the content below (e.g., testimonial text or author info) for cleaner layout separation.
  • Unmarked Stars Color: Choose the color for the unfilled (unmarked) stars to distinguish them from the rated ones.

Quote

  • Quote Text:
    Color: Set the color of the testimonial quote text to match your design or improve readability.
  • Typography: Customize the font family, size, weight, line height, and letter spacing of the quote text for better visual styling.
  • Space Below: Adjust the spacing below the quote text to separate it from elements like the author name or rating.
  • Author Name:
    Author Name Color: Displays the name of the person giving the testimonial.
    Author Typography: Customize the font style, size, weight, and other typography settings for the author’s name.
    Space Below Author Info: Adjust the spacing below the author section to separate it from other elements like the company logo or next testimonial item.
  • Position & Company:
    Position & Company Color: Set the text color for the position and company details to match your testimonial design.
    Position & Company Typography: Customize the font, size, weight, and other text styles for the position and company name for consistency and clarity.

Author Image

  • Size: Adjust the dimensions of the author’s image to best fit your layout.
  • Space Below/Between: Set spacing around the image — below it or between other elements like text or logos.
  • Border Type: Choose a border style for the image: Default, None, Solid, Double, Dotted, Dashed, or Groove
  • Box Shadow: Apply a shadow around the author image to add depth and visual emphasis.
  • CSS Filters: Use CSS effects like brightness, contrast, or grayscale to stylize the image.

Divider

  • Divider Spacing: Control the space around the divider line to separate testimonial sections or elements clearly.
  • Divider Color: Set the color of the divider line to match or contrast with the overall design.

Company Logo

  • Logo Width: Set the width of the company logo to control how large it appears within the testimonial.
  • Logo Height: Define the height of the logo to maintain proportions or fit specific design needs.
  • Logo Color: Adjust the logo color.
  • Space Between Logo: Set the spacing around or between the logo.

Slider

  • Gap: Set the space between testimonial slides. This helps control how compact or spread out each slide feels.
  • Arrows: Control the navigation arrows that let slide between testimonials.
    Arrows Icon size: Adjusts the size of the arrow icons.
    Arrows Color: Sets the default color of the arrow icons.
    Arrows Hover Color: Changes the arrow icon color when a user hovers over it with a mouse.
    Background Color: Sets the background color behind the arrows.
    Background Hover Color: Changes the background color on hover.
    Border Type: Lets you add a border around the arrows, like solid, dashed, dotted, etc.
    Border Radius: Controls the roundness of the arrow container's corners.
  • Pagination: This refers to the small dots or indicators below the slider that show which testimonial slide is active.
    Size: Sets how big or small each dot is.
    Color: Defines the color of the active dot.
    Secondary Color: Sets the color of the inactive 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.

in this article