Image Blocks

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

Tip: To add multiple images to a block, use Gallery Blocks instead. To learn about adding images to other areas of your site, visit our guides on banners, backgrounds, Gallery Pages, and product images.

Watch a video

Add an Image Block

To add an Image Block:

Computer
Squarespace App

Edit a page or post, click an insert point, and select Image for an Inline Image Block, or select Poster, Card, Overlap, Collage, or Stack for other layouts. For help, visit Adding blocks.

Block menu with the Image Block options highlighted.

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

For more detailed steps, follow the sections below.

Tap the Pages icon.
Tap the title of the page you want to edit.
Tap Edit or the pencil icon in the top-right corner.
Tap the + icon in the top-right corner to open the block menu.
Tap Image to add an Image Block.
Tap Add Image to add an image.
Tap Design to change the layout and add an image link.
Tap Done or ✓ to save your changes.

Add an image

You can add images from various sources to your Image Block. Some options are only available on the computer, while others are only available in the Squarespace App.

Computer
Squarespace App

In the Content tab of the Image Block editor, upload an image or add an image using our stock image integrations. You can also reuse a stock or uploaded image from the Image Search window.

Tip: For the best results, upload an image under 500 KB. For more image format tips, visit Formatting your images for display on the web.

Option 1 - Upload an image

To upload your own image, click Upload an Image. You can also drag the image into the image uploader from your computer.

In the Content tab of the Image Block, click Upload an Image to add your own image.

Option 2 - Add a stock image

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.

In the Content tab of the Image Block, click Search for Image to add a stock image.

Tap Add Image, then choose an image:

Take a new photo - Tap Take photo or Camera.
Choose an image from your device - Tap Photo library or Files.
Choose an image from iCloud - Tap Insert from....

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
Poster
Card
Overlap
Collage
Stack

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

Examples of Inline Image Blocks, one with a caption below and one with a caption overlay.

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

Example of a Poster Image Block.

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

Example of a Card Image Block.

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

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.

Example of an Overlap Image Block.

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

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.

Example of a Collage Image Block.

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, with optional background colors.

Example of a Stack Image Block.

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.

Inline
All other layouts

To turn the image into a link in the Inline layout, add the URL to the Clickthrough URL box, or click 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 the URL or click for additional options in the URL box that appears below the drop-down menu.
Button - A button appears inline with the text, below the title and subtitle. Customize the button text and add the URL in the boxes that appears below the drop-down menu, or click for additional options.
You can style the button in the Site Styles panel.

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. We recommend experimenting with different options to find animations you like.

To add animations:

In the Image Block editor, click Animations.
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.
To animate the image and text separately, select Custom, then select options for Animate Image and Animate Image Text.

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 here, Write a title here, or Write a subtitle here to add corresponding 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.

Inline
All other layouts

The Inline layout supports a caption:

One basic text field
Styling set by the template
Automatically becomes alt text

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 Site Styles
Alt text must be added manually

Resize the image

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

Inline
Poster
Card
Overlap
Collage
Stack

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:

To crop the original image file, use the Image Editor.
To crop the image horizontally or vertically, use the cropping handle.
To shrink the whole Image Block, add blocks on either side.
To change where the image centers, use the focal point.

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

There are several ways to change the size and cropping of the image:

To crop the original image file, use the Image Editor.
To crop the image horizontally or vertically, use the cropping handle.
To shrink the whole Image Block, add blocks on either side.
To change where the image centers, use the focal point.

There are several ways to change the size and cropping of the image:

To change the width of the image, use the Image Width tweak in the Site Styles panel.
To crop the original image, use the built-in Image Editor.
To shrink the whole Image Block, add blocks on either side.

There are several ways to change the size and cropping of the image:

To change the width of the image, use the Image Width tweak in the Site Styles panel.
To crop the original image, use the built-in Image Editor.
To shrink the whole Image Block, add blocks on either side.

There are several ways to change the size and cropping of the image:

To change the width of the image, use the Image Width tweak in the Site Styles panel.
To crop the original image, use the built-in Image Editor.
To shrink the whole Image Block, add blocks on either side.

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

There are several ways to change the size and cropping of the image:

To crop the original image, use the built-in Image Editor.
To shrink the whole Image Block, add blocks on either side.

Style the Image Block

Some layouts have their own style settings for fonts, colors, and buttons.

To find these options:

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

Inline
Poster
Card
Overlap
Collage
Stack

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