How to create arch shaped images in Squarespace

Nov 24

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to create an arch-shaped image with a creatively placed border in Squarespace.

Yes, you can TOTALLY create a PNG like this in an image editing program like Photoshop, Canva pro and others––But this tutorial is for folks who don’t have access to those programs or don’t know how to create this using those; code to the rescue!

Be sure to edit the code to suit your own site style, trying different colors and changing the margin to fit your image style. Two other important things to note:

→ This code is specifically on page images and won't work for other types like galleries.

→ You can apply this to a single image by using its block id. There is a free chrome extension that I use to easily grab that info, available here. Please note that i am NOT affiliated with that company or extension in anyway - I just use it myself!

Download Transcript

Here is the main code from this tutorial for an inline image:

.sqs-block-image .image-block-wrapper { border-radius: 500px 500px 0 0; box-shadow: -50px 0px 0px orange; margin-left: 50px;}

→ Here is the code for overlap image types:

.design-layout-overlap img {border-radius: 500px 500px 0 0; box-shadow: -30px 0px 0px teal; margin-left: 30px;} .design-layout-overlap .image-overlay {background:transparent!important} .design-layout-overlap .image-card-wrapper {margin-left: 50px!important}

→ Here is the code for poster image types:

.design-layout-poster {border-radius: 500px 500px 0 0; box-shadow: 50px 0px 0px orange; margin-left: 50px;} .design-layout-poster img{border-radius: 500px 500px 0 0;}

→ Here is the code for collage image types:

.design-layout-collage img {border-radius: 500px 500px 0 0; box-shadow: -50px 0px 0px red; margin-left: 50px;} .design-layout-collage .image-overlay {background:transparent!important}

→ Here is the code for card image types:

.design-layout-card img {border-radius: 500px 500px 0 0; box-shadow: -50px 0px 0px pink; margin-left: 50px;} .design-layout-card .image-overlay {background:transparent!important} .design-layout-card .image-card-wrapper {margin-left: 80px!important}