Register

What is an Article and how can I use it to design my landing page ? 

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 landing page and the rest of your site. Images and text make for an enticing combination. Your subscribers read a couple of lines, they get interested and they feel naturally inclined to click on the image to learn more.

That's probably the most common way to use articles inside your landing pages, but don't forget that with Moosend the sky is the limit. Get your creativity going!

After you've started defining your landing page's structure you can go ahead and start adding elements to it. One of the available element types will be 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 Landing Page Designer page.
Landing_pages-What_is_an_article_1.png

2. Drag-n'-drop the Article element, from the Elements list to a container inside the Landing Page Designer page.
Landing_pages-What_is_an_article_2.png

Be advised that an Article element cannot be added to neither 1/3 nor 1/4 slots. So you'll have to use containers such as Full Width, Half Width or the larger slot of the 1/3 - 2/3 combination, all of which can accommodate this type of Element.


3. Click on the Article that you just added inside the container.
Landing_pages-What_is_an_article_3.png

The article settings instantly become available on the left side of the Landing Page Designer 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.
Landing_pages-What_is_an_article_4.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 Padding option to change the height that the text portion of the article will take up inside the container.
Landing_pages-What_is_an_article_5.png

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

Clicking on the lock icon reveals more Padding options, specifically Padding Top, Padding Bottom, Padding Left and Padding Right.  Within each appropriate field, use the up/down arrows to select how much space you want between your text and the Top, Bottom, Left and Right of the Container. As before, you can also choose to type the desired value directly into the are next to the arrows.
Landing_pages-What_is_an_article_extra.png


3. Select the alignment (Top, Middle or Bottom) of the text in the drop-down menu of the Text Vertical Align option.Landing_pages-What_is_an_article_6.png


4. Clicking on the Add Custom Fonts button allows you to choose custom fonts for the text portion of your Article.Landing_pages-What_is_an_article_7.png


5. Click on the Image Alignment drop-down menu to change the alignment of the image portion inside the container.Landing_pages-What_is_an_article_8.png


6. Specify the width of the image using the up/down arrows in the Image Width field.
Landing_pages-What_is_an_article_9.png

The maximum possible value for image width is 2000.

7. Specify the height of the image using the up/down arrows in the Image Height field. 
Landing_pages-What_is_an_article_10.png

The maximum possible value for image height is 2000.

8. Specify the border radius using the up/down arrows in the Image Border Radius field. 
Landing_pages-What_is_an_article_11.png

The maximum possible value for image border radius is 2000.

9. Fill-in the online address, on the designated Link Url  area, to which clicking on the image portion of the article will lead. 
Landing_pages-What_is_an_article_12.png


10. Type the text you would like to appear in the image's container (in the case that the image cannot be displayed), into the Alt Text area.
Landong_pages-What_is_an_article_13.png


11. Click on the up/down arrows on the Spacing option to change the distance between the image portion and text portion of the article.
Landing_pages-What_is_an_article_14.png

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

12. Click on the Upload Image button, located on the article settings on the left side of the page, and browse for the image you want to upload on your computer.
Landing_pages-What_is_an_article_15.png

Alternatively you can use the Upload from URL field and grab the image directly from the internet.

C. Working with the text portion

1. Click on the Click Here to insert your text area to insert your text.
Landing_pages-What_is_an_article_16.png

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

2. Type in your text.
Landing_pagew-What_is_an_article_17.png

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. 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.
Landing_pages-What_is_an_article_18.png

This is a very practical option if you want to achieve picture-perfect alignment between your 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.
Landing_pages-What_is_an_article_19.png

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

2. Click-n'-drag on the designated bottom-right corner of your image to quickly resize it.
Landing_pages-What_is_an_article_20.png

3. Check the additional options now made available on the article settings, on the left side of the Landing Page Designer page. 
Landing_pages-What_is_an_article_21.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.

  • Replace Image
    Replaces the image you have uploaded with another image which you choose from your computer.

  • Remove Image
    Removes the image from the article.

E. Cropping the image

1. Click on the Crop option to define the area of the image you want to preserve.
Landing_pages-What_is_an_article_22.png

Preserved area of the image is made apparent by graying out the area which will be cut-out.


2. Click-n'-drag the sides and corners of the Crop Box to resize it to taste.
Landing_pages-What_is_an_article_23.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.
Landing_pages-What_is_an_article_24.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 left side of the pop-up.
Landing_pages-What_is_an_article_25.png


5. Click on the Crop button to crop the image.
Landing_pages-What_is_an_article_26.png

You can always click on the Cancel button if you change your mind. Or did you 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.