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
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
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.
