The Image Editor is an integrated tool for adjusting images after uploading them to your template or for creating completely new ones. It’s a fast, user-friendly way to make visual adjustments without interrupting your workflow.
Image Editor is not just a basic tool for minor adjustments to your images; it is a feature-rich solution for semi-professional image editing and composition directly within the email template editor. Its complexity is comparable to that of the editor itself, so in this article, we will introduce you to all its features.
How to access the Image Editor
You must first add an Image content block to your template to access the editor. A File Manager will appear when you click on the empty Image block. You have two options here, depending on if you wish to edit an existing image or create a new one:
If you want to edit an existing image, select it from the File Manager and add it to the template. While the image is still selected, go to the Content sidebar and click the "Edit" button. The Image Editor will launch with your image pre-loaded and ready for editing.
If you want to create a new image, click the "Create New" button in the File Manager instead of inserting an existing image. Before launching the Image Editor, you will be prompted to select a desirable canvas size from a predefined set of dimensions. Alternatively, you can specify your own canvas dimensions. Afterward, the Image Editor will launch with an empty canvas of set dimensions, ready for editing.
The choice of workflow does not impact the functionality of the Image Editor. Depending on the workflow you select, you may face extra setup steps (e.g., choosing the canvas dimensions); however, you will ultimately arrive at the same Image Editor.
Both workflows are interchangeable, meaning that even if you start with an empty canvas, you can add an image for editing. Likewise, if you begin with an image already loaded in the editor, you can transform it into an empty canvas.
Main features
Although our Image Editor is packed with features, it remains surprisingly easy and intuitive to use. Although it may not match professional and industry-standard image editing software, you can perform all the basic and advanced image edits necessary for designing an email template.
Edit
This tab highlights our editor's primary image editing features. You have full control over various image properties, including brightness, saturation, contrast, temperature, hue rotation, grayscale, noise, and blur. Additionally, you can apply either a predefined or a custom duotone effect and a vignette effect.
Tip - Working with sliders
To change the value of any image property using the sliders, you can:
Select and drag the horizontal line to either side of the scale if negative values are permitted.
Click anywhere on the slider. When you hover over it, a helpful ruler will mark each point. Use it as a guide.
Click the numeric value on the left and input a specific numeric value.
Double-click the slider to reset it to its default value. To reset all values to their defaults, use the "Reset Adjustments" button located beneath the sliders.
Size
This tab offers tools for adjusting image orientation and cropping.
Orientation adjustments include horizontal and vertical flipping options and rotating the image by 90 degrees. The Angle slider allows you to rotate the image by a specific angle.
When you navigate to the Size tab, a cropping window will automatically appear over your image. To resize it, simply grab one of its corners and move it freely. To place the desired area of the image you want to preserve within this window, click anywhere within the window and drag the image around. The rest of the image will be discarded once you click on the "Crop" button. If you need to crop your image according to a specific aspect ratio, select one from the available list or set a custom one. To return the cropping window to its default size, click the "Reset" button.
Text
You can also add text to your images. Simply drag and drop one of the predefined formats from this tab onto the canvas. With the text selected, a toolbar will appear above it, offering all the necessary features for quick editing (font style, weight, size, color, and delete).
You can resize the text area by dragging one of its corner markers and the font size will change accordingly. You can also drag one of the horizontal markers to change the width of text area and the text will split into new line if necessary. You can also rotate the text by dragging the circular arrow beneath the text.
If you want to modify the text even further, click on the "Settings" button (three vertical dots) on the far left of the toolbar. This will open a dedicated sidebar to the right of the canvas, which includes additional editing features such as precise position, alignment, order, and various effects.
Tip - Alignment guidelines
As you drag any feature across the canvas, orange guidelines will automatically appear to help you align it with any already present feature in its proximity.
Elements
Our Image Editor features a gallery of shapes, lines, and icons that you can add to your canvas. Simply drag and drop them onto the canvas, or double-click any that you like, and they will appear on the canvas. If you are searching for a specific shape or object, use the search field to filter for exactly that.
Once added, you can interact with them in the same way you would with text, as described in the Text section above. In addition to the basic editing tools available in the toolbar above each element, they also come with advanced settings accessible through the "Settings" button (three vertical dots) on the far left of the toolbar. These are always linked to the type of element you edit; arrows will have slightly different advanced settings compared to basic shapes.
Tip - Grouping elements
As you add multiple objects (texts, elements, images) to your canvas, you gain the ability to group them together. This will allow you to edit them as if they were just one object. You can always split them apart later.
Pictures / Upload
Creating compositions with multiple images in the Image Editor is straightforward. After selecting the Pictures tab, you will see a few random images pre-loaded from the Pexels image library. Hover over any of them to view it in full size. If you're looking for a specific image, use the search field to filter for relevant results. Double-click on any image you like or drag and drop it onto the canvas.
Using the provided UI elements, you can easily move, rotate, and resize them, or use the toolbar above the image to flip it.
The most interesting tools are accessible through the "Settings" button (three vertical dots) located on the far left of the toolbar. Here, you will find all the image editing tools available in the Edit feature and additional options that allow you to set precise positions or sizes, change the order, or mask the image into predefined shapes.
If you cannot find an image you can use, click the "Upload" button to upload images from your storage instead. All uploaded images will be stored separately in the last tab of the main features, called Upload.
Additional features
Undo/Redo
Allows you to undo any number of recent changes made to your picture or reapply these changes.
Zoom
The bottom left corner of the canvas features a tool for adjusting the zoom. In addition to zooming in and out with the magnifying glass icons, you can click on the numeric value between them to choose from predefined zoom levels.
Save / Exit
Once you have finished editing your image, click the "Save" button at the top right corner.
You will be prompted to specify the size and quality of the image under which you wish to save it, as this will ultimately affect the overall size of the final image. This step is very important because there is a hard limit to the total size of the email.
Confirm the settings by clicking the "Save" button. You will be prompted with another modal window where you can set the file name for your new image, under which it will be stored in the File Manager. Once confirmed, you will be returned to your email template with your new image already in place!
If you wish to exit the editor, click on the "X" button next to it.
Conclusion
This concludes the introduction to the key features of our Image Editor. We believe that this tool is intuitive and user-friendly, enabling you to explore, experiment, and discover the amazing things you can achieve simply by using it.
If you encounter any problems or need any help, do not hesitate to contact our support team.