Squarespace Releases Image Block 2.0: 5 New Image Block Layouts

Squarespace hits it out of the park with it's image block update.

Reason #1,378 I'm a huge fan of Squarespace and build exclusively on their platform - instead of offering a bunch of plugins that will need to updated or will break over time, they just make their core stuff better!

Just the other day the team at Squarespace announced the launch, from beta to not-beta, of their new image block update (previously only available to Circle Members, or sites managed by Patey Designs ;) ) which includes 5 new image styles.

As our POTUS would say - This is huuuuge. 

Why? As it stands, Squarespace's current image block allows you to add an image to any page and include a caption, should you wish, and you're practicing poor web technique if you don't utilize the captions, with limited style tweaking. Simple. Effective. It works. Very limited design-wise however.

These 5 new styles allow for much more dynamic visuals without a ton of site-slowing, headache-causing, time-consuming coding. Not to mention any text overlay is live and not "baked" into the image. Easy edits and great SEO visibility anyone?

 

All of the examples below are using ONLY Squarespace's new Image Block styles. No extra CSS or coding has been added.


If you're having problems page load speed because your image files are too large we have articles on how to fix that!


 

REGULAR IMAGE

This is the ole' standard image block from Squarespace. Nothing fancy, get's the job done. Like a cargo van.

This is your regular Squarespace Image Block with a regular ole' caption.

This is your regular Squarespace Image Block with a regular ole' caption.

 

 

POSTER IMAGE

Now we can write directly on images with live text and style it in a visually appealing way. No rinky-dink little captions.

POSTER IMAGE

With a much more appealing, live text, caption.

 

 

CARD IMAGE

Gone are the days of having to place a text block next to an image block. Now you can easily style and format text to the right or left of an image and on mobile view the text will appear under the image preserving readability.

The Kingfisher Bird

Is neither a King nor a Fisher... Liar.

 

 

OVERLAP

Make text pop with overlaping text that includes editable background colors.

I am strong to the finich...

Cause I eats me spinach - Popeye

 

 

COLLAGE

A very interesting way to highlight key features or content. Stack images in a collage layout with left or right orientated text.

Styles Patey Designs Portland Oregon 2.jpeg

The Devil is in the Details.

But we exorcised that pesky so-and-so to deliver demon-free coffee to our customers.

The Proof is in the Pudding

This has nothing to do with coffee.

 

 

STACK IMAGE

Similar to the card image, this effect used to only be accomplished by stacking image blocks on top of text blocks and very carefully making sure readability was maintained in mobile view. Now you can put 3 images side-by-side with text underneath and you're assured the images text will stay where it's supposed to. Eye-catching multicolumn way to showcase information.

stack-image-squarespace.jpeg

Jimmy Babyblues

 

Likes I.P.A.s.

Knows every Rush song.

Professional eye model.

stack-image-squarespace-2.jpg

Ole' Jim Scaffer

Sweetest old CFO there ever was. Surprisingly a whiz with numbers.

Doesn't like Communists.

scary-man.jpeg

We Don't Say His Name

In fact we don't even look at him. We're not even sure if he works here and we're all too afraid to ask...

 

 

The possibilities are endless

How do you plan on using Squarespace's 5 new image blocks?

 

Patey Designs

Patey Designs, Portland, Oregon 97204