Image Widget
Image is the basic type of content of any website. You can use it to make your site more attractive for a visitor.
Place the Image widget on the site page. When you click it, the settings will open on the left panel and on the panel above the widget. The following settings are available:
- Replace image: replace the image after adding the widget to the page
- Fill/Fit setting: resize the image while keeping its aspect ratio
- Caption: add a caption under/below the image
- Action on click: set the image a link to another page or site when clicked
- SEO settings: add the ALT and Title tags. ALT describes the content of the image and shows it to the visitor when the image won't load for some reason. Title displays text information about the image when you mouse over it
- Image Editor: contains additional settings that allow changing the image. You can find more info below
Image Editor
In the Image Editor, you can customize the image display options: add text in front of the image, apply ready-made effects, draw geometric shapes, and more. To open it, click on the “pencil” icon on the toolbar above:
The following settings are available:
Crop: crop images to a specific aspect ratio including both standard and custom variations.
Flip: flip the image horizontally or vertically.
Rotate: rotate the image clockwise or counterclockwise. There's also a slider for fine-tuning the rotation.
Draw: draw a line on the image. You can choose the line type (straight or free), as well as the line color and thickness
Shape: add shapes to the image, such as a square, a circle, and a triangle. You can also change stroke thickness and color of the shape, as well as the shape color.
Icon: add one of the suggested icons or upload your own over the image and change the icon color.
Text: set text over the image. You can also align text and change its font, size, and color.
Mask: add another image over the one you're wotking with.
Filter: apply ready-made effects such as sepia, blur, etc. You can also change the image brightness, darken the background, add any color to the image, and more.
In the toolbar above the image, the following settings are available:
- Zoom in the image
- Zoom out the image
- Move the image
- Zoom in the image
- History of actions - shows all actions performed with the image
- Undo the action
- Redo the action
- Delete the last added element
- Delete all added elements
On the left panel, you can set the image height in pixels instead of using a scrollbar and setting approximate size.
Plus, you can specify a custom class for the image to edit its styles using HTML code.
Note:
The feature of adding a custom class, as well as the HTML code installation, is only available to the Pro plan subscribers.
One more feature worth mentioning is the Fill/Fit Setting that allows you to resize the image while keeping its aspect ratio. If you select the Fit mode and start changing the image height, its width will also change according to the image aspect ratio:
In the Fill mode, the image height has no effect on its width, the picture automatically fills all the available space for its width:
