Testimonial Marquee

Building a sense of trust with prospective customers is a vital part of online business success. A dynamic Testimonial Marquee is a great way to display positive feedback in an engaging manner.

View Live Demo

Content Tab

General

• Testimonial item:
  • Label: Assign a label to the testimonial for identification purposes within the Elementor editor.
  • Type: Choose 'Custom' or select a platform like 'Twitter', 'G2', or 'Trustpilot' to automatically format the testimonial content.
  • Heading (Optional): Enter a heading for the testimonial if required.
  • Content: Input the actual testimonial text here.
  • Avatar: Toggle on to display an avatar or profile picture with the testimonial.
  • Image Resolution: Select the resolution for the avatar image.
  • Name: Enter the name of the person who provided the testimonial.
  • Rating: Choose a numerical rating that reflects their review, if applicable.

Adding a new testimonial:

Click on '+ Add Item' to include more testimonials.

• Orientation: Select the orientation of the marquee, typically 'Horizontal' or 'Vertical'.
• Direction: Choose the direction in which the marquee scrolls, such as 'Left' or 'Right'.
• Space Between: Adjust the space between each testimonial in the marquee.

• Animation Speed: Set the speed of the animation for the marquee scroll.

  Pause on Hover: Toggle 'Yes' to pause scrolling when the mouse hovers over the marquee.

  Show Profile Picture: Toggle 'Yes' to display the profile pictures or avatars of the testimonial authors.

  Avatar Size: Adjust the size of the profile pictures or avatars.

  Author Order: Determine the order of elements within each testimonial.

  • Author Name: Set the position of the author's name.
  • Rating Stars & Twitter Handle: Set the position of the rating stars and Twitter handle if applicable.
• Content Order: You can reorder the testimonial content blocks if needed by changing the numerical values next to each content type.

Style Tab

Card

• Card Width: Adjust the width of each testimonial card within the marquee.
• Height: Choose between 'Default', 'Min Height', or set an 'Equal Card Height' for all testimonials.
• Background Type: Select the background type for the testimonial cards, with options available under 'Normal' and 'Hover' states.
• Opacity: Set the opacity level of the testimonial card backgrounds.
• Padding: Adjust the padding inside the testimonial cards. Specify the values for Top, Right, Bottom, and Left, or link them to maintain equal padding on all sides.
• Border Type: Choose the type of border for the testimonial cards, such as solid, dashed, dotted, etc.
• Border Radius: Define the radius of the card corners to control how rounded they are. You can set individual values for Top, Right, Bottom, and Left, or link them for uniformity.
• Box Shadow: Add a shadow effect to the cards to give them depth.

Content

• Author Name
  • Typography: Customize the typography of the author's name including font family, size, weight, and other font properties.
  • Color: Choose the color for the author's name.
• Heading
  • Typography: Adjust the typography settings for the heading of the testimonial.
  • Color: Select a color for the heading text.
  • Padding: Set the padding around the heading.
• Content
  • Typography: Customize the typography settings for the main testimonial content.
  • Color: Select the text color for the testimonial content.
  • Padding: Adjust the padding around the content area.
• Rating
  • Size: Set the size of the rating stars.
  • Spacing: Adjust the space between individual rating stars.
  • Color: Choose a color for the filled-in stars indicating the rating.
  • Unmarked Color: Select a color for the unmarked stars.

Gradient Overlays

Gradient overlays are ideal when you want to apply a fading effect on the sides of testimonial marquee widget.

• Left Gradient Overlay
  • Show Gradient: Toggle 'Yes' to enable a gradient overlay on the left side of the marquee.
  • Gradient Color: Choose the color for the left gradient overlay.
  • Gradient Size: Adjust the size of the gradient effect on the left side.
• Right Gradient Overlay
  • Show Gradient: Toggle 'Yes' to enable a gradient overlay on the right side of the marquee.
  • Gradient Color: Select the color for the right gradient overlay.
  • Gradient Size: Modify the size of the gradient effect on the right side.