Three ways to display images in Squarespace 7.1 - Coffee Clips S01E02

21 Jan

Elwyn provides some handy image tips for students who are starting to get to grips with Squarespace.

At PixelHaze Academy, we believe that Squarespace is a great tool to help you create websites. Still, it can often be challenging for beginners to get your content looking great, especially the balance between text and image.

Today's Coffee Clip will go through all of the essential steps of setting up your images in Squarespace to create that much sought after 'magazine look'.

So, I'm going to show you three ways to display images in your Squarespace 7.1 site using background images, image blocks and a grid-style image gallery. We aren't covering all options, but this will get you up and running if you are new to Squarespace and want an image-driven website.

Banner (hero) images

There is no better way of making a bold statement on your web page than by leading in with a striking hero image or video. These are the equivalent of a giant roadside billboard in a city centre. They need to be bold, eye-catching and have a strong balance between images and headlines. The majority of hero units are built so that the entirety of the image is visible without scrolling. Therefore we need to crop them to widescreen (16:9 ratio) or even on a broader, thinner ratio to get most of the detail in place.

Squarespace Image Blocks

Image-wrap is a feature that enables text to wrap around the photo or image, both above and below. This format allows the content to flow. Squarespace has a great image block feature that will enable you to create a custom look using both image-wrap and working within the 12-column grid. Using the 12-column grid is ideal for scenarios where you have multiple columns in your design.

Squarespace Galleries

We will wrap up this tutorial by demonstrating how to add a simple but highly effective grid gallery in Squarespace. Galleries are ideal for scenarios where you need more visual impact via photo or illustration led designs. If you want to combine images with text that constitutes more than a title or short sentence, then image blocks are the way to go. The Squarespace admin area gives you a perfect customisation toolkit.

What are image file types accepted by Squarespace?

Squarespace-approved Image file types include .jpg, .gif, or .png. If you have images in one of those formats, even if your image has a transparent background, then you are good to go.

Unfortunately, .pdf, .psd, and .doc files aren't compatible as image formats; however, there is an easy workaround for pdf documents. You can simply add a link. In many cases, I will add an image block in Squarespace and link that to a pdf file that I have uploaded. I can also select it to open in a new browser tab, meaning the pdf document will display in the browser, preventing the website viewer from clogging up their downloads folder.

We hope to have a new Coffee Clip in the coming weeks that focuses on how you can utilise Icons in Squarespace for a bespoke look and feel. When it comes to the file name, please keep it simple and reference the image's content whenever possible. We also recommend using hyphens in between words and avoiding symbols to keep things simple for online use.

Where can you go next?

Suppose you have a good grasp of the basics and would like to find out how you can get the most from images in Squarespace. In that case, we are currently building a dedicated module for handling photographs and illustrations in our Squarespace Box of Tricks course on our Campus. You may also be delighted to find out that we also have a new, free course dedicated to combining the excellence of both Canva and Squarespace, allowing you to achieve a whole lot more with your Squarespace website design without breaking the bank. If you are working to a budget, we recommend giving this free course a spin before committing to any paid learning resources.

If you are ready for the next step, our ridiculously affordable annual membership plan is the option for you.

PixelHaze Academy VIP Lifetime Membership: https://campus.pixelhaze.academy/plans/60e8c3cb903e0d36e5cb1f20