Register

The Article and how you can use it to design your 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.

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

 

2. Drag and drop the Article element, from the Elements list to a container inside the Landing Page Designer page.article_in_landing_page_design_2.png

Keep in mind that an Article element cannot be added to either 1/3 or 1/4 slots. So you'll have to use containers such as Full WidthHalf 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.

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.article_in_landing_page_design_3_new.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.

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 area next to the arrows.article_in_landing_page_design_4.png

 

3. Select the alignment (TopMiddle, or Bottom) of the text in the drop-down menu of the Text Vertical Align option.article_in_landing_page_design_5.png

 

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

 

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

 

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

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. 

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. 

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.article_in_landing_page_design_6.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.

 

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.

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

12. 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 the 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.article_in_landing_page_design_7.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.

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_in_landing_page_design_8.png

 

3. Check the additional options now made available on the article settings, on the left side of the Landing Page Designer page.article_in_landing_page_design_9.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 on the Crop option to define the area of the image you want to preserve.article_in_landing_page_design_10.png

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.

 

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.article_in_landing_page_design_11.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.