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

An article is a type of element consisting of two parts: an image portion and a text portion. Articles act as great bridges between your newsletter and your site since images and text make for an enticing combination. 
That is probably the most common way to be using articles inside your campaigns, but don't forget that with our platform you don't have any limits as regards your creativity.

After you have started defining your newsletter design's structure, you can go ahead and start adding elements to it. One of the available element types is the Article.

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

A. Adding an article

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


2. Drag and drop the Article element, from the Elements list to a container inside the Editor page.article_element_newsletter_2.png

Keep in mind that an Article element cannot be added to either 1/3 or 1/4 slots. So you will have to use containers such as Full WidthHalf-Width, or the larger slot of the 1/3 - 2/3 combinations, all of which can suit this type of Element.

3. Click on the Article element that you just added inside the container.

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

B. Setting up the article
1. Click on the Background Color option, to choose the background color of your article out of a palette.article_element_newsletter_3.png

The default option is transparent and should work for most circumstances, but the option is there in case you ever need it.

2. Click on the up/down arrows on the Text Padding option to change the height that the text portion of the article will take up inside the container.

Alternatively, you can fill in the padding size number directly, on the area located next to the arrows.

3. Click on the Alignment drop-down menu to change the alignment of the image portion inside the container.article_element_newsletter_4.png


4. Fill in the online address, on the designated Link Url area, to which clicking on the image portion of the article will lead. 


5. Click on the up/down arrows on the Spacing option to change the distance between the image portion and text portion of the article.article_element_newsletter_5.png

You can fill in the spacing number directly, on the area located next to the arrows.

6. Click on the Image Picker button, located on the article settings on the left side of the page, and browse for the image you want to upload from your computer or any of the other available sources.


C. Working with the text portion
1. Click on Click Here to insert your text area to insert your text.

A text-editing pop-up appears above the text portion of the article you are editing.

2. Type in your text.

Alternatively, you can use the three paste options available inside the text-editing pop-up:

  • Paste
  • Paste as plain text
  • Paste from Word

The text-editing pop-up contains all the standard editing options you'd expect from a fully-fledged text processor and more.

3. Pay special attention to the Personalization Tags drop-down menu, available on the text-editing pop-up.article_element_newsletter_6.png

This provides quick access to adding personalization tags inside your campaign.

4. Click on the Show Blocks option, also available on the text editing pop-up, which allows you to see the blocks where your text resides.

This is a very practical option if you want to achieve picture-perfect alignment between the text portion and the image portion of the article.

D. Working with the image portion

1. Double-click on the image portion of the article, to start browsing your computer for the image you wish to upload.

Once the process is done, a pop-up appears to notify you that the image has been successfully uploaded.

2. Click and drag on the designated bottom-right corner of your image to quickly resize it.article_element_newsletter_7.png


3. Check the additional options now made available on the article settings, on the left side of the editor page.article_element_newsletter_8.png


The new options are there to help you make the image sit perfectly inside its container. You can do the following:

  • 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 image portion of the article.

  • Image Picker
    Replaces the image you have uploaded with another image that you choose from your computer

    or any of the other available sources.

  • Remove Image
    Removes the image from the article.

E. Cropping the image

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

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 taste.article_element_newsletter_9.png


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 left side of the pop-up.article_element_newsletter_10.png


4. 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 left 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.