How can we help you?
Image widget options
In this guide, 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:
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.
There are four tabs in image settings. Remember to save the changes you make.
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.
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.
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.
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.
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).
You can change the size of the image by clicking on the dots on the frame (1). The remaining icons let you change its position (2), enter the settings and change the image (3), duplicate it (4), move it to the top/bottom (5), and delete the image (6).
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 width is 1920 px (remember that the most important background elements should be placed within 1200 px 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.
Learn more about best practices on landing page images.