Adding Images to Email Templates

Create more visually appealing content and convey your brand by adding images. Because non all email clients download images by default, be sure to include alternate text.

Adding background images

Y'all tin can add background images to whatever layout in the electronic mail. For case, create a hero image and overlay it with content to create your bold layout.

Groundwork images are not supported by all e-mail clients (for example, Microsoft Outlook). Be sure to preview and exam your emails using your target electronic mail clients.

To add a groundwork image:

  1. With your electronic mail template open up, click the layout yous want to add a background epitome to.
  2. Click Browse in the Full general Properties panel and choose your paradigm. In that location are no additional settings for background images.
  3. Add together content to the layout if desired.

Calculation images

When calculation image content, use the following guidelines for image sizes:

Electronic mail layout Paradigm size
1 cavalcade 600px
2 column 300px
iii cavalcade 200px
four column 150px
2 cavalcade, left sidebar 200px and 400px
2 column, right sidebar 400px and 200px

To add images to your email:

  1. With your email template open, elevate the image content component to the layout.
  2. Choose whether to scan for the epitome, or to upload a new one.
    • To scan to an image in your image library, click An image of the browse icon.

    • To upload a new image, select a folder and click Upload content. You can browse your file system for an image to upload to the paradigm library.

  3. By default, Responsys car fits the image summit and width proportionality to fit the entire content block. Utilize the Image Sizing properties to scale the prototype and set up the image alignment. Learn more than about the Prototype Sizing properties below.
  4. Afterward you add an image, click the epitome content block and utilise the Image panel to format the image.

Alternating text

Using the Paradigm panel, y'all tin add together alternate text to your epitome. Alternate text allows yous to describe your image for recipients that have images blocked or turned off. Alt text besides helps make an prototype more attainable to people with disabilities.

Sizing and alignment

Use the Paradigm Sizing options available from the Image panel to change the image alignment or to scale the prototype.

  • Utilise the Motorcar Fit setting to adjust the epitome height and width proportionality to fit the unabridged content block.
  • Turn off the Car Fit setting to scale the width of the image up or downwardly. You lot can scale the image up to 100% of the content block. Responsys maintains the image'south proportions.
  • Use the Alignment buttons to align the image to the correct or left of the content block, or to eye the epitome in the content cake.

An animation showing image sizing options

Groundwork color

Set the groundwork color of the content cake using the Prototype panel. You can ready the color using hexadecimal or RGB values.

Linking

To make the epitome a link, employ the Image panel. Yous can link to an external webpage. Learn more than about the link types.

Padding and borders

Adjust the padding and borders around the content block using the options available from the Epitome console. Acquire more well-nigh padding and borders.

Working with Email Template Contents and Layouts

E-mail Templates (Visual Template Designer)