Images

Images are vital for creating visually appealing and engaging emails. This guide explains how to add image elements, source your images, and customise their display and functionality.

Adding an Image Element

  1. Access the Content Tab: Ensure the Content tab is selected in the right-hand sidebar.

  2. Drag and Drop: Locate the "Image" element in the sidebar. Click and drag it onto a desired column or content area within your email canvas.

    Upon dropping, a placeholder image icon will appear on the canvas, and the image properties will load in the right-hand sidebar under the "Content" tab.

Configuring Image Properties

With the image element selected, use the options in the right-hand sidebar to set it up.

1. Sourcing Your Image

You have several ways to add an image:

  • Upload Image:

    1. Click the Upload Image button in the sidebar. This will open your computer's file browser.

    2. Navigate to, select, and open your desired image file.

    3. The image will upload and appear in the placeholder on the canvas and as a thumbnail in the sidebar.

  • Drop an Image: You can often drag an image file directly from your computer onto the "Drop a new image here, or click to select files to upload" area in the sidebar.

  • Use Stock Photos:

    1. Click the More Images dropdown (next to "Upload Image").

    2. Select Stock Photos. This will open an image library interface.

    3. Search: Use the search bar (e.g., type "dog") to find relevant images.

    4. Select: Click on an image from the results. It will be inserted into your email.

  • Use Existing Uploads:

    1. Click the More Images dropdown.

    2. Select Uploads to access images you've previously uploaded to your library.

  • Image URL: Paste a direct URL to an image hosted online into the "Image URL" field.

Image Display and Styling

Adjust how the image appears within its container.

  • Width:

    • Auto On (Default): The image width will automatically adjust, often to 100% of its container, while maintaining its aspect ratio. The slider will show 100%.

    • Auto Off: Toggle the "Auto On" switch to "Auto Off" to manually control the image width using the slider. This allows you to make the image smaller than its container width (e.g., dragging the slider to 35% or 53%).

  • Align: Choose the horizontal alignment of the image within its content block if its width is less than 100% of the container:

    • Left

    • Center (Often the default)

    • Right

  • Alternate Text (Alt Text): This is crucial for accessibility and for when images don't load.

    1. Enter a descriptive text in the "Alternate Text" field (e.g., "Hello World", "Cute puppy in a wooden box").

    2. This text will be read by screen readers and displayed if the image cannot be rendered.

Action (Making Images Clickable)

You can make an image act as a hyperlink.

  • Image Link: From the dropdown, choose the action type:

    • Open Website (Most common for images)

    • Send Email

    • Call Phone Number

    • Send SMS

  • URL: If "Image Link" is set to "Open Website," enter the destination URL in this field (e.g., https://www.website.com).

    • Important: Always include the protocol (e.g., http:// or https://).

  • Target: Specify where the link should open:

    • New Tab (Opens in a new browser tab)

    • Same Tab (Opens in the current tab)

General (Container Padding)

Adjust the space around the image element within its container.

  • Container Padding:

    • All Sides: Enter a pixel value (e.g., 10px) for equal padding on all sides.

    • More Options: Toggle on for individual "Top," "Right," "Bottom," "Left" padding controls.

Responsive Design

Control the image's visibility on different devices.

  • Hide on Desktop: Toggle on to hide the image on desktop screens.

PreviousTextNextImage Carousels

Last updated