using the squarespace image block for dynamic design
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.
Add an Image block to your page + switch it to Overlap
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!
Add your image + text!
The Overlap Image in action!
See how we included an image that already added overlapped images + brand elements? Get creative with it! (You’re gonna keep seeing this in the examples to come.)
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!).
Add an image block and change it to Collage.
Add your image + text.
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!
Collage Image
Maybe call attention to your product!
And don’t forget you can choose to have the image on the right side or left side!
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.
Add an image block and change it to Poster.
Add your image + text (and button with a link too!). I recommend a simple image to make the text as readable as possible.
Head to your design settings and adjust any overlays and fonts!
Poster
Image
Don’t use too much text!
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!)
The Card Image
Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
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.
