(2023) Elementor Pro – How to Add a Testimonial Carousel

Elementor Pro-General

Picture of admin

admin

Testimonial carousels are a great tool for showcasing multiple testimonials in an area with limited space. By adding a testimonial carousel to your website, you can create an engaging user experience and highlight the positive feedback you have received from customers or clients. Nowadays testimonials are an essential element of website design, as they help build credibility, trust, and authority. They allow for visitors to see what others have to say about your company, which can help influence purchasing decisions and boost conversion rates.

In this blog, we will discuss how you can add a testimonial carousel to your website using Elementor Pro. We will cover the steps it takes to add this widget to your website, as well as the benefits it brings and how you can customize your own testimonial carousel. By the end of this tutorial, you will have all the information needed to create an appealing and effective testimonial carousel.

How to Add a Testimonial Carousel in Elementor 

In addition to increasing credibility and trust, having a testimonial carousel on your website has several other benefits. First off, it can help to showcase the products or services your brand has to offer. By featuring different testimonials, viewers will get a better understanding of what you have to offer and how it’s positively impacted others. Another benefit of having a testimonial carousel on your website is that it helps make your site become more dynamic and engaging. A static webpage can be dull and uninteresting, causing visitors to leave your site. However, by having a rotating carousel of testimonials your website will be kept fresh and engaging, encouraging visitors to stay longer and explore more of your site. Lastly, a testimonial carousel can also act as a call-to-action. When visitors see positive feedback from previous customers, they may be more inclined to take action. How can you add a testimonial carousel to your site? Let’s take a look.

  1. Open the page in Elementor in which you’d like to add a testimonial carousel to. 
  2. In Elementor’s page builder, search “Testimonial Carousel”.
  3. Then, drag and drop the testimonial carousel widget into your desired section. 
  4. You will now see Elementor’s default testimonial carousel in place. 
  5. Update your changes. Stay tuned for the next section where we dive into customizing this widget.

How to Customize a Testimonial Carousel in Elementor 

Customizing your testimonial carousels in Elementor is a great way to make them stand out and gain the  viewer’s attention. With Elementor’s easy-to-use features and edit options, you can create a carousel of testimonials that matches your site’s overall layout and design. From changing fonts and colors, to adjusting size and spacing, there are endless possibilities when it comes to creating a unique and tailored testimonial carousel. By customizing your testimonial carousel, you will help boost user engagement and the overall appeal of your website. Let’s take a look at the customization options for Elementor Pro’s testimonial carousel. 

Content 

  • Slides: This is where you list all of the testimonials you want displayed in your carousel. Once you click on the default “Item #1” slide, you will be able to add in your testimonial, the name, the title of the author who wrote the testimonial, as well as an image if you would like. You can add as many testimonials as you would like.
  • Skin: Choose between the Default or Bubbled skin. Bubble will include a background behind your testimonial. 
  • Layout: Select how you would like your testimonial to be displayed. Choose from Image Inline, Image Stacked, Image Above, Image Left or Image Right. 
  • Alignment: Align your testimonial to the left, center or right of the widget box. 
  • Slides Per View: Select the number of testimonials you want to show at once. Choose between 1 and 10. 
  • Slides to Scroll: Select how many testimonials scroll when arrows are clicked.
  • Width: Adjust the width of your testimonials. 

Additional Options

  • Arrows: Show or hide the navigation arrows. 
  • Pagination: Select your carousel’s pagination style. Choose between None, Dots, Fraction, or Progress. 

  • Transition Duration: Set the amount of time between changing slides. 
  • Autoplay: Set to “YES” if you want your carousel to slide automatically. Note: If you chose “YES”, you will have to set a play speed as well as the option to control what happens on hovers and interactions. 
  • Autoplay Speed: Set the speed for the carousel’s automatic slide functionality. 
  • Infinite Loop: When set to “YES”, your carousel will continue sliding even after the last testimonial. 
  • Pause on Hover: Set to “YES” if you want to pause the carousel on hover.
  • Pause on Interaction: Set to “YES” if you want to pause the carousel on an interaction. 
  • Image Size: If you have chosen to use images, select the image size here. 
  • Lazyload: Set if you want your carousel to only load when it becomes visible on the user’s screen.

Style

  • Slides
    • Space Between: Adjust the space between your testimonials.
    • Background Color: Select the background color for the entire testimonial.. 
    • Border Width: If desired, set a border around each slide and choose it’s width.
    • Border Radius: Adjust the border radius. This is a great tool if you want to add rounded corners to your testimonials. 
    • Border Color: If a border was set, you can adjust it’s color here. 
    • Padding: Adjust the padding within the border of each slide.

  • Content
    • Gap: Control the space between the testimonials and the image, name and title. 
    • Text Color: Set the color of your testimonial’s text.
    • Typography: Select the typography settings of your testimonial. Choose from a wide range of customization options such as size, font, spacing and more.
    • Text Stroke: Add a stroke to your testimonial text. This is a great tool if you want to add a border around your text.
      • Name/Title
        • Text Color: Adjust the color of your name and title.
        • Typography: Select the typography settings of the name and title of the testimonial author. Choose from a wide range of customization options such as size, font, spacing and more.

  • Image
    • Size: Adjust the size of the testimonial image.
    • Gap: Control the gap between your image and name/title. 
    • Border: Set to “YES” to place a border around your image. If selected, you will have the ability to adjust the border color and width. 
    • Border Radius: Set the border radius to control corner roundness. 
  • Navigation
    • Arrows: If arrows are turned on, you can adjust the size and color here. 
    • Pagination: If you chose to use one of the pagination options, you can adjust the size, color and active color here. 

  • Bubble
    • If Bubble was selected as the testimonial skin, Content Tab -> Skin -> Select Bubble, then you can adjust the background color, padding and border radius here. You also have the option to include a border around the bubble. If selected, you can also adjust the border color and width. 

Conclusion

Overall, implementing a testimonial carousel into your website is a great way to showcase positive experiences with your business, ultimately increasing trust and credibility. With Elementor Pro, customizing your testimonial carousel is a simple, yet creative process that can greatly benefit your site. With the wide variety of customization options that Elementor Pro has to offer, you can create a testimonial carousel that appeals to viewers and matches your overall branding and website design. 

share :

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready To Beat A Giant?

[ gi·ant ] /ˈjīənt/ : a very large company or organization.