How to create auto-scrolling testimonials in Squarespace

You’ve seen those automated scrolling testimonials on websites, it’s a pretty cool feature that allows you to display a lot testimonials without taking up too much space. But how do you do it on Squarespace? Continue reading for a step-by-step tutorial.

Auto-scroll testimonial example (scrolling every 3 seconds):

Step-by-Step Tutorial for Testimonial Auto-Scrolling on Squarespace

You’ll need:

  • Adobe Illustrator or some other similar software (I’ll be using AI in the demo)

  • A Basic Squarespace plan

  • 2 or more testimonials

  1. Create a new document about 1280px wide and 420px tall. That’ll give you a canvas that looks like this:

Adobe Illustrator for testimonials

2. Add a background using the rectangle tool and cover the entire canvas. Fill in the canvas with whatever background color you want or match your website’s background.

3. Use the Type Tool to add text. Make sure to leave a decent amount of padding on both sides as seen in the image below.

Adobe Illustrator Squarespace Testimonials

4. Add and experiment with your text to see what works well for you. Make sure it matches the rest of your website.

Image below:
Testimonial font: Futura PT Light, size: 42pt, line height: 56pt
Source font: Futural PT Medium, size: 30pt, line-height: 41pt

Adobe Illustrator Squarespace Testimonials

5. Go to File and Export As. Save the file as a png.

6. I’d suggest testing out your first testimonial on your Squarespace site before making the others.

7. Now that you have at least 1 testimonial created, we can add them to your Squarespace site using a Gallery Page. Create a new Gallery Page and name it ‘Testimonials’. Add the testimonial images you just created.

Squarespace Gallery Page

8. Go the the page you want your testimonials to be displayed. Add a Carousel Gallery Block to the page.

9. From the existing galleries, choose your testimonial gallery.

Squarespace Carousel Gallery

10. Under the ‘Design’ tab select ‘Automatically Transition Between Slides’ and select the amount of seconds. Select ‘Show Next and Previous Controls’ if you also want arrows for users to click on. Even though your testimonial images may be cut off, click apply. We’ll fix that next.

Adobe Illustrator Testimonial for Squarespace

11. Use the selector on the bottom center of the image and slide it up and down to get the desired positioning of the testimonial.

Adobe Illustrator Squarespace Testimonial

Save the page and you are good to go! Let me know if you found this tutorial helpful.