*Advanced User Guide* Add a Testimonial Slider to Your Website

  • Updated
The following guide is for advanced website users!
If you are unfamiliar with HTML & CSS, visit our beginners guide here instead.


Before you begin, you will need to have an image representing the customer or customer's company uploaded to your image library, a customer quote, the customers name and title .

  • Visit the Upload Images guide for more help
  • Here is an example a customer's portrait that can be used within that testimonial slider (Specs are 235 x 235 pixels): 


Here's how to add a Testimonial Slider to your website using the Carousel block type:

  1. While logged into your DistributorCentral account, open the website editor. Learn How
  2. With your website editor open, go to the panel on the left and find Current Pageadv_4_2.png

  3. Under Current Page, click the + icon to the right of the row you wish to add the Carouseladv_4_3.png

  4. In the Select Block Type pop up window, click on Carouseladv_4_4.png

  5. After you have clicked on the Carousel block you will see the new block added to your row in the left panel highlighted in blue adv_4_5.png

  6. Click the Pencil icon to the right of the Carousel blockadv_4_6.png

  7. The Carousel edit screen will open

  8. Next, click Add Slide at the bottom of the Carousel edit screen

  9. After clicking Add Slide, Slide #1 will appear with more settingsadv_4_9.png

  10. Change the Display Type to Custom HTMLadv_4_10.png

  11. Click the Custom HTML button

  12. In the HTML text editor add your own custom HTML or paste in the following HTML to begin:
    <div class="testimonialSlider">
      <div class="testimonialPortrait">
      <img src="https://s3.distributorcentral.com/uploads/F/A/FA5CD4B8F6C174AC764C731E9D051A3A.jpg" alt="Customers portrait">
      <div class="testimonialQuote">
        <p>"I'll never go anywhere else for product that really makes my company stand our from the rest."</p>
      <div class="testimonialAuthor">
        <p>Jim - Customer Title within Company</p>
  13. Replace the testimonial portrait with the correct image URL
  14. Update the testimonial quote & author to your customers quote & information
  15. Next, click Done in the bottom right corner of the Custom HTML text editor

  16. Repeat steps 8-15 as needed to add multiple testimonial slides
  17. When complete, click Done in the bottom right corner of the edit Carousel screen

  18. Now you can add custom CSS to stylize the testimonial slide further
    • On the left panel, click Settings

    • Under Current Page (or Global if the carousel block was added in the header or footer of your website) click Edit CSS to open the bottom CSS paneladv_4_15.png
    • Now you can add your own CSS or use the following CSS to begin:

       .testimonialSlider { 
        text-align: center;
        max-width: 600px; 
        width: 100%; 
        float: none;
        margin: 0 auto 2.5em auto;
      .testimonialQuote p {
        font-size: 2em;
        padding: .25em;
      .testimonialAuthor p {
        font-size: 1.85em;
        font-weight: 700;
        padding: .25em .25em .75em .25em;

  19. Thats it! Don't forget to Save your changes in the website editor before previewing your website or leaving the editor

Tip: Further edit the Carousel settings to customize things like the Carousel's Animation effect, Autoplay delay, and more!

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request