How to Use the Squarespace Image Block

How to Use the Squarespace Image Block

One of my favorite parts about being a Squarespace designer is that I am a member of the Squarespace Circle. While that isn't necessary to do my job, it does allow me to find out what updates Squarespace is making and experiment with my (on my website and on client sites) before they are released to everyone else. (The other big benefit is that I have a six month trial on all new websites instead of just 14 days.)

Sometime this is beneficial - I knew when Squarespace was beta-testing PayPal integration and when fixes are made - but it can also be  detrimental when I know of a new update and can't share it with other Squarespace users just yet.

One update that I am excited about - and that many people were looking forward to - is the new Squarespace Image Block and the options available for adding text to images without a separate design program.

Basically, the Image Block now allows you to add text to images in a variety of ways instead of just as a caption below or in an overlay. Plus, the design settings for each option are controlled separately, so you can change them for each type of image you use.

If you haven't experimented with the new Image Block options, here is an overview - including the settings you can update in the Design > Style Editor menu. 

 
Inline Image Block

Inline Image Block

Image Block: Inline

Display an image with optional caption

  • Caption font matches paragraph font settings
  • Do Not Display Caption
  • Caption Below
  • Caption Overlay
  • Caption Overlay on Hover
 

Poster

with subtitle

Image Block: Poster

Display an image with text overlaying it

  • Text Alignment - left, right, center
  • Title Font
  • Title Color
  • Inline Link Color
  • Title Separation - the space between the title and subtitle
  • Image Overlay Color - color filter over image
  • Content Width - the width of the text
  • Title Background Color - optional color behind the title text
 

Card Image Block

with subtitle

Image Block: Card

Display an image with the text aligned to the right or left

  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Content Position - top, center, bottom
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Image Width
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline Link Color
  • Title Separation - the space between the title and subtitle
  • Card Background Color - color that displays behind the caption
  • Card Padding - spacing on either side of the caption
  • Card Separation - space between image and card background
  • Image Overlay Color - color filter over image
  • Title Background Color - optional color behind the title text
 
haute-chocolate-styled-stock-photography-brights-workday-17.jpg

Overlap Image Block

with subtitle

Image Block: Overlap

Display an image on one side with text on the other, partially overlapping the image

  • Optional background color
  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Content Position - top, center, bottom
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Image Width
  • Title Overlap - how much the title overlaps the image
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline Link Color
  • Title separation - the space between the title and subtitle
  • Image overlay color - color filter over image
  • Title background color - optional color behind the title text
 

Collage Image Block

with subtitle

Image Block: Collage

Display an image on one side and text over a background “card” overlapping the image

  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Content Position - top, center, bottom
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Image Width
  • Content Width - the width of the caption
  • Content Offset - how much the caption overlays the image
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline Link Color
  • Title Separation - the space between the title and subtitle
  • Card Background
  • Card Padding - space on either side of the caption
  • Image Overlay Color - color filter over image
 

Stack Image Block

with subtitle

Image Block: Stack

Display an image with text below

  • Optional background color
  • Dynamic Font Sizing (On/Off) - resizes the text based on the browser
  • Text Alignment - left, center, right, match (aligns title and subtitle on the same side of the image), opposite (aligns title and subtitle on the opposite side of the image),
  • Title Font
  • Title Color
  • Subtitle Font
  • Subtitle Color
  • Inline link Color
  • Title Separation - the space between the title and subtitle
  • Card Background
  • Card Padding - space on either side of the caption
  • Image Overlay Color - color filter over image

To-Do for You: Try out the Squarespace Image Block and take advantage of the SEO boost that having actual text instead of an image of text can give you.


Want to learn more?

Sign up today to become a VIP.


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.