One of my favourite ways to add fun design to Squarespace websites is by using the Image Block feature to incorporate dynamic brand elements all over my websites.

The image block has 6 display options:

• Inline

• Overlap

• Collage

• Poster

• Stack

• Card

Let’s get into some fun ways to use them around your website!

The Inline Image

An inline image is just a basic image without any bells whistles - but we can make them fun! I like to stack images, add borders, and include brand elements to elevate my images and really integrate them into my website. Here are some examples from my own site and some client sites! (I design all these as Transparent PNG’s on Adobe XD - which is free!)

The Overlap Image

The fun part of the overlap image is being able to overlap the title with your image with a background colour. I love the ability to overlap elements because it makes your website immediately feel a lot more custom.

1. Add an Image block to your page + switch it to Overlap

2. Head to your design settings + play around with overlap percentage + switch the background colour to match your brand and play well with the images you plan to add!

3. Add your image + text!

The Collage Image

The Collage image block has to be my favourite one to use - especially when you want to call attention to important information (like your product offering!).

1. Add an image block and change it to Collage.

2. Add your image + text.

3. Head to your design settings + play around with the percentage your image fills and the percentage your card fills. My fave is when they overlap, so try something like 55% for both and see how that looks!

The Poster Image

The poster image basically makes the image the background for your text! I recommend using these for small text areas and not large ones because text can overflow when the page gets re-sized. So avoid that by doing as little text as possible.

1. Add an image block and change it to Poster.

2. Add your image + text (and button with a link too!). I recommend a simple image to make the text as readable as possible.

3. Head to your design settings and adjust any overlays and fonts!

The Card Image

Ok if there are favourites, there are least favourites - and this is the card image block for me. It doesn’t feel terribly different from using an inline image block. Especially if you add a colour background, it feels unintuitive so I avoid this image block in general. Sorry I’m a hater 😂 I wish the image would re-size to fit the whole height of the image card because then I’d love it!

See what I mean? ↓ (Re-size the window to see what I mean about the image taking up the space!)

I hoped that help you think of some fun ways to add dynamic design to your Squarespace website! Keep following along for more posts like this.