How to use the image shapes feature in Squarespace

Image blocks got an upgrade in late 2021, giving us the option to create an interesting shape out of any image block, no matter what layout you choose.

This tutorial video will show you how to find this fancy new feature; steps outlined below:

  1. Add an image or double click on an existing one

  2. Click on the Design tab

  3. Toggle from original to shape

  4. Click the word shape

  5. Select the image ratio

  6. Pick any shape!

Below are examples of each shape being applied to a photo of Gus the Pineapple, the coolest pineapple on the internet and the official mascot of InsideTheSquare.

You can pick from three different size ratio’s for these shapes:

 

1:1 Ratio Image Shapes

squarespace image shape - round - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - rounded top right corner - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - diamond - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background

SEARCH THE TUTORIAL ARCHIVES

Like this tutorial?

Share it with your Squarespace friends!

squarespace image shape - wide plus sign - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - four overlapping circles - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - reverse starburst with four points - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - lower left corner - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - lower left corner stairs - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - octagon - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - double plus - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - rounded square - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - pinched square - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - rounded double plus - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - expanded octagon - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - rounded hexagon - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - gear shape - 1:1 ratio - image is a pineapple wearing white sunglasses on a yellow background
 

2:3 Ratio Image Shapes

squarespace image shape - oval - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - hourglass - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - wide to narrow parallelogram - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - paralleogram - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - right leaning oval - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - arch - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - vertical venn diagram - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - tombstone - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - circle on top of square - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - three stacked ovals - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - egg - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - reverse burst - 2:3 ratio - image is a pineapple wearing white sunglasses on a yellow background

3:2 Ratio Image Shapes

squarespace image shape - venn diagram - 3:2 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - three ovals connected horizontally - 3:2 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - two stacked ovals - 3:2 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - oval - 3:2 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - slanted oval - 3:2 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - octagon - 3:2 ratio - image is a pineapple wearing white sunglasses on a yellow background
squarespace image shape - pinched rectangle - 3:2 ratio - image is a pineapple wearing white sunglasses on a yellow background

Here is an overview of all shapes available in all three ratios:

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

How to change the color of header social icons on a hover

Next
Next

How to add a watermark to gallery images in Squarespace