1. Working with images - basics
- To add an image, drag the 'Image' widget and drop it to the editor area.
- An empty box without an image will appear in the editor. To add a picture in the empty box, select the pencil icon placed on a blue ribbon above or double-click it a widget.
- An image gallery window will open (new users' gallery will be empty). To upload images to the gallery from your computer, click the cloud icon. After uploading, the image will appear in the gallery. To add a selected image in the empty image box, you must double-click it or click once, and then choose "Save and close" in the upper right corner of the window.
- The image size can be changed by holding down one of the attachment points. Using the corner hitch points for this purpose will help you to keep proportions.
- To copy an image, hold Ctrl + c/Cmd + c and Ctrl + v/Cmd + v or click on the "Duplicate" button, located on the top bar of the editor.
- Pictures can be grouped by holding the left Ctrl or Command and clicking on them. When you group, pictures are surrounded by a blue frame without corner hitch points. Grouped images can be copied and moved.
2. Image Options Panel
After selecting an image, the options panel will appear on the right hand.
In this panel, you can change the name of the image (1), change its width and height and location to an accuracy of 1 px (2), you can get an image ID or create a class (for external codes) (3), you can making the image visible on the selected view (4) or working on its appearance (5).
3. Advanced image options
- After entrance settings you can see few tabs like:
- default gallery,
- and free images (where you have a bank of free pictures to use 😊).
2. The tab 'On click' in the image settings allows you to set on click action for the picture.
- Link - picture redirects to the link (URL required).
- Section link - picture redirects to the selected section on the landing page.
- Lightbox - assign an image to the lightbox gallery (find more about this in Lightbox gallery article).
3. Also, you can add a title of the image and the alternative text (it will appear if the image can not be loaded in the browser).
4. Image optimization, recommended size and format
It is very important to adjust graphic elements to display landing page more effective for users.
You can optimize your images uploaded into a landing page. In this case, we recommend you to switch on the "Optimize images" feature from the "Labs".
If you switch this option, bear in mind the re-publish a landing page to achieve all images optimized!
A specification of such files is here:
- graphics as landing page background - recommended size is about 1200x1400px (remember that the most important background elements should in the proposed width 1200px),
- image files = image widgets - 1: 1 size to be displayed finally,
- format - .jpg / .png; Widget icons can appear in .svg format.