How to Change the Height of a Banner Image Inside a Squarespace Brine Family Template
When I first started building my Squarespace website, changing the height of a banner image seemed to be information that was difficult to find.
That’s why when I started my YouTube channel, this was one of the first videos I wanted to make.
If you’re not familiar with Squarespace, its templates are categorized by different families and each family has a different range of customization. The Brine Family is known to be one of the best to choose a template from, and I absolutely love designing Squarespace websites with them.
I’m totally biased because every website I build for my clients is from the Rally template, which is part of the Brine Family.
In this post, I’ll show you how to change the banner height inside a Squarespace Brine family template. You can click the video below to watch it or keep reading for the written instructions.
Don’t already have a banner image on your website? Learn how to format & upload a Squarespace banner image here.
Video Transcription
For a lot of the index pages within Brine, they all have the similar setting for how to change the height of the banner image. I have an index page right here, but also I know within Rally, regular pages will also have a section where you can directly edit the header.
If you click on edit, for my banner image right here, you'll notice that I have eight different spacer blocks. If I delete these, this is what will make the image appear smaller. Now, if I click save, you'll see that it is much thinner and now you can see the word portfolio and my first client that I'm showcasing right there.
If you want to change a height, I would just recommend to use insert point to add a spacer block, or as many spacer blocks as you would like. I recommend that you add individual spacer blocks because you, for the most part, you want your banner images to be uniform across the website if you're using them at the top of each page.
Instead of just taking the spacer block and just dragging it down, it's better to have individual spacer blocks, that way you can count them so you know how high or how long you need to make your banner image.
When that happens when you're changing the sizing, sometimes the focal point will change when you check it on mobile and on tablet. If you need to change what shows up in a mobile you can click on banner, and then you can move the focal point around. So let's say I put it all the way over here, and then click save and looked at it in mobile, you'll see that now it's showing a lot more to the left.
That is how you would change the height of your banner image inside the Brine family, specifically the Rally template.
Written Directions
Templates within the Brine family have similar settings for how to change the height of banner images. As a Squarespace website designer, I love designing my client sites using the template Rally. Inside the Rally template, the same process of changing the height of a banner image applies to not only index pages, but also header images of regular pages.
If you’re not familiar with index pages, they pages stacked within a page. Wherever you see color blocks or images spanning the full width of a Squarespace page, that’s an index page.
For banner images that you place at the top of your website, you want to make them similar heights so that they are uniform across the site.
Note: Recommended Squarespace banner image size is 2500 x 1500px. If you uploaded them bigger, you might want to remove it and reupload it to your website.
To change the banner image height, you’ll want to follow these directions:
1. Click on the page you want to edit and hover over the top of the page to find the “Edit” button
If you don’t already have an image uploaded, you would click on “Banner” first to upload it. Then you would come back to this area.
2. Use the insert point to add spacer blocks
Hover your mouse on the left hand side until the insert point appears. Click it and you’ll see the different content blocks appear. Choose the spacer block.
On my portfolio page below, you’ll notice that I have 8 spacer blocks. For banner images at the top my other pages, I try to use 8 spacer blocks as well (or make it similar when I have text overlays).
3. Add individual spacer blocks instead of one that you enlarge
Looking at the image below, you’ll notice a small dot that appears at the bottom of the top spacer block. This is how you can control the height of each block, by dragging it down or up.
You’ll want to refrain from doing this on each page because you won’t be able create uniform image heights across each page.
Although it’s more time consuming, you’ll want to stack multiple spacer blocks on top of one another. That way, you’ll know how many spacer blocks you’ll need at the top of each page to keep the height of the image uniform.
Then click Save.
4. Check it and make adjustments if necessary
Once you click Save, the window condense to show you the side panel again. Now you’ll want to make sure it looks perfect across all screens.
For desktop view - click on the icon in the upper left hand corner to enlarge the page again.
For tablet and mobile view - click the dropdown arrow to click to the different screens.
For the tablet and mobile view, the focal point on the image is what will show when it condenses on these smaller screens. To change the focal point, click Banner.
On the image, you simply drag is across the photo.
There you have it! That is how you would change your banner image height in the Rally template, and for many of the other templates within the Brine family.
To review, you want to:
Click on the page
Add the image
Once you click save, hover over the top of the image and click the “Edit” button
Click the insert point and add a spacer block
Stack individual spacer blocks on top of one another until you reach a height you’re happy with
Check desktop, tablet and mobile views to make sure it appears the way you want
Have questions? Drop them below!
Looking to uplevel your current Squarespace website so you can attract more dream clients?
Click below for more information!
Looking for more Squarespace tips? You’ll also love…