Krishna Solanki Designs

View Original

4 Ways To Display Testimonials On Your Squarespace Website

Testimonials are a great way to provide instant credibility and trust to your services or product, especially when they are showcased on your website.
Naturally, you want this to be displayed in a nice, easy to read, and pleasant manner so don’t just throw the words together without formatting or without an image.

Instead, take a look at the 4 ways I am sharing today to display your client testimonials on your Squarespace website so that it is engaging and eye-catching.

1 | As a List - Using the “Image” and “text” block only

This is probably the simplest and most straightforward out of the 4 ways I am mentioning, especially in terms of time to set up and ease of compilation.  I also use this currently on my own testimonials page, but watch this space though, as I plan to update this soon…

Use the "Image" block and "Text" block to respectfully add both the image and text and place them side by side.  Almost like in a table layout if you like.

Under each testimonial, I have added a line to subtly separate each one.

To add a little attention I have highlighted a sentence from the testimonial and given it a heading style so that it stands out. This just means it’s easier to skim read the page, and words if you go down this route. It also breaks up any long paragraphs of text.

2 | Snippet on a single page - using the “Markdown” block

Creating a testimonial snippet is a great way to add to encouragement or reinforcement to a page, especially for example on a “work with me” page, a sales landing page, or a product page. Not only will it break up the page - if cleverly styled, but it will also help your potential clients to see what others are saying about the service/product you offer.

I have used testimonial snippets on my site in a few places:

  1. On my homepage,

  2. On my Portfolio page, and

  3. On my Work With Me page.

You can see this is styled slightly differently to the "testimonial list", in that I have removed the image and added a background colour to the actual words.

The background colour is a simple CSS style that helps it stand out on the page it is on, without being too prominent.
Using the "Markdown" block, I have added a class called “testimonialGrey” and given this class the following CSS style elements:

  • background-color: #ebebeb;

  • padding: 20px;

This simply means the testimonial will be placed with a box, which has been given 20px padding all around (so top, bottom, left and right) and a background colour of #ebebeb - which is the grey.
If you want, you could change the grey by changing the # value.

using the “Summary” block

This is a slightly fancier way to add a testimonial to a page.  I say it’s fancier as the slider is a pretty neat way of showing more than one testimonial within the same space, however, it is a slightly longer process and requires a little more work.

It uses the “Summary” block, which uses the “Blog” page set up.

You can use the slider and display text only OR text and images.  I’ll walk you through both setups so you can use whichever one you like!

3 | Slider - Text only Testimonial using the “Summary” Block

  1. Set up the Testimonials like a Blog page.
    Under the Not Linked section of your Squarespace backend, click the + icon to create a new Blog, you can call it whatever you like, but for ease calling it, a Testimonial is probably wise.

  2. After clicking the new Testimonial Blog, add a new post by clicking the + icon, top right corner.

  3. In the Edit Post screen you can enter a “post title” however this will be for your purpose only, this will not show as part of the actual testimonial.  I personally use this as a great way to identify the testimonials, so write the clients name here.

  4. Then the actual testimonial is written in the Options tab, under Excerpt, so add your testimonial text here.  Once you have added the text, save and publish this testimonial.  By “publishing” the testimonial, it will make it visible for when you want to show it on the actual page.

  5. Repeat step 4 for as many client testimonials you want to add.

4 | Slider - Text and Images Testimonial using the “Summary” Block

  1. Set up the Testimonials like a Blog page.
    Under the Not Linked section of your Squarespace backend, click the + icon to create a new Blog, you can call it whatever you like, but for ease calling it, a Testimonial is probably wise.

  2. After clicking the new Testimonial Blog, add a new post by clicking the + icon, top right corner.

  3. In the Edit Post screen you can enter a “post title” however this will be for your purpose only, this will not show as part of the actual testimonial.  I personally use this as a great way to identify the testimonials, so write the clients name here.

  4. Then the actual testimonial is written in the Options tab, under Excerpt, so add your testimonial text here.

  5. Add an image to the testimonial by uploading an image to the Thumbnail image.  Once you have added the text and image, save and publish this testimonial.  By “publishing” the testimonial, it will make it visible for when you want to show it on the actual page.

  6. Repeat steps 4 and 5 for as many client testimonials you want to add.

Adding the testimonials to a page you have already set up. Follow the steps below:

  1. Go back to the Pages section and choose the page you want to add the testimonials slider too. Edit that page.

  2. Add the Summary Block - Carousel, and then choose Testimonials.(IMAGE)

  3. The in the Layout tab, you can add “Testimonials” as the Header Text if you want, otherwise, you can leave this blank.

  4. Aspect Ratio is relevant to the aspect ratio of the image.  If you have added an image you can set this to Auto or Square.
    Tip: Make sure the image you are uploading is the right size, and all the images you use for all your testimonials are all the same, this is for consistency on your slider.

  5. Then you want the Item Per Row set to 1 and then set the Text Size and Text Alignment.

  6. Then under the Display Tab, you can to decide how many Testimonials to show in the slider.  Leaving this to 30 will show as many as you add, up to 30 max.
    IMAGE

  7. Then to show only the words for the testimonial, you want to have the show Excerpt button “ticked”.

  8. If you wanted to display the image and the words, you would also “tick” Show Thumbnail as well as show Excerpt.

  9. Primary Metadata and Secondary Metadata should both be None.

And that’s it! That’s 4 different ways to display your testimonials on your Squarespace website.


How have you displayed your testimonials? Which way do you prefer?