Register

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

Moosend's Landing Page Designer not only allows you to design your landing page by adding all kinds of elements, including those cool looking images you've been meaning to use to up your game, but gives you all the tools you need to make them smoothly fall into place.

After you've begun defining your landing page'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 Landing Page Designer page.
Landing_pages-What_is_an_Image_1.png

2. Drag-n'-drop the Image element, from the Elements list to an empty container inside the Landing Page Designer page.
Landing_pages-What_is_an_Image_2.png


3. Click on the Image that you just added inside the container.
Landing_pages-What_is_an_Image_3.png

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

B. Setting up the image

1. Click on the Background Color option, to choose the background color of your image out of the palette of colors available.
Landing_pages-What_is_an_Image_4.png

Most of the times 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 Image Alignment drop-down menu to change the alignment of the image inside the container.
Landing_pages-What_is_an_Image_5.png

3. Click on the Image Width field, located within the image settings on the left side of the page, and use the up/down arrows to specify the width of your image.
Landing_pages-What_is_an_Image_6.png

The maximum possible value for image width is 2000.


4. Click on the Image Height field, located within the image settings on the left side of the page, and use the up/down arrows to specify the height of your image. 
Landing_pages-What_is_an_Image_7.png

The maximum possible value for image height is 2000.

5. Click on the Image Border Radius field, located within the image settings on the left of the page, and use the up/down arrows to specify the image border radius. 
Landing_pages-What_is_an_Image_8.png

The maximum possible value for border radius is 2000.

6. Fill-in the online address, in the designated Link Url area, to which clicking on the image might lead. 
Landing_pages-What_is_an_Image_9.png

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!

7. Click on the Alt Text field, located within the image settings on the left side of the page, to type the text that you would like to appear in place of the image (in the event that the image cannot be displayed).
Landing_pages-What_is_an_Image_10.png

 8. Click on the Upload Image button, located on the image 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_Image_11.png

Alternatively, you can use the Or enter Url... option to grab the image from the internet!


C. Editing the image

1. Double-click on the Double-Click Here or drag and drop your image area to start browsing your computer for the image you wish to upload.
Landing_pages-What_is_an_Image_12.png

As the area text implies, you can also drag-n'-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.


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

3. Check the additional options now made available on the image settings, on the left side of the editor page. 
Landing_pages-What_is_an_Image_14.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.

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

  • Remove Image
    Removes the image from the container.

D. Cropping the image

1. Click-n'-drag the Crop Box to define the area of the image you want to preserve.
Landing_pages-What_is_an_Image_15.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_Image_16.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_Image_17.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_Image_18.png


5. Click on the Crop button to crop the image.
Landing_pages-What_is_an_Image_19.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 to.