Creating an "as featured in" logo bar on Squarespace
Social proof is an essential part of any business strategy. What’s more impressive: you talking about how awesome your products/services are, or someone else literally demonstrating the results that you’ve gotten for them?
Now, we’re not knocking self-promotion, but sometimes, it’s more effective to have someone else do the talking for you and a logo "as featured in" or "social proof" bar is by far one of the easiest ways to showcase this!
You’ve definitely seen this design feature before. Whether it’s through the use of the phrase “as see on” or “featured in…” followed by a string of logos, or an entire page of client logos, this design tactic powerfully demonstrates just how much of a difference you’ve made in the span of a single glance.
Some examples of major brands that have utilized this design technique:
The great thing about Squarespace is that their flexible block-based website builder allows you to replicate this easily and in several different ways. So, if you want to learn how to create a logo/featured bar to build authority, credibility, and trust for your business, then keep on reading!
Basics:
First and foremost, what makes a logo bar so compelling is that all the images are streamlined. To ensure aesthetic uniformity across the board, here are some quick pointers:
Ensure that all logo sizes are the same. We like to use Canva to create graphics that have the same 650px x 250px dimension. You can of course change the image dimensions to fit your needs and scale the logos so that the texts are relatively the same size.
Using transparent PNG versions of brand logos will make the images fit in more cohesively with your overall branding. When the logos are transparent, the background color of your site will show through and it’ll be easier to place these wherever you’d like without needing to worry about how it fits in with the rest of your website. (Just make sure to tick the “transparent background” box when you’re downloading your image.)
You do need Canva Pro for this feature, so if you don't have it, see our tip below.
Another way to ensure uniformity is to simply place these brand logos against a white background. Or, add a background color to the page in Canva that matches the background color of your site.
Creating A Logo Bar With Just Images (works for both Squarespace 7.0 and Squarespace 7.1)
Creating a logo or feature bar with just images is one of the simplest ways to execute this design feature. Here’s how you would do it!
Navigate to the page and area that you’d like to build your logo bar
Click EDIT
Hover over the section and click the + to add a new block
Select IMAGE and drag the block to where you’d like it on the page
Upload your logo images into the content section of the block
Hover over the top edge of the logo and click the + to add a new image block
Select IMAGE and drag the block next to the first logo image block
Repeat the process until all logo image are uploaded in a line
Click SAVE to apply your changes
Notes:
Please note that you may have to adjust the borders of each of the images so that they are even in size. You might also have to add or omit an image so that they all fit on one line.
On mobile, a logo bar created with just image blocks will stack each of the images on top of each other
Creating A Logo Bar With A Gallery Block in Squarespace 7.0
If you have a Squarespace 7.0 website, another way to create a logo or feature bar is by using the gallery block!
Navigate to the page and area that you’d like to build your logo bar
Click EDIT
Hover over the section and click the + to add a new block
Select GALLERY and drag the block to where you’d like it on the page
Upload your logo images into the CONTENT section of the gallery block
Click APPLY to exit out of the gallery block
Click SAVE to apply your changes
Modify the gallery block:
The logos may not be displayed exactly as you want them to be but fret not, here are some simple modifications to make it look better!
Hover over the page and click EDIT to make adjustments
Click the GALLERY block
Click EDIT in the upper right corner
Navigate to the DESIGN tab of the gallery block
Click the GRID format to showcase all the image logos in a single line
Change the ASPECT RATIO to match that of your logos
For 650px x 250p images, select the 2.40 anamorphic widescreen aspect ratio
You can also uncheck CROP IMAGES to display logo images in their original size
Adjust the sliders to decide on the number of thumbnails you’d like on one line and the amount of padding you’d like between each of the images
Click APPLY and SAVE when you’re done with all edits
Creating A Logo Bar With a Gallery Section in Squarespace 7.1
In Squarespace 7.1, you can create a logo or featured bar with a gallery section! Gallery Blocks aren't widely available right now in Squarespace 7.1.
Navigate to the page and area that you’d like to build your logo bar
Click EDIT
Click the ADD SECTION button that’s displayed on the lower border of the previous section
Select GALLERY on the left
Select the first top right grid option
Click the PHOTO icon in the upper right corner to edit the gallery contents
Click the + button to add photos or drag and drop your logo images into the gallery content
Click CLOSE in the upper left corner to exit out of the gallery
Click DONE in the top left corner to save your changes
Modify the gallery section:
The logos may not be displayed exactly as you want them to be so here are some ways to modify the display.
Click the PENCIL icon in the upper left corner to edit section details
To create a logo bar, select the gallery type to “grid: simple”
Adjust the WIDTH according to how far across the screen you want the logos to appear
Change the ASPECT RATIO to match that of your logos
Match the number of COLUMNS to the amount of logos that you have
Adjust the spacing between images to your liking.
There you have it – how to create a logo or featured bar in Squarespace!
Want more Squarespace tutorials to revamp your site? Check out the posts below 👇
10 fun customisations for your Header Navigation menu in Squarespace
How to create overlapping sections in Squarespace Fluid Engine
How to add a background color to a text block in Squarespace
How to add Parallax in Squarespace 7.1 (and other fun background animations!)
How to create a ‘featured post’ slider in Squarespace 7.1 & 7.0
If you liked this post, Pin it to Pinterest! 👇🏻