Documentation

Testimonials

Reliable and professional work. I would definitely recommend this to others.

Lisa Dunn

Reliable and professional work. I would definitely recommend this to others.

Alex Ryan

Reliable and professional work. I would definitely recommend this to others.

Debra Jules

The Testimonial block is a powerful social proof tool designed to showcase client feedback, reviews, or endorsements in a professional and trustworthy layout. It acts as a smart parent container that automatically adapts its children based on the user’s chosen display mode, helping you build credibility with ease.

Settings ⚙

General

  • Layout: Select Grid to display all testimonials simultaneously in a structured format, or Carousel to create an interactive slider that saves screen space.
    • Grid: Displays all testimonial cards simultaneously in rows and columns
      • Display Column: Define how many testimonials appear in a single row across different devices.
      • Column Gap: Adjust the horizontal spacing between testimonial cards to create a balanced, airy, or compact aesthetic.
      • Enable Masonry: Activating this allows testimonial cards of different lengths to shift up into empty spaces, creating a modern, staggered layout.
    • Carousel: When the Carousel layout is active, this panel provides granular control over the slider’s behavior and interactive elements.
      • Display Column: Determine how many slides are visible at once within the carousel track.
      • Centered Slides (Toggle): When active, the current testimonial will always be positioned in the center of the viewport, perfect for highlighting a featured review.
      • Gap: Set the specific pixel spacing between each individual slide in the carousel.
      • Loop (Toggle): Enable this to allow the slider to return to the first item automatically after the last slide for infinite scrolling.
      • Speed: Control the duration of the transition effect (in milliseconds) as the slides move.
      • Remove Slide Transition (Toggle): Switch this on if you prefer an instant jump between testimonials rather than a smooth sliding motion.
      • Autoplay (Toggle): Set the carousel to advance automatically. You can define the Autoplay Delay (the pause between slides) and choose to Reverse Direction if you prefer a right-to-left flow.
      • Enable Pagination: Adds dots or numbers at the bottom of the slider to show users their current progress.
      • Enable Navigation: Displays “Next” and “Previous” arrows on the sides of the carousel for manual control.

Style ◑

Pagination Styles

  • Align: Set the horizontal placement of the indicators. Toggle between Left, Center, or Right to balance the layout.
  • Vertical Positioning: Fine-tune the vertical offset to control how far the pagination sits below the testimonial content.
  • Gap: Adjust the specific spacing between each individual pagination dot.
  • Default / Active (Toggle)
    • Default:
      • Width & Height: Define the base size of the inactive indicators.
      • Border Radius: Control the shape, from sharp squares to perfect circles.
    • Active:
      • Width & Height: Increase these values to make the active slide indicator physically larger or longer (e.g., a “pill” shape) for better visibility.
      • Border & Border Offset: Add an outline to the active dot and use the offset to create a “halo” effect (spacing between the dot and its border).
      • Border Radius: Independently adjust the curvature of the active indicator.
  • Color:
    • Default: The color of inactive indicators.
    • Default Hover: The color shift when a user moves their cursor over an inactive dot.
    • Active: The primary color for the dot representing the current slide.
    • Active Default: The color of the active dot when hovered.
    • Active Border: The specific color of the stroke surrounding the active indicator.

Navigation Styles

  • Box Width & Height: Define the clickable area surrounding the navigation arrows. Creating a larger box ensures your gallery is touch-friendly and easy to navigate on mobile devices.
  • Border: Add a structural outline to your navigation boxes. This is ideal for “Ghost Button” styles where the background is transparent.
  • Border Radius: Use the slider to transition from sharp, modern squares to soft, classic circles.
  • Size: Independently scale the arrow icon within its box. You can create a “minimalist small arrow in a large box” or a “bold arrow that fills the frame.”
  • Color
    • Icon & Icon Hover: Set the color of the arrow itself. Providing a high-contrast hover color gives the user immediate tactile feedback.
    • Background & Background Hover: Control the fill color of the navigation box.