Skip to main content
Adding Images to a Screen

Incorporating visual elements into your campaign is undeniably one of the most essential components for creating an engaging and captivating experience for your audience.

Updated over a week ago



Step-by-Step Guide


1. Ensure that your image assets are compatible with the platform. The "Creative Spec Guide" here is a comprehensive guide that provides the exact dimensions of each kind of visual element you can add to a campaign. Image buttons, split screen layouts, background images and more. You can also download the Spec Guide in the Media Library or directly in the experience campaign builder editor by clicking on the "Design" tool tab on the top right.

2. To add an image at the screen editor level, click on the "Add Element" option on the left side design panel and select "Image/Video" option.

3. You also have the option to add "Image Buttons" to your screen. Simply follow the first step by adding an element and selecting the "Image Button" tab.

Image Buttons and Size Mode

When adding Image Buttons to your campaign, keep the file size around 300kb for optimal display and load times. Use a minimum resolution of 600x600, preferably with square images and centered content.

If you're having issues with your image buttons, start by adjusting the "Position" and "Size Mode" controls. The "Position" matrix lets you choose which part of the image to highlight, while "Size Mode" offers three options: "Show All" displays the entire image to scale, "Fit the Space" scales the image to the button, and "Original" shows the image at its original resolution. Use "Show All" to avoid cropping and "Fit the Space" to ensure the asset fills the available space on any device.



Split-Screen Layout


Split-Screen design specifications are available in the Creative Specs guide, with a suggested resolution of about half the width of standard background images. While Split-Screen layouts look best on Desktop, they can pose challenges for mobile users. In such cases, enable "Style Independently" and opt for a different layout for mobile.

1. To add a "Split-screen" type layout, select the screen background to generate the left-side menu panel. In the "Mobile Layout" section, hover over the layout icons, select which type of split screen: Top or Bottom split.

2. You can adjust the percentage of the split screen depending on how much of the image you wish to show.

3. To add an image, select the top space of the split screen and select the upload icon on the left side panel to add the image or video asset.



Frequently Asked Questions

Q. How do I add Alt-Text to the images?

A. 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.

Did this answer your question?