How to Change the Shape of Image Blocks in Squarespace

Changing the shape of image blocks in Squarespace is a built-in feature that can help you create a more dynamic and visually appealing design. Instead of just displaying rectangular or square images, you can adjust the shape and aspect ratio to fit your site’s style.

In this tutorial, I’ll walk you through how to change the shape of image blocks in Squarespace and show you how to fine-tune their placement for a more professional look.

Watch the video

Check out the YouTube video below. 👇🏼

Step 1: Adding an Image Block

1. Enter Edit Mode on your Squarespace page.

2. Click Add Section, then select Blank Section for full control.

3. Click Add Block, then choose Image Block.

4. Drag the block to the center or any preferred position on the page.

5. Click the Pencil Icon on the image block, then click Add Image.

6. Upload an image or browse the Squarespace stock image library.

At this point, your image will be added as a standard rectangular shape.

Step 2: Changing the Image Shape

1. Click on the Pencil Icon to open the Image Block settings.

2. Select the Design Tab and look for the Shape option.

3. By default, the shape will be set to "Fit" or "Fill", but you’ll see a Shape option after that.

4. Click Shape, and it will automatically convert your image to a circle.

5. Click the Shape again or the Arrow over to the right to explore different shape options.

Available Shape Options:

• 1:1 – Perfect for profile pictures or product images.

• 2:3 – Best for mobile-friendly vertical images.

• 3:2 – Works well for banners or wide photos.

Click through the various aspect ratios to find one that fits your website’s design.

Step 3: Adjusting Image Position & Size

Once you’ve chosen a shape, you can refine the image’s placement and size:

1. If the image appears off-center, click and drag it within the frame.

2. If the image does not fill the block completely, go back into Design Settings and select Stretch to get it to fill the block container.

3. Adjust the height of the section if needed to give the image more space.

💡 Tip: Stretching the image will ensure it fits edge-to-edge within its section for a cleaner look.

Step 4: Enhancing the Design with Text & Overlays

To make your image block more engaging, you can add text over the image:

1. Click Add Block, then choose Text Block.

2. Type a heading or description that complements your image.

3. Use the drag handle to position the text over the image block.

4. Adjust the font size and color to match your design.

If you want a text overlay effect, try adjusting the section background color for contrast.

Final Thoughts

Squarespace’s built-in image shape editor makes it easy to customize your website’s design without using custom code. By following these steps, you can:

• Change the shape of image blocks to better fit your layout.

• Adjust placement and aspect ratio for a professional look.

• Add text overlays and fine-tune spacing to enhance your design.

If you found this tutorial helpful, be sure to subscribe to my newsletter below for more Squarespace tips. And if you’d like me to design a custom Squarespace website for you, feel free to reach out!

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.