*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): 

adv_4_1.jpg


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
    adv_4_7.png

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

  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
    adv_4_11.png

  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>
      <div class="testimonialQuote">
        <p>"I'll never go anywhere else for product that really makes my company stand our from the rest."</p>
      </div>
      <div class="testimonialAuthor">
        <p>Jim - Customer Title within Company</p>
       </div>
    </div>
    	
  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
    adv_4_12.png

  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
    adv_4_13.png

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

    • 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;
      }<br>
      .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
    adv_4_16.png


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

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request