7 Different Ways You Can Use The Squarespace Image Block

 

If you have a website then there's a 99.9999% chance you will be using images on your site.


There’s a couple of ways you can include images on your site with Squarespace but I’ll be focusing on breaking down the image block for you.

 
Image Block Selection On Squarespace
 

Wait, are you new here? I wrote these blog posts to help you out in your biz:


 
If you have a website then there's a 99.9999% chance you will be using images on your site. There’s a couple of ways you can include images on your site with Squarespace but I’ll be focusing on breaking down the image block for you.
 

1. Inline Layout


Using the Inline image block allows for a caption under your image that you can choose to either display or not. For SEO purposes you should always add a caption in the Inline layout because that automatically become alt text for the image. Google can’t read images so alt text helps Google identify what your image is all about.


Keep in mind that all other image block layouts don’t have the option to add alt text but you can still do so by first choosing the inline option ⇒ adding your text ⇒ Saving it ⇒ then changing the layout to a different layout.

Inline Image Layout on Squarespace

2. Inline with Caption overlay



Although it’s still within the inline layout I wanted to make this separate since the end look is considerably different. With the overlay option, you can either 1) Have a set overlay 2) display it only when you hover on the image.

Inline Layout With Overlay On Squarespace

3. Poster Layout


With the poster layout, you can display your caption on the actual image and control the font size, font color, image overlay color, and content width. You can control all of this and more using your site styles functions ( Design ⇒ site styles).

Poster Layout on Squarespace

Within the same poster layout, you can add a button to display on the image as well and control the font color and button color through your site styles.

Poster Layout With Button on Squarespace

4. Card layout


The card layout is super handy for when you want to have a background color behind all your text, background color on the title of your text, or keep the background white if you have a different color background. Here are three examples of how you can use the card layout on your site:

Card layout on Squarespace
Card layout with background color on Squarespace
Card with title color on Squarespace

Like with the poster layout you can also add a button to your card layout image.


5. Overlap layout


There are so many things you can do with the overlap layout so this is just one example of it:

Overlap Layout with Squarespace


The site styles control panel lets you customize this layout so much that it’s impossible for me to show you all the different things you can do with it. Here’s a look at the site styles pane for the image overlap layout (notice how adding a button is also possible with this layout) :

 
Overlap settings on Squarespace
 

6. Collage Layout


My personal favorite is the collage layout because I just love the look of it and I use it a lot throughout my site. Again, you can control anything from fonts to background color using the site styles control panel.

Collage layout on Squarespace

7. Stack Layout


The last option you have for your image blocks is your stack layout. You can add a button like in every other layout type + control the formatting through your site styles panel.

Stack layout on Squarespace

 
Jessica Nicasio

Hey , I'm Jessica!

I am the designer and owner behind JNL Media Co.! I help creative entrepreneurs & small biz owners create a beautiful Squarespace site that converts. After almost two years in corporate I left so that I could pursue my love for design + marketing and help other #girlbosses do the same through their business.

Obsessions: Traveling✈️ , Fitness💪🏼, and Writing ✍🏼






Learn more: