How to Create Professional Testimonials on Squarespace
TL;DR:
- Duplicate existing sections to keep content while changing the design
- Switch rectangular images to circular frames using the 1:1 ratio option
- Align text blocks properly and adjust spacing for visual balance
- Add logos in the top-left corner, keeping them smaller than profile pictures
- Test your design on mobile and adjust image sizes as needed
- Use creative workarounds for design elements Squarespace doesn't support directly
Creating professional-looking testimonials on Squarespace doesn't require starting from scratch. Here's how to transform your existing testimonials into polished, engaging content that works across all devices.
Starting with Your Existing Content
Duplicate an existing testimonial section rather than building from zero. This keeps your content intact while you experiment with new designs. You can always compare the two versions and delete the one you don't need.
To change your image from rectangular to circular, select your image and choose the "1:1 ratio" option. This gives testimonials a more modern, professional appearance that draws attention to the person giving the testimonial.
Getting Your Images and Text Right
Once you've switched to circular images, resize them to fit your new layout. Adjust the image frame height so everything looks proportional.
Text alignment makes a huge difference to how polished your testimonials look. On Mac, use Command + A to select your text block, then align it to the left so it lines up neatly with your image. This creates a clean, organised appearance.
Working with Layout and Spacing
Change the background colour to help this testimonial stand out from others on your page. In the layout settings, adjust your section height and padding. Try 60 pixels of padding for both top and bottom – this creates breathing room without making the section too sparse.
Spread your elements out enough to avoid a cluttered look. White space is your friend here.
Adding Logos Effectively
Place logos in the top-left corner of your testimonial. If you don't have a client's logo, use a representative image in the same circular frame style as your profile picture.
Keep logos smaller than the profile picture. The testimonial text should be the star, with the logo providing context without stealing attention.
Creative Design Solutions
Squarespace doesn't support vertical lines directly, but you can work around this. Try using different shapes or overlay text on a boxed background to create visual interest and separation.
These workarounds often look more creative than standard design elements anyway.
Making It Work on Mobile
Test your design on mobile devices and adjust accordingly. Reduce image sizes if they're too large and manually adjust layouts that don't translate well to smaller screens.
Most of your visitors will see your testimonials on mobile, so this step isn't optional. Preview your design in mobile view before you call it finished.
FAQs
Should I duplicate an existing section for a new design?
Yes, duplicating keeps your original content safe while you experiment. You can easily compare versions and delete the one you don't want.
How do I make testimonials look good on mobile?
Resize images for smaller screens and adjust layout elements manually. Focus on readability and making sure nothing gets cut off or squashed.
Can I add vertical lines to my testimonial design?
Not directly, but you can use shapes or box overlays to create similar visual effects. These often look more interesting than plain lines anyway.
Jargon Buster
Section – A block of content on your webpage that you can style and position independently
1:1 Ratio – Makes images square, which creates perfect circles when combined with Squarespace's circular frame option
Padding – The space between your content and the edges of its container
Mobile View – How your website appears on phones and tablets
Wrap-up
Good testimonial design builds trust with your visitors and makes your content more engaging. These techniques work whether you're showcasing client feedback, employee testimonials, or customer reviews.
The key is testing different layouts and keeping mobile users in mind throughout the process. Your testimonials should look professional and be easy to read on any device.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for in-depth tutorials and expert guidance.