Our platform's Landing Page Designer not only allows you to design your landing page by adding all kinds of elements, including those appealing images you have been meaning to use but also provides you with all the tools you need to make them fall into place.
After you have defined your landing page 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.
2. Drag and drop the Image element, from the Elements list to an empty container inside the Landing Page Designer page.
3. Click on the Image that you just added inside the container.
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.
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 Image Alignment drop-down menu to change the alignment of the image inside the container.
3. Click on the up/down arrows, located in the Padding setting to set the Padding value. Alternatively, you can type in the exact Padding number of your choice in the available field.
4. Click on the Image Width field, located within the image settings, and use the up/down arrows to specify the width of your image.
The maximum possible value for image width is 2000.
5. Click on the Image Height field, located within the image settings, and use the up/down arrows to specify the height of your image.
The maximum possible value for image height is 2000.
6. Click on the Image Border Radius field and use the up/down arrows to specify the image border radius.
The maximum possible value for border radius is 2000.
7. Fill in the online address, in 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.
8. Click on the Alt Text field, located within the image settings, to type the text that you would like to appear in place of the image (in the event that the image cannot be displayed).
9. Click on the Image Picker button and browse for the image you want to upload on your computer.
A pop-up window appears, with various sections corresponding to the different image sources available to you.
C. Editing the image
1. Double-click on the Double-Click Here or drag and drop your image area to start browsing your computer or the other available sources for the image you wish to upload.
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.
2. Click and drag the designated bottom-right corner of your image to resize it.
3. Check the additional options now made available on the image settings, on the left side of the editor page.
The new options are there to help you make the image sit perfectly inside its container. These are:
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 container.
D. Cropping the image
1. Click on the Crop Box and then hover your mouse to define the area of the image you want to preserve.
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.
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.