How to Add a Logo Wall in Squarespace

Adding social proof by displaying your client logos is a great way to boost your credibility. Maybe you’ve tried adding logos to Image Blocks and tried to get them to line up and sized correctly. Then you’ve tried using a Blog + Summary Block but the logos get super-sized and cropped unappealingly. But here’s what worked for me.

  1. Create a Blog with your logo images as thumbnails

  2. Go to the page you’d like to have your logo wall, insert a Summary Block, set the Display to Grid, and ensure that only the thumbnails are displayed and nothing else (i.e. uncheck ‘Title’ & ‘Excerpt’ and set all Metadata to ‘None’).

  3. Add the code below to Design > Custom CSS

  4. Adjust the margins & mobile width to your liking.

/* Logo spacing */ .sqs-block-summary-v2 .img-wrapper img { object-fit: contain !important; left: auto !important; height: 100% !important; width: 100% !important; } .sqs-block-summary-v2 .img-wrapper { margin: -2em auto !important; } /* No Click */ .sqs-gallery-design-autogrid { pointer-events: none !important; } /** Mobile **/ @media only screen and (max-width: 640px){ /* Summary Block width */ .sqs-gallery-design-autogrid { width: 65vw; margin: auto; } /* Logo spacing */ .sqs-block-summary-v2 .img-wrapper { margin: -2.5em auto !important;} }

Hope this post was helpful!


Need help with that?

Our project calendar is now open for booking!

Get Web design info →

 



Previous
Previous

The Benefits of Working with a Design Studio on Retainer

Next
Next

Great Service Entrepreneur Website Design: Best Practices & Examples