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

Add an image block

To add an image block:

  1. Edit a page or post, click an insert point, then click Image. For help, visit Adding content with blocks.
  2. Use the Content tab to add an image and an image link.
  3. Click the Design tab to change the layout and animate the block.
  4. Click outside the block editor when you're done. Your changes save automatically.

For more detailed steps, follow the sections below.

Add an image

In the Content tab of the image block editor:

Click the + icon, then choose how to add your image:

  • To upload an image from your device, click Upload File.
  • To reuse an image, click Select From Library.
  • To find and add stock images, select Browse Stock Images.

After adding an image, you can:

  • Edit your image or add image effects
  • Set your image's focal point by clicking the three dots, then clicking Focal Point
  • Change the image by clicking Replace
  • Delete the image by clicking the three dots, then clicking Remove

Keep in mind:

Add an image link or button

In the Content 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 Link 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 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 displays 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.

Choose a layout

When you add an image block, it uses the inline layout by default. To change the layout, click the Design tab, then choose the layout you want from the following:

  • Inline - The basic image block, with optional captions below or overlaying the image. Set how the caption displays in the Content tab.
  • Poster - Display text over images, creating the look of a banner or poster.
  • Card - 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.
  • Overlap - 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 toward the bottom of the images in smaller browsers and mobile devices, or when image blocks are used in columns.
  • Collage - Display images on one side and text over background "cards" on the other, offsetting and overlapping the image. The text usually moves toward the bottom corner of the images in smaller browsers and mobile devices, or when image blocks are used in columns.
  • Stack - Display images with text below.

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.

Add animations

It's not possible to add animations from the Squarespace app.

In the Design 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 Design, then click Animations.
  2. Select an effect from the list 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 Image and Text.
Tip: On 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:

  • Animation - Custom
  • Image animation - Slide from Right
  • Text animation - Slide from Left

Example of an image block with animations.

Add text

In the image block, click into text fields to add text to the image. You might see placeholder text like Add an image description or Make it stand out.

Keep in mind:

  • Limit titles to a few words. For subtitles and captions, use one or two sentences. This way, you'll have a nice balance between the words and image. It also keeps your text visible on mobile devices.
  • To add line breaks in title text, press Shift + Enter. If you add line breaks by only pressing Enter, the line breaks disappear after saving your page.
Tip: Highlight the text to make formatting changes with the text toolbar, like bolding, italicizing, or adding a link.

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 Content tab, select a display option from the caption drop-down menu:

  • Off - No caption displays unless the image is viewed in lightbox.
  • Caption Below - Caption displays below the image.
  • 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 Add an image description, temporarily switch the caption style to Caption Below in the Content 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:

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.

To style image blocks globally:

  • Change the block’s fonts in the Fonts panel.
  • Change the colors for that block’s section in the Colors panel.
  • Customize theme colors for elements like the title, image overlay, or button background with the image block color tweaks.
  • Set the font size and other formatting in the text toolbar. The button font size follows Paragraph 2.

To style layout-specific elements in the image block, like text alignment or content width:

  1. While editing a page, open site styles, then click image blocks.
  2. Scroll down to the section for each layout to change its tweaks.

In version 7.0, all image block layouts except inline have their own style settings in site styles. To find these options:

  1. In the Home menu, click Design, then click Site styles.
  2. Scroll down to the section for each layout to change its tweaks.

The inline image block doesn't have its own design tweaks in site styles. To learn about caption font styles, colors, and sizing, visit Styling image captions.

Add image shapes

Use image shapes to add variety and a unique visual effect to your images. The shape you choose appears over your image, like a mask. You can add image shapes to any image block layout. Choose from three aspect ratios: 1:1, 2:3, and 3:2.

To add image shapes:

  1. In the image block editor, click Design.
  2. Choose Shape, then click Shape.
  3. Choose an aspect ratio, then click the shape you’d like to use.

After choosing a shape, you can:

  • Use the focal point to customize how your image appears in the shape.
  • Enable animations to add visual movement.
  • Remove the shape. In the Design tab, choose Original to return to the original shape.

Keep in mind:

  • If you set images to open in a lightbox, your image’s original shape appears after visitors click the image.
  • If you're using the card, collage, or overlap layouts and choose the circle shape, your image may appear as an oval. For your image to appear as a circle, ensure your image has a 1:1 aspect ratio. You can use our built-in image editor to crop your image.

Add a corner radius

You can round the corners of an image using the corner radius setting. In the Design tab of the image block editor:

  1. Go to Corner radius and click to set the radius for your entire image or for individual corners.
  2. In the corner radius field, enter numbers (measured in pixels) to change the shape of the border.
  3. Hover over Done, then click Save.

Keep in mind:

  • Changes you make to an image block’s radius only applies to the individual image block. It doesn’t change the image across your site.
  • To remove your corner radius, undo your changes while making edits, or enter 0 in the corner radius fields.

Resize the image

You can resize or crop image blocks in a variety of ways, depending on the layout. To learn more, visit Resizing an image.

Tip: You can remove the padding automatically applied to image blocks by adding custom code. For more information, visit 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.

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. This can be especially visible in the poster layout, which is designed for a limited amount of text.
  • Captions for the card layout moves from alongside the image to below the image. For the collage and overlap layouts, captions move from alongside the image to near the bottom of 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 rearrange, edit, or remove it:

Was this article helpful?
103 out of 428 found this helpful