1. Working with images - basics
- To add an image, drag the image element and drop it to the editor.
- 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 option ribbon above the empty box or double-click empty box.
- 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 in a gallery 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 and Ctrl + v or click on the "Duplicate" button, located on the top bar of the editor.
- Pictures can be grouped by holding the left Ctrl 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
1. After selecting an image, the image 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 assign 'On click' action to image (3) or make the basic edition of its appearance, eg. by adding frames (4),
3. Advanced options of images
1. The tab 'On click' in the image settings (find pencil icon above the image) allows you to set on click action for the picture. These settings can also be changed in image options panel (see above):
- 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).
2. In the gallery "Settings" tab 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).
3. Let's go back to the image options panel in editor (right-hand side).
You can click "Advanced" button. Previously hidden information about the image will appear. Now you can check a picture ID, assign a class to the image and switch in which views image will be visible (desktop, tablet computer, smartphone, all at once, none). To know more about mobile views, see the article Mobile views.
4. Recommended sizes and formats of graphic files
To edit the landing page smoothly using graphics, it is useful to customize the image files. 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.
5. Optimize images
To avoid problems with too long images loading or unnecessary huge page size, you may want to optimize your images.
For this purpose you may find a simple online solution for image compression, where you easily load and download the compressed image later.