In this manual, you will learn the basics of the image widget in the editor: how to adjust image look, size, position, set redirections, or on-click actions.

Watch our video tutorial:

Add image

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

After adding an image, a settings window will open automatically. You can also enter the settings by double-clicking on the widget area.

Image settings

There are four tabs in image settings. Remember to save the changes you make.

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).

1. Add your images. Click on Upload images or New folder. After uploading, the image will be displayed in the gallery.

2. To add an image to your landing page, double-click on a selected image or click once and Save and close.

Unsplash

Click Browse Unsplash images or enter the Unsplash tab.

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, pop-ups, or lightboxes in our landing page builder.

Learn more about Unsplash free images gallery here.

On click

Set the action to be activated by clicking on the picture on your landing page.

None – no action.
Link – redirect to any link.
Section link – the page will scroll smoothly to the selected section.
Image gallery – the image will be displayed as a gallery.

Settings

Give a title to the image and place an alternative text visible when the image cannot be loaded. It is recommended when you want to better your SEO.

Edit image

Click on the widget to start editing. You will see its context menu (1) and a toolbar on the right side of the editor (2).

  1. 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.

Widget toolbar

In the widget toolbar, you can change the image and go to its settings, turn on/off mobile or desktop view (by default, the image is visible in both views), and change the image size.

Underneath, you will find tabs with some additional options. You can turn them on or off using the slider located in the right-hand corner of each tab (except Click Action and Other tabs).

  • Click Action – select actions after clicking on the image: link to URL, scroll to section, show lightbox, image gallery.
  • Border – adjust the parameters of the frame: thickness, line style, and color.
  • Rounded corners – set specific values to round corners (the value can be the same for all corners or different for each).
  • Shadow – set values for the shadow of the image.
  • Other – adjust image position, copy the button ID or add a class.

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 remembering their properties:

Graphics as a background of landing pages: 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.

Was this article helpful to you?

admin

Comments are closed.