Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Image Blocks

Use Image Blocks to add images to pages or blog posts in a variety of layouts. Each Image Block displays one image.

Watch a video

This video applies to Squarespace version 7.0

Add an Image Block

To add an Image Block:

  1. Edit a page or post, click an insert point, and select Image for an Inline Image Block, or select PosterCardOverlapCollage, or Stack for other layouts. For help, visit Adding content with blocks.

Block menu with the Image Block options highlighted.

  1. Use the Content tab to add an image.
  2. Use the Design tab to change the layout and add an image link.
  3. Use the Animations tab to animate the block.
  4. Click Apply to save your changes.

For more detailed steps, follow the sections below.

Add an image

In the Content tab of the Image Block editor:

  • To upload your own image, click Upload an Image. You can also drag the image into the image uploader from your computer.
  • To add a stock image, click Search for Image. You can choose from free or premium options. To learn more, visit Searching and adding stock images
  • You can also reuse images from the Image Search window.

In_the_Content_tab_of_the_Image_Block__click_Upload_an_Image_to_add_your_own_image.png

Keep in mind:

Image Block layouts

Here are examples of each Image Block layout, which you can change in the Design tab. As you select a layout, you'll see a preview of it on the page.

Tip: When switching between Inline and any other layout, you'll need to re-enter the image text.

Inline Image Blocks display images with optional captions below or overlaying the image.

inline_Image_Block_-_caption_below.pnginline_Image_Block_-_caption_overlay.png

Poster Image Blocks display text over images, creating the look of a banner or poster.

poster_Image_Block.png

Card Image Blocks display images with text to the left or right. The text usually moves below the images in smaller browsers and mobile devices, or when Image Blocks are used in columns.

To choose which side the image appears on, use the Image Position drop-down menu in the Image Block's Design tab.

card_Image_Block.png

Overlap Image Blocks display images on one side with text on the other, partially overlapping the image. Add a background color to the title for a highlighting effect. The text usually moves below the images in smaller browsers and mobile devices, or when Image Blocks are used in columns.

To choose which side the image appears on, use the Image Position drop-down in the Image Block's Design tab.

overlap_Image_Block.png

Collage Image Blocks display images on one side and text over background "cards" on the other, offsetting and overlapping the image. The text usually moves below the images in smaller browsers and mobile devices, or when Image Blocks are used in columns.

collage_Image_Block.png

To select which side the image appears on, use the Image Position drop-down in the Image Block's Design tab.

Stack Image Blocks display images with text below.

stack_Image_Block.png

Add an image link or button

In the Design tab, you can turn the image into a link or add a button to its layout.

To turn the image into a link in the Inline layout, add the URL to the Clickthrough URL field, or click the gear icon for additional options.

Keep in mind:

  • Enabling a lightbox disables clickthrough URLs.
  • The Inline layout doesn't support buttons.

For all other Image Block layouts, use the Image Link drop-down menu. You can choose from:

  • None - No link
  • On Image - The entire image becomes a link. Add a URL in the URL field that appears below the drop-down menu, or click the gear icon for additional options.
  • Button - A button appears inline with the text, below the title and subtitle. Customize the button text and add the URL in the fields that appear below the drop-down menu, or click the gear icon for additional options. Learn more about styling the button below

Add animations (computer only)

In the Animations tab of the Image Block editor, you can add animations visitors see when they load or refresh the page.

To add animations:

  1. In the Image Block editor, click Animations.
  2. Select an effect from the Animate Image Block drop-down menu to apply to the image and any text. As you select an option, you’ll see a preview of it on the page.
  3. To animate the image and text separately, select Custom, then select options for Animate Image and Animate Image Text.
Tip: In version 7.1, you can apply animations globally to all images on your site.

Choose from these animation options for your image, text, or both:

  • Fade In - Block, image, or text fades in
  • Slide Up - Block, image, or text slides upward
  • Slide Down - Image or text slides downward
  • Horizontal Clip - Block or image loads in horizontal layers
  • Vertical Clip - Block or image loads in vertical layers
  • Tilt Up - Block or image zooms in with an upward tilt
  • Tilt Down - Block or image zooms in with a downward tilt
  • Focus In - Block, image, or text looks blurry, then comes into focus
  • Collide - Image and text slide inward from the sides
  • Reveal - Image and text slide outward from the center
  • Slide from Left - Image or text slides in from the left
  • Slide from Right - Image or text slides in from the right

Here's an example of a Collage Image Block using these settings:

  • Animate Image Block - Custom
  • Animate Image - Slide from Right
  • Animate Image Text - Slide from Left

Example of an Image Block with animations.

Add text

After clicking Apply to save the block, click Write a caption hereWrite a title here, or Write a subtitle here to add text to the image.

For best results, keep text short. Try to limit subtitles to one or two sentences. This maintains a nice balance between the words and the image. It also keeps the text visible on mobile devices.

Captions vs. titles and subtitles

Text fields and style options vary by layout. The Inline layout supports one basic caption, while the other layouts support title and subtitle fields.

The Inline layout supports a caption:

In the Design tab, select a display option from the caption drop-down menu:

  • Do Not Display Caption - No caption displays unless the image is viewed in lightbox.
  • Caption Below - Caption displays below the image, aligned left.
  • Caption Overlay - Caption displays over the image in a dark gray bar.
  • Caption Overlay on Hover - Caption displays over the image in a dark gray bar when the cursor hovers over the image.
Tip: If you don't see Write caption here, temporarily switch the caption style to Caption Below in the Design tab.

Captions always display in lightbox. Captions don’t display in empty Image Blocks. To add text without an image, use a Text Block instead.

Other layouts support a title and subtitle:

  • Two text fields, one above the other
  • Styles set in the Design panel
  • Add alt text manually in the Filename field in the Content tab.

Resize the image

You can resize or crop Image Blocks in a variety of ways. Your options depend on the layout.

Inline Image Blocks retain the width of the original image file. If the image file is narrower than the content area, you'll see blank space on both sides of the image. This preserves the original image quality. To fill the blank space and display the image at the full width of the block, check Stretch in the block's Design tab. Stretching an image may affect image quality.

You can also change the size and cropping of the image in other ways:

Images in the Poster layout automatically stretch to fill the full width of the block.

To change the image's size and cropping:

To change the image's size and cropping:

To change the image's size and cropping:

To change the image's size and cropping:

Images in the Stack layout automatically stretch to fill the full width of the block.

To change the image's size and cropping:

Tip: You can remove the padding automatically applied to Image Blocks with a code-based solution. For more information, view this post in the Squarespace Forum.

Keep in mind, custom code modifications fall outside the scope of our support. This means that we’re unable to help you set up or troubleshoot code-based solutions.

Style the Image Block

Some layouts have their own style settings for fonts, colors, and buttons. Where these settings appear depends on your site's version.

Version 7.1

In version 7.1, some layouts have their own style settings.

The Inline Image Block doesn't have unique design options. Caption styles match the section's font and color selections.

Other layouts have unique options in the Design panel:

  1. In the Home Menu, click Design, then click Image Blocks
  2. Scroll down to the section for each layout to change its tweaks. These tweaks affect all Image Blocks on your site with that layout.
  3. To change the block's font, change your site's font.
  4. To change the block's colors, change the colors for that block's section
  5. To style the block's button, adjust your site's button settings. The button's font matches your site-wide font. The button's color matches that section's colors. 

Version 7.0

In version 7.0, some layouts have their own style settings in Site Styles. To find these options:

In the Home Menu, click Design, then click Site Styles

The Inline Image Block doesn't have unique Site Styles options. Caption styles are set by the template.

Scroll down to the Image Block: Poster section to change these tweaks. These tweaks affect all Poster Image Blocks on your site:

  • Text Alignment: Left, Right, Center
  • Title Font - Set the title font and size
  • Title Color
  • Subtitle Font - Set the subtitle font and size
  • Subtitle Color
  • Inline Link Color - Set the title and subtitle link color
  • Title Separation - Set the space between the title and subtitle
  • Image Overlay Color - Add a color filter over the image
  • Content Width - Set the width of the caption
  • Title Background Color - Add a color behind the title

If you added a button, use these tweaks to customize it:

  • Button Font - Set the button font and size
  • Button Font Color
  • Button Background Color
  • Button Border Color - Change the color of the border set with the Button Border Width tweak
  • Button Border Width
  • Button Padding
  • Button Rounding
  • Button Separation - Set the position of the button

When you finish, click Save.

Tip: You can set the opacity for each color tweak.

Scroll down to the Image Block: Card section to change these tweaks. These tweaks affect all Card Image Blocks on your site:

  • Dynamic Font Sizing - Resizes the text depending on the width of the block and browser. The title and subtitle text won't resize smaller than 14 pixels.
  • Content Position: Top, Center, Bottom
  • Text Alignment: Left, Center, Right, Match, Opposite - Align the title and subtitle. Match aligns the text on the same side as the image. Opposite aligns the text on the other side.
  • Image Width - Set the size of the image
  • Title Font - Set the title font and size
  • Title Color
  • Subtitle Font - Set the subtitle font and size
  • Subtitle Color
  • Inline Link Color - Set the title and subtitle link color
  • Title Separation - Set the space between the title and subtitle
  • Card Background Color - Change the background that displays behind the text
  • Card Padding - Set the padding on either side of the text
  • Card Separation - Add space between the image and the card background
  • Image Overlay Color - Add a color filter over the image
  • Title Background Color - Add a color behind the title

If you added a button, use these tweaks to customize it:

  • Button Font - Set the button font and size
  • Button Font Color
  • Button Background Color
  • Button Border Color - Change the color of the border set with the Button Border Width tweak
  • Button Border Width
  • Button Padding
  • Button Rounding
  • Button Separation - Set the position of the button

When you finish, click Save.

Tip: You can set the opacity for each color tweak.

Scroll down to the Image Block: Overlap section to change these tweaks. These tweaks affect all Overlap Image Blocks on your site:

  • Dynamic Font Sizing - Resizes the text depending on the width of the block and browser. The title and subtitle text won't resize smaller than 14 pixels.
  • Content Position: Top, Center, Bottom
  • Text Alignment: Left, Center, Right, Match, Opposite - Align the title. Match aligns the text on the same side as the image. Opposite aligns the text on the other side.
  • Image Width - Set the size of the image
  • Title Overlap - Choose how much of the title overlays the image. This affects the text size.
  • Title Font - Set the title font and size
  • Title Color
  • Subtitle Font - Set the subtitle font and size
  • Subtitle Color
  • Inline Link Color - Set the title and subtitle link color
  • Title Separation - Set the space between the title and subtitle
  • Image Overlay Color - Add a color filter over the image
  • Title Background Color - Add a color behind the title

If you added a button, use these tweaks to customize it:

  • Button Font - Set the button font and size
  • Button Font Color
  • Button Background Color
  • Button Border Color - Change the color of the border set with the Button Border Width tweak
  • Button Border Width
  • Button Padding
  • Button Rounding
  • Button Separation - Set the position of the button

When you finish, click Save.

Tip: You can set the opacity for each color tweak.

Scroll down to the Image Block: Collage section to change these tweaks. These tweaks affect all Collage Image Blocks on your site:

  • Dynamic Font Sizing - Resizes the text depending on the width of the block and browser. The title and subtitle text won't resize smaller than 14 pixels.
  • Content Position: Top, Center, Bottom
  • Text Alignment: Left, Center, Right, Match, Opposite - Align the title and subtitle. Match aligns the text on the same side as the image. Opposite aligns the text on the other side.
  • Image Width - Set the size of the image
  • Content Width - Set the width of the caption. This affects the text size.
  • Content Offset - Choose how much of the caption overlays the image. This affects the text size.
  • Title Font - Set the title font and size
  • Title Color
  • Subtitle Font - Set the subtitle font and size
  • Subtitle Color
  • Inline Link Color - Set the title and subtitle link color
  • Title Separation - Set the space between the title and subtitle
  • Card Background - Change the background color that displays behind the caption
  • Card Padding - Set the padding on either side of the caption
  • Image Overlay Color - Add a color filter over the image

If you added a button, use these tweaks to customize it:

  • Button Font - Set the button font and size
  • Button Font Color
  • Button Background Color
  • Button Border Color - Change the color of the border set with the Button Border Width tweak
  • Button Border Width
  • Button Padding
  • Button Rounding
  • Button Separation - Set the position of the button

When you finish, click Save.

Tip: You can set the opacity for each color tweak.

Scroll down to the Image Block: Stack section to change these tweaks. These tweaks affect all Stack Image Blocks on your site:

  • Dynamic Font Sizing - Resizes the text depending on the width of the block and browser. The title and subtitle text won't resize smaller than 14 pixels.
  • Text Alignment: Left, Right, Center
  • Title Font - Set the title font and size
  • Title Color
  • Subtitle Font - Set the subtitle font and size
  • Subtitle Color
  • Inline Link Color - Sets the title and subtitle link color
  • Title Separation - Set the space between the title and subtitle
  • Card Background - Change the background color that displays behind the caption
  • Card Padding - Set the padding on either side of the caption
  • Image Overlay Color - Add a color filter over the image

If you added a button, use these tweaks to customize it:

  • Button Font - Set the button font and size
  • Button Font Color
  • Button Background Color
  • Button Border Color - Change the color of the border set with the Button Border Width tweak
  • Button Border Width
  • Button Padding
  • Button Rounding
  • Button Separation - Set the position of the button

When you finish, click Save.

Tip: You can set the opacity for each color tweak.

Image Blocks on mobile

Each Image Block layout retains its formatting on mobile. Text will move on mobile to fit the device and will keep a similar position relative to the image.

  • To see how your Image Block will look, use Device View.
  • With the exception of Inline and Stack layouts, captions maintain their set width relative to the image. This means that longer captions may be harder to read or appear cut off on mobile devices.
  • Captions for the Card, Collage, and Overlap layouts move from alongside the image to below the image.
  • The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Site Styles panel. When this is enabled, text won't resize smaller than 14 pixels.
  • Multiple Image Blocks stack vertically on mobile.

Troubleshoot image colors

If an image is saved in CMYK mode instead of RGB mode, its colors on your Squarespace site may differ from what you see in the original image file.

Always save your images in RGB or sRGB mode. RGB color mode is a web-safe format, while CMYK is for printing and won't render in most browsers. For more image formatting tips, visit Formatting your images for display on the web.

Next steps

After setting up the Image Block, you can take these next steps to rearrange, edit, or remove it:

  • Drag and drop the block to move it or create columns and rows. To learn more, visit Moving blocks to customize layouts.
  • Use the Image Editor to crop, rotate, or add image filters.
  • Replace the image by clicking Remove in the Content tab of the block editor, then uploading a new image. This way, you don’t have to add a new Image Block.
  • To create a banner image effect with the block, move it to the top of a page. To learn more, visit Adding banner images.
  • Delete the block.
Was this article helpful?
70 out of 283 found this helpful