How to Change the Height of a Banner Image inside a Squarespace Brine Family Template

How to Change the Height of a Banner Image inside a Squarespace Brine Family Template 2.png

In this video, you’ll learn how to change the height of a banner image inside a Squarespace Brine family template.

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, 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 format your banner image in the Rally template, and for many of the other templates within the Brine family.

Written Directions

Templates within the Brine family have similar settings for how to change the height of banner images. Inside Rally, the same process of changing the height of a banner image applies to not only index pages, but also header images of regular pages.

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.

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.

How to Change the Height of a Banner Image inside a Squarespace Brine Family Template 1.png

2. Use the insert point to add spacer blocks

On my portfolio page below, you’ll notice that I have 8 spacer blocks. On other pages, I try to use 8 spacer blocks as well (or make it similar when I have text overlays).

How to Change the Height of a Banner Image inside a Squarespace Brine Family Template 3.png

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.

Instead, you’ll want to stack each spacer block on top of one another until you are happy with the height of the image.

How to Change the Height of a Banner Image inside a Squarespace Brine Family Template 4.png

That is how you would format your banner image in the Rally template, and for many of the other templates within the Brine family.

Have questions? Drop them below!



Looking to uplevel your current Squarespace website so you can attract more dream clients? Click below for more information!