Image Tool

To add an image select the Image tool from the toolbar, or press I, then click anywhere in the page or canvas.

There are several options and properties in the Inspector panel. This includes options for: positioning, changing the width and height, stretching, setting opacity, adjusting rotation and corner radius, choosing the image, applying the fill, border, adding a drop shadow or perform a click-to action.

1. Width and height
2. Stretch to Width
3. Opacity
4. Rotation, corner radius
5. Image
6. Fill
7. Border
8. Drop Shadow

Learn more about how to use image properties below.

Width and height

Those properties allow changing the size of the image, once hovering on the letter W (width) or H (height) should appear a left-right arrow which allows dragging to the desired size, just click and drag, and release after the perfect size was reached.

Alternatively pressing on the number close to W or H letters will allow entering the desired size in px (pixel).

Once the lock icon is pressed it will change to a locked one, this means that when the image property will change the size it will change proportionally.

Stretch to Width

Clicking this property will set the image to 100% which is equal to the width of the browser window.

Opacity

Once dragging or typing another value, image transparency will change accordingly, it could be from 0 to 100.

Rotation, corner radius

Once hovering on the angle icon should appear a left-right arrow that allows dragging to the desired radius, just click and drag, and release after the ideal angle was reached.

Right drag - the image will rotate in the right (positive value) direction, left drag - it will rotate to the left (negative value).

Alternatively pressing on the number will allow typing the exact degree amount.

The corner radius works in the same way as the angle, but once the action performs it will change the radius.

It could be combined with rotation.

• Top right corner
• 
Bottom right corner
• 
Bottom left corner
• 
Top left corner

Image

Clicking this property will allow choosing the image, it could be an image from your device or any photo from Unsplash.

Or just drag and drop

Choose any photo from the larger free-to-use photo stock

Fill

Clicking this property will allow choosing the fill of the image, which usually is used for fading the picture.

By default, it will be assigned the white color (#ffffff) with 50% of opacity.

Border

Clicking this property will enable the border inside the image, default it will be 1px width, solid with the black color with 50% of opacity.

It could be adjusted to any dimension and/or transparency

Border style could be changed from solid to dash or dots by clicking on the border type title.

Drop Shadow

This property is usually used for giving the impression that the object is raised above the objects behind it.

Just press on the plus icon to add it.

By default, it will be assigned a black color (#000000) with 25% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.

Drop Shadow could be hidden or unhidden, just pressing on the eye icon, also it could be totally removed by pressing on the minus icon

Drop Shadow property could be adjusted to your needs, just click on the icon close to the first number in the row and the additional panel will appear immediately.

Play around with all the options, once happy just click anywhere on the canvas or proceed straight to any other property or element.