Quick and easy way to change your Squarespace image shape

It’s now quick and easy to change Squarespace image shapes using just the image design panel! This includes circles, arches, curved corners and more!

This is great news for our DIY website community as it means no coding, or complicated hacks required!

When adding images to our Squarespace websites we have always been limited to the set sizes offered by Squarespace - always square or rectangular in size. If we wanted the image to appear as a certain shape, or add curved corners (to one or all of the corners) we would have to add CSS code. For the DIY website builder this can often feel quite complicated, and more hassle than it’s worth. But, not anymore friends!!

We asked, and Squarespace have now delivered! Using the standard image edit panel we can now change the shape of images, or add curves at the click of a button. No code needed, and available on all price plans! Yes, we are still limited to the shapes Squarespace has available, but they have covered the most popular ones, and with a bit of creativity I think we’ll get along just fine!

Diamond image shape Squarespace
 
Squarespace arch image
 
Squarespace circle image

Add image to your Squarespace website

Click on the image edit feature (underlined pencil icon) as you normally would to update the content, then click on the ‘Design’ tab. Here you will see two new options - Original or Shape.

When you click on shape you will see three further tabs available containing various shapes of different aspect ratios (square, landscape and portrait). Click on any of the shapes and you will see the outline of your image change. It’s as simple as that! Depending on the shape you choose you may need to adjust the image focal point (done by clicking on content and moving the small circle shown on the image thumbnail).

Circle image on Squarespace
Edit Squarespace image shape
Alter Squarespace image shape
 

Change shape of Squarespace image

To add curved corners to an image click ‘Original’ (instead of shape), and here you have the option to curve all corners, or individual corners. Play around with the number you input to achieve different levels of roundness.

 
Add curved corners to image
Leaf shape image Squarespace
 
 

Watch video tutorial

Check out this quick (40 second) video which outline all of the above. The best thing about this new feature is that it’s still compatible with the various image layouts and animations meaning it can be used in many different ways!

Now it’s time to let your DIY website creativity flow!

 
Previous
Previous

How do I add a Squarespace accordion block to my website?

Next
Next

How to design a links page for Instagram on your Squarespace website