Slideshow-Like Testimonial Section

What does this code do?

This code snippet will allow you to create a slideshow-like testimonial section on your Squarespace Website.

I used this strategy on my own website (not including the thumbnail image). I then used a background image of quotation marks to complete the effect.

Here is an example using a thumbnail image. The branches are added using a background image.

Create a Blog in Your Not Linked Section

The first step is to add a Blog named “Testimonials” to your Not Linked Section. Create your Testimonials by adding a Blog Post and filling in the excerpt. If you would like an image to appear with the testimonial, then add the image as a thumbnail under Options. It works best if you use a square image.

You do not need to fill out any other information. I would also turn off SEO in the Blog’s Gear Icon.

Add the Testimonial Section

Go to the page on your website you would like the testimonial to appear on. Add a Carousel Summary Block where you would like the testimonial to appear.

1. Under Content, choose the Testimonial Blog.

2. Under Layout, delete the Header Text, choose the 1:1 Square Aspect Ratio, and select 1 Item Per Row.

3. Under Display, select to only show the excerpt (and thumbnail if you want an image). Then select no Primary or Secondary Metadata.

Note: At this point you should see your image and testimonial posts appear. Your image may be really big.

Code Snippets

Copy and paste this code into Design > Custom CSS

Squarespace 7.0

#PAGEID{
  .summary-thumbnail {
    padding-bottom: 2vw !important; /*spacing between image and text*/
  }
  .summary-thumbnail-outer-container a{
    pointer-events: none !important; /*turns off the ability to click on the image */
    cursor: default !important;
  }
  .summary-thumbnail img{
    position: relative !important;
    width: 15vw !important; /*width of the image */
    height: 15vw !important; /*height of the image */
    top: 0vw !important;
    margin-right: auto;/*centers the image */
    margin-left: auto; /*centers the image */
  }
  .summary-excerpt p{
    font-size: 1.2rem; /*excerpt text size */
  }
}

Squarespace 7.1

#COLLECTIONID #page .page-section:nth-of-type(1){
  .summary-thumbnail {
    padding-bottom: 2vw !important; /*spacing between image and text*/
  }
  .summary-thumbnail-outer-container a{
    pointer-events: none !important;  /*turns off the ability to click on the image */
    cursor: default !important;
  }
  .summary-thumbnail img{
    position: relative !important;
    width: 15vw !important; /*width of the image */
    height: 15vw !important; /*height of the image */
    top: 0vw !important;
    margin-right: auto;/*centers the image */
    margin-left: auto; /*centers the image */
  }
  .summary-excerpt p{
    font-size: 1.6rem; /*excerpt text size */
  }
}

Bonus Tip #1

The height of the section will be determined by the biggest excerpt, it will not be responsive to the height of each individual excerpt. So, try to keep your excerpts similar in length.

In addition, to help style this for the smaller excerpts, I like to center the testimonial within the section. You can do this by copying and pasting the below code before the last bracket in the above Custom CSS.

.sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide  {
  vertical-align: middle;
}

Bonus Tip #2

Pair this code with the following to have it automatically scroll through your testimonials.

Autoplay Carousel Summary Blocks

How To Use It

1. Create the Testimonial Blog Page.

2. Insert the Testimonials as a Carousel Summary Block.

3. Copy and paste the code as indicated above.

4. To learn how to find a collection id, page id, or block id check out our Start Here guide.

5. If using Squarespace 7.1, change the 1 to match the section you are trying to change.

6. Edit the CSS to match the height, width, and placement of the image as well as the size of the text.