This article is specifically about editing images in the Newsletter Editor, for an introduction to Newsletters and how they work, check out this article.
How do I edit Images in Newsletters?
The sky's the limit when it comes to editing images in Beehively’s Newsletter editor! To get started, drag an Image content block in from the Content panel, or click on an existing image to edit it.
When selecting an image, you will see these sections in the side panel on the right:
Image: This section contains these options:
Upload Image: Drag a file here (or click to pick a file from your computer) to use it in this image content block.
Apply Effects and More: This lets you edit the currently selected image in the Image Editor. See “Using the Image Editor” for more information.
Image URL: If you would like to use an image from elsewhere on the web, just paste the URL into this box.
Auto Width: This setting allows you to have the image automatically fill the width of the column it’s in. Turning it off allows you to set the image to be a percentage of the column’s width. You can use this if you want to make the image smaller than the full column.
Align: Allows you to align the image to the left, right, or center of the column. This only has an effect if the Auto Width setting is turned off.
Alt Text: This allows you to set an alt text description for an image. Alt text is text that appears in place of an image if the image fails to load on a user's device. This also helps screen-reading tools describe images to visually impaired readers.
Action: This allows you to have clicking the image perform an action, such as linking to a website. You can enter the URL you would like the image to link to here.
General: This section allows you to change the padding around the image.
Responsive Design: If you wish, you can hide images when the newsletter is viewed on a desktop computer. This option is available on any content block or row.
Using the Image Editor
Once you’ve picked an image, you can adjust it using the Image Editor. On any image, click the “Apply Effects and More” button to get started. On clicking this, the Image Editor will open as a popup.
On the top bar, you’ll see options to Save your changes or Cancel. In the center, you’ll see the zoom controls, and then at the far right you’ll see undo/redo, history, and layer controls.
Below this, you’ll see your image editing toolbar.
Note: When using any of these tools, the Apply button on the right side of this bar will apply the effect, and the Cancel button on the left will cancel the change.
Filter: Apply different types of filters to your image, such as black and white, sepia tone, blur effects, and more. Just click a filter to enable it, and click the X on the filter to disable it. Some filters have options that you can apply by clicking on the gear icon. When you’re done, hit Apply in the upper right. You can even apply multiple filters in one single step!
Resize: Resize your image to a specific height and width or resize by percentages.
Crop: Crop your images to a specific aspect ratio or drag the handles to freely crop your image.
Transform: Rotate or mirror your image. Use the slider to rotate by individual degrees.
Draw: Draw directly on your image. You can change the brush color, type, and size, and then add all kinds of extra flair to your image!
Text: Add text to your image. You can change the color and font in the toolbar, and adjust the size and position of your text by moving it directly on the image.
Shapes: Add customizable shapes to your image.
Stickers: Choose from a variety of customizable stickers, organized into different categories.
Frame: Add different frames to your image. Click the gear icon to change the size of the frame.
Corners: Crop the corners of your image into rounded corners. Adjust the slider to round more or less.
Background: Apply a background color behind the image. (This will show if you make adjustments to the image that allow the background to be visible).
Merge: If you have multiple objects in your image, you can use this tool to merge them into a single layer. See below for more information on this.
Objects in the Image Editor
When you add Drawings, Text, Shapes, or Stickers to your image, these will be treated as “Objects”. What this means is that they will exist on a separate layer on top of the base image and background. You can have multiple Objects in one canvas and go back to edit them and adjust them as you work on the image. You can see a list of all existing objects by clicking the Objects icon in the upper right of the Image Editor.
Note: When you finish editing your image by hitting Save in the upper left, all objects on your image will be flattened onto the background to create one single image, and you will not be able to go back and edit these individual objects further.
When you select an object, you will see a new Object Toolbar in place of the regular Toolbar that gives you control over that particular object. You can move it, resize it, and rotate objects by moving the drag handles on the canvas. The Object Toolbar contains these options:
Text Style (only available for Text): Change the text’s alignment (for text with multiple lines), apply formatting, and change the font with this tool.
Color: Change the base color of your object.
Shadow: Add an adjustable drop shadow to your object.
Outline: Add a colored stroke around the object. You can also adjust the width here.
Background: Change the color of the object’s background.
Texture: Apply a texture to the object instead of a color. You can use one from the gallery or upload your own!
Gradient: Apply a color gradient to the object instead of a background.
Opacity: Change the object’s opacity (transparency).
When you are done making your adjustments with these tools, hit Apply at the far right side of the toolbar.