The Image element and how you can use it to design your newsletter

Our platform's Campaign Editor not only allows you to design your newsletter by adding all kinds of elements, including those appealing images you have been meaning to enhance your newsletter but also provides you with all the tools you need to make them fall into place.

After you have defined your newsletter design's structure you can also start adding elements to it. One of the available element types will most certainly be the Image.

Let's see how you can add one to your structure:

A. Adding an image element

1. Click on the Elements button, located on the left side of your Editor page.image_element_newsletter_1.png


2. Drag and drop the Image element, from the Elements list to an empty container inside the Editor page.image_element_newsletter_2.png


3. Click on the Image that you just added inside the container.

The image settings instantly become available on the left side of the Editor page.

B. Setting up the image
1. Click on the Background Color option, to choose the background color of your image out of a palette.image_element_newsletter_3-new.png

Most of the time the default transparent option is the one that works best, but sometimes adding background color might help you better integrate an image to the style of your design, especially if you intend to resize the image so that it doesn't take up all of the container space.

2. Click on the Alignment drop-down menu to change the alignment of the image inside the container.


3. Fill in the online address, on the designated Link Url area, to which clicking on the image might lead.

Adding a URL is not necessary unless you want your image to lead your subscribers somewhere. It's just there in case you need it.


4. In the Alt Text field, type in your desired text, which will appear instead of your image, in those cases where the image cannot be displayed.


5. Click on the Image Picker button, located on the image settings on the left side of the page, to upload an image from your computer, or from a variety of applications.

As the area text implies, you can also drag and drop the image from your computer. Once the upload process is done a pop-up appears to notify you that your image has been uploaded successfully.


C. Editing the image

1. Click and drag the designated bottom-right corner of your image to resize it.image_element_newsletter_4.png


2. Check the additional options now made available on the image settings, on the left side of the editor page.image_element_newsletter_5-new.png

The new options are there to help you make the image sit perfectly inside its container. These are:

  • Crop
    Opens the crop pop-up which focuses on the image and provides you with efficient cropping tools.
  • Natural Size
    Resizes the image back to its original dimensions.

  • Full Width
    Resizes the image to cover the maximum possible width inside the container.

  • Remove Image
    Removes the image from the article.

D. Cropping the image

1. Click and drag the Crop Box to define the area of the image you want to preserve.image_element_newsletter_6.png

The preserved area of the image is made apparent by graying out the area which will be cut out.

2. Click and drag the sides and corners of the Crop Box to resize it to your liking.


3. Set Crop Box width by pulling, typing an exact number, or by using the up/down arrows which appear as soon as you place your mouse on the Crop Box Width area, on the right side of the pop-up.image_element_newsletter_7.png


4. Set Crop Box height by pulling, typing an exact number, or by using the up/down arrows which appear as soon as you place your mouse on the Crop Box Height area, on the right side of the pop-up.


5. Click on the Crop button to crop the image.

You can always click on the Cancel button if you change your mind. If you chose to press on Crop and you now find that you don't like the way the result looks, don't worry, cropping isn't permanent. You can go back and re-crop the original image from scratch, as many times as you need.