Image widget options

Last updated: March 31, 2021 Written by: Avatar Teresa
share
Table of contents
share
Table of contents

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

Below you will find the video guide:

I. Basics of the image widget

1. On the left side of the editor, find the Image widget, then drag and drop it into the active area of your landing page.

2. After adding an image, a settings window will open. You can also enter the settings by double-clicking on the widget area. You have four tabs to choose from.

Gallery

Here you can add your images. Click on Upload images (1) or New folder (2). After uploading, the image will be displayed in the gallery. Save and close (3).

Unsplash free stock images

Unsplash is a platform with free, high-definition images. It's completely free to download, use, copy or modify the images. You can use the images for all of your projects, both commercial and non-commercial ones. You can browse Unsplash images and add them to your landing pages, popups, or lightboxes in our landing page builder.

You will find the Unsplash tab (1) on the left, or you can click on Browse Unsplash images (2) in the Gallery section. You can create a new folder (3) to sort your images. 

On click

Here you can set the action to be activated by clicking on the picture on your landing page.

1. None no action;
2. Link redirect to any link;
3. Section link the page will scroll smoothly to the selected section;
4. Image gallery the image will be displayed as a gallery. You can find out more here.

Settings

Here you can give a title to the image and place an alternative text visible when the image cannot be loaded.

3. You can change the image size by dragging the frame points to the desired size. Thanks to this, you can keep the proportions of the image.

4. Click on the widget. You will see its context menu (1) and activate the side panel on the right side of the editor (2). You can copy and paste items from the main page (individually and in groups) using the Copy (Ctrl+C) and Paste (Ctrl+V) key combination. 

Use the context menu (1) to change, duplicate, and delete the image or change the layer.

II. Image widget toolbar

The image widget toolbar gives you the following options:

1. Resize and position the image.
2. Go to the gallery and settings.
3. Copy the widget's ID (it may be useful for some additional scripts) or add a class.
4. Hide the widget in one of the views; more here. Images are visible by default on both desktop and mobile views.
5. Select actions after clicking on the image.

In the next part of the pane, you will find tabs with some additional options. You can turn each of them on or off using the slider located in the top right-hand corner of each tab.

1. Border – adjust the parameters of the frame — thickness, line style, and color.
2. Rounded corners – set specific values to round corners. The value can be the same for all corners or different for each.
3. Shadow – set values for the shadow of the image.

III. Image optimization, recommended sizes and formats

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

To make the landing page editing using graphic files run smoothly, it is worth to remember 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 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.
share

Was this manual helpful?