Images are among the most essential elements of your landing pages. For that reason at Landerlab, we have made it straightforward and easy to work with images.
Follow the instructions below to know more about adding, removing or altering images.
How to Add an Image
Follow the below steps to add a new image to your landing page.
- Open your landing page in the visual editor.
- When inside of the visual editor, hover on the left side pannel of your screen and click on Images.
- When inside the images dialog, you can choose between your account image gallery or Unsplash gallery.
- Drag and drop the image that you like to have on your landing page and position it in the desired area.
How to Delete an Image
If there is a specific image on your landing page that you are not pleased with, deleting it is pretty straightforward. Just select the image that you would like to delete from your landing page and click the Delete button found on the quick toolbar that appears around the selected element.
Alternatively, you can select the desired element, and press the delete button on your computer keyboard.
Deleting an image from your landing page does not remove it from your image gallery. To definitely remove an image from your gallery you need to open your image gallery and delete the image from there.
How to Resize an Image
Landerlab provides a similar experience to all major text or image editors when it comes to resizing your images.
All you need to do is simply select the image that you want to resize, then scale it down or up using the resize handles surrounding the image.
How to Position an Image
After adding and resizing your images, positioning is the next important step to make sure your landing page looks good.
Here’s what you need to do to properly position your images on your landing page.
- Position your image in the right area of your landing page.
- Select the image then go to Margin settings under Component Settings on the right panel of the visual editor.
- Adjust the top, bottom, left and right margin settings in order to achieve the desired position of your image.
Make sure to adjust the image position in a way that doesn’t affect the other components present in the same block.
Another alternative way to position your image is to play around with the spacing settings similar to what you see in the above example.