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:
- Edit a page or post, click an insert point, then click Image. For help, visit Adding content with blocks.
- Use the Content tab to add an image and an image link.
- Click the Design tab to change the layout and animate the block.
- 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:
- To upload your own image, click Add Image. You can also drag the image file into the image uploader from your computer.
- To add a stock image, click Search for Images or Search Images. 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.
Keep in mind:
- For the best results, use an image under 500 KB. For more image format tips, visit Formatting your images for display on the web.
- You can edit the image after uploading by using the image editor.
- The image block won't display on your site without an uploaded image.
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 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 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 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.
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:
- In the image block editor, click Design, then click Animations.
- 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.
- 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
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:
- One basic text field
- Style text in the site styles panel (version 7.1) or site styles for your template (version 7.0)
- Automatically becomes alt text
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:
- While editing a page, open site styles, then click image blocks.
- 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:
- In the Home menu, click Design, then click Site styles.
- 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.
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.
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.
After setting up the image block, you can rearrange, edit, or remove it: