How to add images to your emails
In this article, you will learn how to embed visual graphics and media assets directly into the layout canvas of your emails using both the text-based classic editor formatting toolbar and our advanced drag-and-drop visual engine builder.
What you will need:
- A SystemeScale account
- An active email broadcast blueprint (standalone Newsletter, campaign sequence milestone, or automation rule communication)
- Your visual product graphics or web image assets
1. Adding graphics within the Classic Email Editor
The classic text interface provides two independent deployment workflows to embed images directly inside your copy block canvas:
Workflow A: Injecting from an external image hosting repository
1
Fetch your hosting asset path link
Upload your graphic asset to a secure cloud server or external image hosting site, and copy the direct raw destination URL address token string.
2
Deploy via URL string field
Inside your classic text workspace editing panel, expand your text editor options by clicking the three dots symbol, and select the link injection arrow element. Paste your copied direct link string cleanly into the field labeled Insert image via link, and click the completion check symbol to render the block layout.
Workflow B: Uploading native image files from your local storage
3
Initialize direct cloud upload rules
Click the three dots symbol inside your classic formatting toolbar to expand the utility rows. Next, click the primary image element symbol to open your device file manager console. Select your asset to upload it straight to our secure platform servers and insert it into your active draft.
Refining layout parameters and alignment styles
Once your graphic renders within the text box wrapper block, click on the element to display its formatting properties. You can modify several attributes directly:
- Structural Positioning: Set alignment rules to inline, left-indented, centered columns, or right-justified arrays.
- Accessibility Metadata: Input an explicit alternative text (Alt Text) description block to maintain CAN-SPAM accessibility compliance standards.
- Text Captions: Add an external subtext caption description layer directly beneath the graphic.
- Action Redirect Links: Embed a tracking redirect target URL to transform the entire graphic layout into an executable click element.
- Fluid Sizing Constraints: Click and drag the corner boundaries to scale your media dimensions. A real-time percentage tag element will display to show the asset's current width constraint relative to your master page layout container. Toggle the mobile visibility setting to force the asset to scale to 100% full-width dynamically on mobile devices.
2. Adding graphics within the Visual Email Editor
The drag-and-drop visual interface makes asset composition fast and smooth. It uses a structured module grid that matches the layout logic of our funnel design canvas.
4
Place the layout widget container
Open your newsletter or campaign visual building dashboard layout (How to use the email editor). From the elements tray in the left panel block, select the Image module and drag it directly onto your canvas column target rows.
5
Configure properties and properties settings
Click directly on your newly placed image widget block on the canvas to open its detailed settings configuration panel in the left sidebar layout. Take advantage of three crucial control parameters:
- Native File Ingestion: Click the cloud cloud upload icon to open your system directory and upload a local graphic asset directly into your platform cloud file storage.
- Action Target URL: Drop a destination URL path token string into the target field. This automatically redirects subscribers to a landing page or store whenever they click the image container.
- Width Dimension Constraints: Use the sizing slider or numeric pixel field parameters to precisely control your asset's display area.
6
Lock current changes and publish
Once your visual media parameters match your brand standards, click the prominent Save changes button block in the upper right header to save your work.
π¨
How to use the email editor
Want to dive deeper into managing visual block visibility, toggling hidden layouts by device type, or adjusting adaptive fluid typographic font system settings? Read our complete layout guide.
Was this article helpful?