How to Add and Manage Images in Templates
Why This Matters
Images bring your email campaigns and landing pages to life. Whether you're showcasing products, adding your logo, or including photos to illustrate your message, images make your templates more engaging and professional. Knowing how to add, organize, and optimize images helps you create visually appealing templates that load quickly and display correctly across all devices.
The template editor includes a built-in file manager that stores all your images in one organized location, making it easy to reuse images across multiple templates and keep your visual assets organized.
Before You Begin
Make sure you've opened a template in the editor and have at least one row with columns added to your canvas. Images need to be placed inside columns to display properly.
Gather any images you plan to use. The editor accepts common image formats (JPG, PNG, GIF, WEBP) with a maximum file size of 20MB per image, though smaller files (under 1MB) load faster for your contacts.
Step-by-Step Instructions
1. Add an Image Block to Your Template
Image blocks are containers that hold and display your photos, graphics, and logos.
Click the Content tab in the sidebar, then drag an Image block onto your canvas. Drop it into any column within a row. The image block appears with a placeholder and a "Browse" button in the center.
Click the Browse button to open the file manager where you can select or upload images.
Why this matters: Image blocks automatically handle responsive sizing, ensuring your images look good on both desktop and mobile devices. They also provide easy access to editing and linking options.
Time: 30 seconds to add an image block
2. Upload Images Using the File Manager
The file manager is your central library for storing and organizing all images used in your templates.
When the file manager opens, you'll see any images you've previously uploaded. To add new images, either drag image files directly from your computer into the file manager window, or click the Upload button and browse your computer's folders to select files.
You can upload multiple images at once by selecting several files before clicking Open. The file manager shows upload progress as it processes your images.
Why this matters: Images uploaded to the file manager are stored securely and can be reused across all your templates. This saves time - you only need to upload your logo or product photos once, then you can use them in any template.
Time: 1-2 minutes to upload several images
3. Organize Images in Folders
Keep your images organized by creating folders for different categories - logos, products, headers, etc.
In the file manager, click the "Add folder" button. Type a name for your folder using letters, numbers, spaces, periods, hyphens, or underscores. Click the folder to open it, then upload images directly into that folder.
To navigate back to parent folders, use the breadcrumb trail at the top of the file manager. Click the home icon to return to your root folder at any time.
Why this matters: Good organization becomes essential as your image library grows. Folders make it easy to find specific images quickly, especially if you manage templates for different campaigns, products, or brands.
Time: 1-2 minutes to create and organize folders
4. Select and Insert an Image
Once your images are uploaded, you can insert them into your template with a single click.
In the file manager, browse to the image you want to use. You can toggle between grid view (thumbnails) and list view (detailed information) using the view buttons at the top. Click the image you want, then click the Insert button (or simply double-click the image).
The file manager closes and your selected image appears in the image block on your template.
Why this matters: The visual preview in grid view makes it easy to find the right image quickly. List view shows helpful details like file size and upload date if you need that information.
Time: 30 seconds to find and insert an image
5. Resize and Position Your Image
Control how large your image appears and where it sits within its column.
Click the image in your template to select it. In the sidebar under Content Properties, you'll see several sizing options:
Auto-width: When turned on (default for images larger than their column), the image automatically fills the available width. Turn it off to manually resize the image by dragging the corners.
Alignment: Click the alignment buttons to position your image left, center, or right within its column.
To manually resize, turn off Auto-width, then click and drag the corner handles on the image. The image maintains its proportions as you resize.
Why this matters: Proper sizing ensures images don't slow down email loading times. Smaller, appropriately-sized images load faster. Alignment helps create balanced, professional-looking designs.
Time: 1 minute to resize and position an image
6. Add Alt Text for Accessibility
Alt text describes your image for people using screen readers and appears when images can't be displayed.
With your image selected, look in the sidebar under Content Properties for the "Alternate text" field. Type a brief, descriptive sentence explaining what the image shows.
Good alt text examples:
- "Red running shoes on wooden floor"
- "Company logo with blue and white design"
- "Graph showing 40% sales increase in Q3"
Avoid: "Image," "Photo," or other generic descriptions that don't add useful information.
Why this matters: Alt text is essential for accessibility, helping vision-impaired users understand your content. It also displays when email clients block images by default, giving recipients context about what they're missing. For landing pages, alt text can improve search engine optimization.
Time: 30 seconds per image
7. Edit Images with Built-in Tools
Make quick adjustments to images without leaving the editor or using separate photo editing software.
Select your image, then click the "Apply effects & more" button in the sidebar. An image editor opens with several tools:
Crop: Trim unwanted parts of the image or adjust the composition Resize: Change the actual image dimensions Rotate: Fix orientation or create angled effects Filters: Apply preset visual effects like black & white, vintage, or brightness adjustments Stickers: Add decorative elements (use sparingly for professional templates)
Make your adjustments, then click Apply to save changes. Click Cancel to discard changes.
Why this matters: Quick edits save time and ensure visual consistency. You don't need to leave the editor to make simple adjustments like cropping product photos or brightening images. The edited version is saved automatically, so you won't need to re-upload.
Time: 2-5 minutes depending on edits
8. Round Image Corners
Add visual interest by rounding the corners of your images.
Select your image and look in the sidebar for the "Image rounded corners" option. Click the + button under "All corners" to round all four corners equally. The more you click, the more rounded the corners become.
For uneven rounding, toggle on "More options" to control each corner individually.
Why this matters: Rounded corners create a softer, more modern look. This works especially well for profile photos, product images, and decorative graphics. Note that some email clients (particularly Outlook) don't support rounded corners and will show squared corners instead.
Time: 30 seconds
9. Link Images to URLs
Make your images clickable so contacts can tap them to visit a webpage, start an email, or call a phone number.
Select your image and find the "Action" section in the sidebar. Click the dropdown that says "Link to" and choose your link type:
- Web Page URL: Enter the full web address (like https://yourwebsite.com)
- Email: Create a mailto link by entering an email address
- Phone: Create a click-to-call link by entering a phone number
- File: Link to a PDF or document you've uploaded to the file manager
After entering your link, you can choose whether the link opens in the same window or a new tab (web links only).
Why this matters: Clickable images create larger, more obvious calls-to-action than text links alone. Product images that link to product pages, or banner images that link to landing pages, make it easier for contacts to take action.
Time: 1 minute per linked image
10. Replace an Image
Swap out an image while keeping all your size, alignment, and link settings.
Click the image you want to replace, then in the sidebar click "Change image." The file manager opens. Select a different image and click Insert.
The new image appears in place of the old one, maintaining all the formatting and settings you'd already configured.
Why this matters: This is much faster than deleting an image block and starting over, especially if you've already set up specific sizing, alignment, and linking. It's perfect for seasonal updates or A/B testing different images.
Time: 30 seconds to swap an image
Questions and Answers
Q: What image file types can I use?
A: The editor accepts JPG, JPEG, PNG, GIF, WEBP, ICO, TIFF, and MPO formats. For best compatibility across email clients, stick with JPG (for photos) and PNG (for logos or graphics with transparency). GIF works for animated images.
Q: How large should my images be?
A: For templates, keep image widths between 600-800 pixels maximum and total file sizes under 1MB each for fast loading.
Q: Can I delete images from the file manager?
A: Yes, but be careful. Hover over an image in the file manager and click the delete icon. However, if you delete an image that's being used in a saved template, that template will show a broken image placeholder. Only delete images you're certain aren't being used anywhere.
Q: How do I delete empty folders?
A: Only empty folders can be deleted. Make sure the folder contains no images, then hover over it and click the delete icon. If you can't delete a folder, it still contains files - check inside to make sure it's truly empty.
Q: Can I move images between folders?
A: No, the file manager doesn't currently support moving files between folders. If you need an image in a different folder, you'll need to upload it to that folder separately. This is why planning your folder structure before uploading saves time.
Q: Why does my image look blurry in the template?
A: This usually happens when a small image is stretched to fill a large space. Check your image's actual dimensions - it should be at least as wide as the space it's filling. Try uploading a higher resolution version of the image.
Q: Can I use images from external URLs instead of uploading?
A: Yes! When selecting an image, you can paste an external image URL in the URL field instead of uploading. However, uploaded images are more reliable since you control the hosting. External images might break if the source website moves or deletes them.
Q: What's the difference between changing alignment and changing column layout?
A: Alignment moves the image left, center, or right within its column while keeping the image the same size. To create different layouts with text beside images, you need to use multi-column row layouts instead.
Q: Do I need different images for mobile vs. desktop?
A: Usually no - images automatically adapt to screen size. However, for large hero images or detailed graphics, you might want to upload a mobile-optimized version and use the "Hide on mobile/desktop" feature to swap between them for the best viewing experience.
Q: How do I add a background image instead of a regular image?
A: Background images are applied at the row level, not as image blocks. Click on a row to select it, then look in the sidebar for row background options. This is covered in more detail in other help articles about row styling.
Q: Can I search for images in the file manager?
A: Yes! Use the search feature at the top of the file manager to find images by filename. The search only looks within the current folder you're viewing, not across all folders.
Q: Why can't I select multiple images to delete at once?
A: You can! Use the checkboxes that appear next to deletable items in the file manager. Check multiple images, then click the delete action that appears at the top of the list. This only works for items that can be deleted (not for folders containing files).
Guide Type: How-To Guide
Estimated Time: 10 minutes