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

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 Page
   
   
3. Under Current Page, click the + icon to the right of the row you wish to add the Carousel
   
   
4. In the Select Block Type pop up window, click on Carousel
   
   
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
   
   
6. Click the Pencil icon to the right of the Carousel block
   
   
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 settings
   
   
10. Change the Display Type to Custom HTML
    
    
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>
      <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
    
    
    
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 panel
    • 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
    
    
    

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