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

Images in email campaigns

Use an image section to add images to your campaign. You can add multiple images, each with captions and clickthrough URLs, and choose different layouts to change the placement of images and captions.

Follow this guide to learn how to set up image sections in your campaigns and about other places in your campaign where images may display.

Image formatting

To prevent blurry images, we recommend keeping your image width 750px or less. For more help with image formatting, visit Formatting your images for display on the web.

Multiple images display in a vertical stack, but you can choose different layouts to change the placement of images and captions.

Add an image section

To add an image section to a campaign:

  1. Create or open your campaign draft. For more help, visit Building email campaigns.
  2. Click + anywhere in the campaign between the header and footer.
  3. Click Image.
  4. In the right panel, click Add Images to upload up to four images from your device. Keep in mind, if you switch to the small grid layout, only the first image displays.
  5. After uploading at least one image, click Manage Images below the thumbnail to add, rearrange, or delete images.
  6. Click Unlinked beside an image name to add a clickthrough URL.
  7. Click Layout to change the image section layout.
  8. Click Spacing and Section Color to make style changes.
  9. Enable Show Caption to add a caption field to each image.

All changes save automatically. You can undo or redo changes as long as the draft is open.

Tip: To open the image editor, hover over the image you want to edit in the draft and click the pencil icon.

Add, rearrange, or delete images

After adding at least one image, click Manage Images. Here, you can:

  • Add more images by clicking Add Image. You can add up to four images in all layouts.
  • Rearrange images by clicking and holding the six dots to the right of the filename and dragging the image to a new position.
  • Delete an image by clicking - to the left of the filename.

After making changes, click Back to return to the Images panel.

Add a clickthrough URL

Image clickthrough URLs turn the whole image into a link, so when a subscriber clicks the image, it opens the link.

To add a clickthrough URL:

  1. Click Unlinked beside the images name in the right panel. If an image already has a clickthrough URL, the URL displays beside the image name. If you don't see Unlinked or a URL beside your image name, you might be in the Manage images panel. Click Back to return to the Images panel.
  2. In the clickthrough URL field, you can add a web address directly, or click the gear icon to open the link editor for more options.
  3. In the link editor, you can link to an external web address, a page on your site, an email address, or a phone number. To learn more about links in Squarespace, visit Adding links to your site.
  4. After setting up the URL in the link editor, click Save.

Image section layouts

Click Layout to choose how images and captions appear. Each section can use one layout style. To add another image with a different layout, add a new section.

You can choose from these layouts:

  • Banner - Full-bleed images with captions below.
  • Small Grid - Images display in a grid of small thumbnails. It's not possible to add captions in this layout.
  • Card - Images with captions displaying on an overlapping card. The captions display on alternating sides for each image, starting on the right.
  • Side - Images in a list with captions displaying on alternating sides.
  • List (Left) - Images in a list on the left side with captions on the right.
  • List (Right) - Images in a list on the right side with captions on the left.

Style the image section

Use the size, spacing, and color options to style your image section. Your options may vary depending on your layout.

Image size

With the small grid, side, and list layouts, you can edit image size directly.

Click Image Size, then click S, M, or L, or click ... to set the size manually.

For banner and card layouts, use the Side padding tweak under Spacing to change the image width. Keep in mind, images always display full-width on Windows Outlook.

Spacing

Click Spacing to change the padding in your image section. Depending on your layout, your spacing options may vary:

  • Side padding - Add white space on either side of the image. For banner and card layouts, use this tweak to change the image width.
  • Padding between sections - Add white space at the top and bottom of the image section.
  • Padding between rows - Add vertical white space between images in the section. This only appears if you add multiple images to a single section.
  • Horizontal Alignment and Vertical Alignment- Align the images in a small grid layout.
  • Center padding - Add white space between the images and captions in the side and list layouts.

Color

You can change the following section-specific colors:

  • Section color - Change the color that appears behind images and captions. If set to transparent, the content background or email background appears instead.
  • Text color - Change the color of captions. Font and text size follow global campaign styles.
  • Card color - Change the background of the captions on the card layout.

To learn more, visit Styling email campaigns.

Add captions

To add captions:

  1. If you're using the banner layout, enable Show Caption in the images panel.
  2. Click Write here... in the preview and add text.
  3. Highlight text to format it or add a link.

Keep in mind:

  • Captions in email campaigns don't become alt text. The image file name is the alt text.
  • Text added to images is image-specific. If you delete an image, its caption is deleted too.
  • Use the side panel to style the text color. The font matches your global fonts.

Add an image without a caption

To add an image without a caption:

  1. Add an image section.
  2. After adding your image, choose the Small Grid or Banner layout.
  3. On the banner layout, switch the Show Caption toggle off to hide the caption.

Can I add an image slideshow?

There isn't a built-in slideshow layout. To add a slideshow effect, create an animated .gif from a set of images, then upload it to the image section.

Can I pull in images from my site?

Currently, the only way to add images to an image section is to upload them from a computer or mobile device. To add an image from your site that you don't have saved:

  1. Open your site in a private or incognito browser.
  2. On a PC, right-click the image. On a Mac, press Control and click the image.
  3. Save the image to your device.
Tip: Blog and product sections can pull in featured images from items or posts on your site.

Header images

You can upload an image to your campaign's header, or include your site logo if your site uses one. To learn more, visit Building email campaigns.

Blog and product images

Blog and product sections pull blog posts and products into your campaign from your site, including the post or product featured images.

It's not possible to change the post or product featured images in these sections, but you can hover over them and click the pencil icon to open the image editor. To add a different image entirely, change the featured images in your blog page or store page, or use an image section to directly choose the image and caption.

Was this article helpful?
0 out of 1 found this helpful