Exploring Image Blocks in Squarespace

Squarespace offers a range of image blocks that allow you to effortlessly enhance your site's aesthetic. Whether you're a seasoned Squarespace user or new to the platform, this article will guide you through the types of image blocks available, giving you the info you need to make your website uniquely yours.

Image Blocks in Fluid Engine Sections:

Let's start with the image blocks found in fluid engine sections. These blocks provide specific settings to ensure your images fit seamlessly into your website's design. The three key options to consider are fit, fill, and shape.

Fit

The "fit" option enables you to control how your image is displayed within the block. Choose "fit" if you want the entire image to be visible, adjusting its size proportionally to fit within the block without cropping or distorting it. This is great for showcasing the full picture without compromising its integrity.

Fill

If you're looking to make a bold statement, the "fill" option is your go-to. When selected, Squarespace scales your image to fill the entire block, ensuring there are no empty spaces. While this may result in cropping parts of your image, it can create a captivating effect and draw attention to the most essential elements.

Shape

With the "shape" option, you have the flexibility to choose between various shapes for your image block. Squarespace provides a selection of shapes such as circles, squares, and rectangles, allowing you to add a touch of creativity and customization to your website. Experiment with different shapes to find the one that best complements your content and style.

Image Blocks in Classic Editor Sections and (Most) Collection Pages:

Moving on to image blocks in classic editor sections and collection pages, like blog posts, events, and additional details, you'll find a range of premade design options to simplify your creative process. These images can also be given a unique shape in their own design menu. You’ll find color, font, and spacing options inside your Site Styles menu. Currently, Squarespace offers the following premade layout options:

Poster

The poster design layout lets you add a title & description text over an image.

Stack

Stack allows you to add a title and description under the image that will always be placed directly under it on any screen size.

Collage

This option shows a block of text with a solid background color, slightly overlapping the image.

Overlap

A combo of card and collage, this design displays the title overlapping the image and the description next to it on larger screens.

Card

This image type displays title & description text next to the image, and them moves them below on smaller screens.

---

What images will you work with? 🤔 Hopefully, all of them!

With these versatile layouts at your disposal, you can unleash your creativity and take your website's visual appeal to the next level.

But hey, the excitement doesn't end here! Check out my free image tutorials listed below. They'll show you how to change the style of your images way beyond what the design menu can do.