Squarespace Image Layouts Defined
Between single images, gallery options, and banner images, Squarespace has various different ways you can format images.
This post is going to break down the 6 different individual image layouts you can choose from to design your Squarespace website.
Before we dive in, there are some notes I want to make you aware of.
To get a consistent look throughout your website, you’ll want all the images to be cropped the same size. You can do this before uploading your image or directly inside Squarespace.
The height of the images will affect how the image blocks look with text on them. For images that are wider than tall, you’ll want to minimize the amount of text you use. For images that are square or taller than wide, you’ll be able to add more text without the image looking too busy.
For each of these styles except inline, you can choose to include a link on the actual image or through a button. You’ll find that dropdown option under the design tab when you click Edit on the actual image.
Inline layout
For this option, you have many layouts.
You can choose to not include a caption or you can, with multiple design options.
Below the image
On a hover
Caption overlay
You can also add a link to the image (not a button) and enable Lightbox, meaning that the image will enlarge in a window on your screen.
You can change these options by clicking Edit at the top of the image, then clicking on the Design tab (similar to the image above).
Note: The text you add to the caption area becomes the alt text of the image. If you really want to include a caption below your image, I’d recommend the stack image layout option below.
This is an example of a caption overlay
Poster layout
This is how you add text over an image in Squarespace.
Note that this type of image doesn’t span the full width of the page. If you want that effect, you’ll need to upload a banner image.
Insert title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card layout
This is an image style with a colored block next to it. You can choose to make the card white or colored, which works great when you have a background behind the image block.
The image can either be positioned on the left or right. You can change that by clicking Edit on the image and clicking through to the Design tab.
Insert title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Overlap layout
This image style gives you the option of having a title that overlaps onto the image. This is great for minimal website designs.
Again, the image can either be positioned on the left or right. You can change that by clicking Edit on the image and clicking through to the Design tab.
Insert title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Collage layout
For even more overlay, this image style is great.
Just like the previous two image layouts, you can change the image positioning to be left or right by clicking Edit, then Design on the image.
Insert title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Stack layout
For this image style, the text goes below the image. This style is perfect for putting 2-3 images side by side with a description below them. As you can see below, I’ve added 3 stack images side by side.
If you just upload one image without any spacer blocks on the side, it will look overwhelming, especially with the text below it.
So how does this differ from the inline option? With the stack layout, you can choose to add a colored background behind the text, so it allows for extra design customization.
Insert title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Insert title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Insert title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to change the style of Squarespace image layouts
You’ll notice that if you’ve never added these specific image blocks to your website, they will show the default font of your template.
You’ll want these to match your brand fonts. If you haven’t already, I highly recommend that you create a style guide in Squarespace first. This will cut down on the back and forth of trying to figure out what fonts you’ve already been using.
Before we dive in, there are a few things to note…
Whatever you change to one specific image block will affect all other images with the same layout
Make sure that the text color pops against its background. For light backgrounds, you’ll want to use a dark text. For dark backgrounds, you’ll want to use a light text color.
Keep your subtitle font black. Especially if you have a colored title, keeping the subtitle text black will make the information easier to digest.
Minimize the use of different font choices. Keep it to 2 fonts.
To change the style and look of each image layout, go to Design - Site Styles. If you click on the individual image, you’ll see all the styling options for that particular block appear in the left side panel.
Common elements you can change:
Text color
Button color and style
Spacing between title and subtitle
Spacing between card and image
Transparency
Overlap
That’s the walkthrough of the 6 different Squarespace image layouts. Have questions or comments? Drop them below!