Images

Images

The image content block is a versatile component in the builder, equipped with a range of features for managing and enhancing your images.

Adding an Image to Your Design

Importing or Using Externally Hosted Images

  1. Drag and Drop: Place an image content block into your workspace from the sidebar.

  2. Multiple Upload Options: Click the block to unveil a list of options for sourcing your image. You can drag and drop from your desktop, upload them using the file manager, or import them from social media accounts, cloud storage, etc.

Note: If you're working with dynamic images but leave the Dynamic URL field empty, the builder will default to a static image.

Using High-Quality Stock Photos

  1. Access Stock Photos: Click "Change image" on an existing image or add a new image block and click "Browse."

  2. Search: Click the "Search free photos" button at the top.

  3. Selection and Import: Choose from high-quality images through our partnerships with Pexels and Pixabay. Click "Import" and then "Insert" to add the image to your design.

Image Settings and Features

Accessing the Advanced Image Tools in the Builder

  • Image Tools: After selecting an image, an "Apply effects & more" button appears. Clicking this opens a tool suite for editing the image.

Key Features

  • Stickers and Filters: Add stickers and filters to enhance your image.

  • Cropping and Resizing: Modify the dimensions of your image as needed.

Content Properties: Settings and Controls

When you click on an image, the "Content Properties" panel provides several configuration options:

  • Auto-width: This is activated if your image size is larger than the content block. You can toggle it OFF if you wish to manually resize the image.

  • Alignment: Modify the image's horizontal positioning relative to text or other elements.

  • Alternate Text: This text appears when the image is not displayed, crucial for compatibility in email designs.

Working with Dynamic Images

Dynamic images serve a unique purpose by allowing real-time updates to the visual content based on specific variables such as customer ID, dates, or other personalized information.

Essentially, they can change when viewed by the end-user, offering highly personalized interaction without requiring individual design adjustments.

  • Use-Cases: Examples of dynamic images include personalized greeting cards, countdown timers to events, dynamic advertisements, and product recommendations. The ability to generate these dynamically creates a more engaging and interactive experience for the end-user.

  • Technical Overview: A Dynamic URL contains variables that the sending platform replaces when the recipient views the design. So, instead of a static URL like https://site.com/image.jpg, you'd have a URL with variables, such as https://site.com/image?customerID={{customer_ID}}.

  • Configurations:

    • Dynamic Image Toggle: Accessible in the "Content Properties," toggle this ON or OFF based on your requirement.

    • Dynamic URL Input: This field allows you to insert the variables needed for dynamic content. The URL field can't be empty; it has to contain at least the static part of the URL to which variables are appended.

Image Rounded Corners

The Image rounded corners image property allows you to round the corners of any image you select within the builder.

Take the following steps to use this image property:

  1. Enter your design within the application

  2. Select an image within the builder

  3. Navigate to the image properties located on the right-hand side of the screen

  4. Navigate to the Image rounded corners property

  5. If you'd like to round each corner of your image equally, click the plus (+) symbol below All corners to round all four corners simultaneously

  6. If you'd like to round each corner separately, toggle on More options

  7. Click the plus (+) symbol to round each corner individually

Note: Rounded image corners do not render with Outlook. The fallback for Outlook emails is squared corners.

Last updated