Image widget options

Last updated: October 19, 2020 Written by: Avatar Teresa
Table of contents
Table of contents

In this manual, you will find an overview of the image widget in the editor.

If you like watching video tutorials, check our latest one down below:

I. Basics ways to add and work with the image widget:

1. To add an image, drag it from the left side to the right and drop in the chosen place.


2. In the editor you will see the empty space without an image, choose Change or double-click on an empty picture.


3. You will see the image gallery (for the new users it might be empty). To upload an image, click Upload images. You can also group images in folders. To do so, choose New folder. Once you upload your image it will be immediately visible in the image gallery.


4. To add an image into the empty frame in the editor, click on it and choose the image from the gallery. The click Save and close.


5. You can change the dimension of the image by dragging the frame points on the selected size. Using this way will let you to save all the picture’s proportions.


6. To copy the image, use standard keyboard shortcuts or click Duplicate in the upper widget’s bar.


7. You can group the images keeping the CTRL/CMD key and clicking on pictures. They will be surrounded by the blue frame without hooks. Images that are grouped in this way you can copy or relocate as you like.


II. Image options panel

After clicking on the chosen image, on the right side you will see the options panel. There you can: change the image name (1), its width and height as well as location to the nearest pixel (2), visibility on the chosen view (3), assign an On click action (4) to it, make the basic edition of its appearance, e.g. by adding a frame (5) or download the image ID and give it a class (6), which is often needed to use it in an external script.


III. Advanced image functions

After entering the image settings (Change tab) you will be able to: in the Gallery tab (1): uploading, grouping and and selecting the images that should display on the landing page or popup, in the Free Images (2): use our free images, in the On click (3) tab: set up the On click action for the image link, to redirect the image on the selected URL address, redirect the image to the selected section on your landing page and assign the image to the image gallery. In the Settings section you can add title and the alternative text.


IV. Image optimization, recommended sizes and formats:

Each image is automatically optimized while publishing your landing page so it will load quickly.

To make the landing page editing using graphic files run smoothly, it is worth to remember about their properties:

  • graphics as background of the landing page: recommended size is about 1200x1400px (remember that the most important background elements should be placed with 1200px width).
  • graphic files (image widgets): 1:1 size (the same one as it should be displayed on the screen).
  • format: for the pictures there are .jpg and .png, the icons can be added in .svg format.

Was this manual helpful?