Images are essential for creating a visually appealing and on-brand campaign. You can use this element to add your logo, product shots, banners, or any other graphics to your campaign screens. This guide explains how to add and configure the Image element.
Note: This guide covers settings specific to the Image element. For general settings found under 'Advanced options' (like backgrounds and margins), please refer to our main styling guides.
How to Add an Image
- On any campaign screen, click the "+ Add" button and select the 'Image' element from the list.
- Drag and drop your image file onto the uploader, or click to browse your computer.
Image Settings
Once you have uploaded an image, you can configure its appearance and layout using the following settings:
- Size: Use the slider to adjust the display size of the image as a percentage of the content area's width.
-
Layout: This dropdown controls how your image fits within its container.
- Contain: Ensures the entire image is visible without being cropped, which may leave empty space around it.
- Cover: Scales the image to fill the entire container, which may crop parts of the image to avoid empty space.
- Anchor Point: When using the 'Cover' layout, the anchor point lets you choose the most important part of the image to keep centered and visible (e.g., 'Center', 'Top Left').
Advanced Options
You can access more options by expanding the 'Advanced options' sections:
- Clickable image: Expand this section to turn your image into a clickable link. You can enter a URL and choose to have it open in a new tab.
- Element Background, Paddings, and Margins: These sections contain general styling options for the element's container.
Pro-Tip: Placing Images Side-by-Side
Need to display two images next to each other? The best way to do this is by using the Columns element.
- First, add a 'Columns' element to your screen.
- Then, add a separate 'Image' element inside each of the two columns.
This method gives you full control over the layout. For more details, see our complete guide: Adding a new element - Columns.