Before you begin
Ensure your image assets are compatible with the platform. Refer to the Creative Spec Guide for the exact dimensions of each type of visual element, including image buttons, split-screen layouts, and background images. You can download the Spec Guide in the Media Library or within the experience campaign builder editor by clicking on the Design tool tab on the top right.
Supported File Types & Specs
Before styling, make sure your image file meets the platform's requirements:
Property | Recommendation |
Formats |
|
File size | ~300KB recommended, 1MB max |
Min resolution | 600 × 600px |
Note on GIFs: GIFs are supported but may display at reduced quality. For smoother animation, consider using a .MP4 video file instead.
Note on SVGs: SVGs scale perfectly at any size and are ideal for logos, icons, and simple graphics.
Add images
To add an Image element to a screen:
Open your experience in the Builder and navigate to the screen you want to edit.
Click "Add Element" in the editor to open the element panel.
Select Image / Video from the element list.
Upload your file from the Media Library or paste an external URL.
Once added, the image appears on your screen and its settings are visible in the left control panel.
Note: At times users are unable to upload images if they are connected to their organizations VPN.
Resizing & Repositioning
Resizing
Width and height are not set through the control panel. To resize an Image element:
Select the element on the canvas.
Click and drag any corner handle to resize it freely.
The element will scale as you drag, and the updated dimensions are reflected in real time on the canvas.
Repositioning
Image elements use auto-positioning by default, meaning they flow within the screen's layout rather than being freely draggable. To move an element up or down in the layout order:
Select the element.
Use the up arrow or down arrow buttons next to the preview window to shift its position in the stacking order.
Free-form positioning is another way to position elements on a screen. See the Free-Form Positioning article for details.
Control Panel Styling Options
When an Image Button element is selected, the left control panel displays the following options in order.
Option | What it does |
Image |
|
Change Media | Opens the Media Library to swap the image or video. Preserves all other settings when changed. |
Image Positioning | Aligns the image horizontally within the element bounds — Left, Center (default), or Right. |
Shape |
|
Border Radius | Rounds the corners of the element — from subtle softening to a fully circular shape. |
Spacing | Controls the margin around the element — the space between it and neighboring elements on the screen. Individual values can be set for Top, Bottom, Left, and Right. |
Advanced Settings |
|
Animation | Applies an entrance animation when the screen loads. |
Alt Text | Accessible description read by screen readers in place of the image or video. Always fill this in for media that conveys meaningful information. |
Note: You can add a link to this element. Select the image on the canvas — a link icon will appear — click it and insert the URL.
This makes the image clickable. Links always open in a new tab.
This option is best for opening external URLs. To navigate to a screen within the experience, use the Image Button element instead.
Style Independently (Desktop vs. Mobile)
By default, styling changes apply to both desktop and mobile views simultaneously. The Style Independently (SI) feature lets you apply different styling to the same image element per device:
Select the image element.
Toggle between Desktop and Mobile views using the device switcher at the top of the editor.
Enable Style Independently for that element by clicking the SI icon on the element tag.
Make your device-specific adjustments — size, spacing, alignment, etc.
A revert icon will appear on the element tag to indicate the element has device-specific overrides.
Tip: If you need to sync your mobile design back to desktop (or vice versa), use the "Apply mobile design" option that appears in the element's context menu.
Animation
Image elements support entrance animations that play when the screen first loads:
Select the image element.
Scroll down in the left control panel to find "Choose animation style".
Select your preferred animation (e.g., fade in, slide in, zoom).
Animations can help draw attention to key visuals, especially on outcome or result screens.
Video Files in the Image/Video Element
The Image element also supports video files (e.g., .MP4). When using video:
Video controls (play, pause, volume) are shown by default in the live experience.
Use Change Media in the control panel to swap a video file the same way you would an image.
For advanced video behavior such as hiding controls or autoplay configuration, additional permissions may be required. Please reach out to support to discuss your options.
Accessibility Considerations
Alt Text
The control panel includes an Alt Text field for every Image element. Alt text is read by screen readers in place of the image and is essential for making your experiences accessible:
Select the image element.
In the control panel, locate the Alt Text field.
Enter a brief, descriptive label for the image (e.g., "Woman holding a coffee cup, smiling").
Always fill in alt text for any image that conveys meaningful information to users.
Additional Accessibility Tips
Avoid embedding text inside images — screen readers cannot read text baked into image files. Use a Text element layered on top instead.
Images should maintain sufficient color contrast with any overlaid text (minimum 4.5:1 ratio recommended).
Ensure images scale and reflow properly at small screen widths for mobile users.
Quick Reference
Option | Where to Configure |
Resize (width & height) | Drag corner handles on canvas |
Reposition | Up / Down arrows next to preview window |
Swap image or video | Control panel → Change Media |
Image alignment | Control panel → Image Positioning (L / C / R) |
Add a link to the image | Select image on canvas → Link icon → Insert URL |
Border radius | Control panel → Border Radius |
Spacing (margin) | Control panel → Spacing |
Animation | Control panel → Choose animation style |
Alt text | Control panel → Alt Text |
FAQ
How do I add alt-text to the images?
Alt text is essential for ADA compliance, providing descriptions of images for visually impaired readers. It is only required when the image conveys information; purely decorative images do not need alt text. To add alt text, select the image in your campaign and scroll to the alt text field in the left panel.
Can I make an image clickable to go to the next screen?
Yes. While images alone aren’t clickable, you can use an image button element instead.
Can I use different product images for desktop and mobile in a Dynamic Product Feed (DPF)?
No, Dynamic Product Feeds support only one image field per product. This image will be used across both desktop and mobile views. If you need different visuals for each device type (e.g., wide horizontal images for desktop, tall vertical images for mobile), you would need a custom implementation. You can connect with our support team for more information.
Why do my side-by-side image buttons appear to be different heights, even though they're set to the same size?
This issue is often caused by extra white space or padding within the image files themselves. For example, if one image has white borders at the top and bottom, it may appear shorter than the others, even if all buttons are sized equally in the editor. To fix this, crop any excess white space from the image using an image editing tool, then re-upload the updated version. This will ensure consistent visual height across all buttons in your experience.