How to Create a Squarespace Testimonial Slider

 

Testimonials are a GREAT way to demonstrate social proof that you can do what you say you do through client recommendations.

Using a testimonial slider on your website is a snazzy way to display your client recommendations without taking a ton of room and it looks pretty fresh!

Watch this video or follow the step by step guide below:

 

STEP BY STEP INSTRUCTIONS

 
  1. Navigate to PAGES in your Squarespace website and unlinked pages

  2. Click “+” icon and add a BLOG PAGE. Once you create a new page, title it and you’ll be taken to the new blog page where we’re going to add our testimonials

  3. Click the “+” Icon to add a new blog post. Title this post whatever you want, you’re the only going that’s going to see the title. Then, click OPTIONS at the top of the pop-up. Add a Thumbnail - This thumbnail must be a perfect square. If it’s not, don’t sweat -use the Squarespace image editor and crop it to a 1:1, perfect square.

  4. Add the testimonial in the EXCERPT section, Click SAVE & PUBLISH

  5. Navigate to the page and section you’d like to add your testimonial slider to and add a CONTENT SUMMARY BLOCK > CAROUSEL

  6. Select the TESTIMONIALS BLOG in the new content summary block menu.

  7. Click LAYOUT in the top of the menu on this pop-up. Change the following:

    • Delete Header Text

    • Aspect Ratio: AUTO

    • Items per row: 1

    • Text Alignment: CENTER

  8. Click DISPLAY and make the following changes, then save!

    • Deselect SHOW TITLE

    • Primary metadata: NONE

  9. Navigate back to the Squarespace main navigation and click DESIGN

  10. Click CUSTOM CSS

  11. Enter the following code and click SAVE:

    .summary-thumbnail img {  
     border-radius: 50%;
      padding: 5px;
      max-width: 20%;
      margin: auto;
     }
    
    .summary-thumbnail-container { 
      pointer-events: none !important; 
    }

AND VOILA! Your Testimonial slider should now be customized to look like the example at the top of this post. Play around with padding in the Custom CSS if you want to size up or down the main photo.


Did you find this post helpful?

Leave a comment below and pin this post for later! Have questions? Drop them in the comments!

 
 
 
Previous
Previous

Top 5 Squarespace Hacks You Should To Know!

Next
Next

5 Signs Your Website Needs a Facelift