Simple Image Widget

How to add a Simple Image widget?

1. Click on the plus button at the left top corner.
2. Select the Simple Image widget from the Basic section.

There are several ways you can add a desired image:

1. Drag and drop your image onto the drop field at the top right corner or directly onto the page section.

2. Upload from your device by hovering over the drop field and selecting the 'Browse device' option.
3. Import from your Project library by hovering over the drop field and selecting the 'Browse project library' option.
4. Paste the image URL into the input field located below the drop field.
5. Select the desired image directly from the Assets tab on the left side of the screen.

6. Select an image from another project's assets.
7. Add an image from Unsplash.

How to adjust the Simple Image widget?

1. Locate the Simple Image button with the gear icon in the properties panel on the right side. Click on it.

You can find all the available settings for the Simple Image here.

Blend Modes

Click on the button with six dots at the right top corner to switch the Blend Mode.

Image Crop

1. Click on the button with the frame icon at the right top corner to enable the image Crop mode.

You can adjust the image crop here.

Here you can choose the image crop modes:

Original — crops your image to its original properties.

Cover — allows you to crop your image in ‌an arbitrary way.

Contain — displays the full image.

Square — crops your image to a square shape.

The 'Magnify' slider allows you to scale up the Simple Image widget from the anchor point located in the center of the crop frame.

The 'Reset area' button turns the Simple Image back to the condition before changes.

You can also crop the image by dragging the handlers highlighted on the image below.

Focal point

The focal point allows you to determine the viewpoint for the cropped image.

There are 2 ways how you can adjust the focal point position:

1. By dragging the blue circle directly on the image preview field in the settings menu.
2. By entering the X and Y values into the fields located directly below the image preview field.

Download

You can download your image by clicking the 'Download' button below the image preview field.

Remove

You can remove your image by clicking the 'Remove' button below the image preview field.

After removing the image, you'll be able to upload or select another image for this widget. The new image will be automatically fitted to the existing borders based on its width.

Image URL

You can also change the image by replacing the existing URL with the URL of another image.

Image Title

Here you can enter the title for the image.

CSS Object Fit

1. fill : The replaced element is sized to fill the container, potentially stretching its aspect ratio.
2. cover : The replaced element is sized to maintain its aspect ratio while filling the container's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
3. contain : The replaced element is sized to maintain its aspect ratio while fitting within the container's content box, possibly leaving some of the container's content box unoccupied.
4. scale-down : The replaced element is sized to maintain its aspect ratio while fitting within the container's content box, but only if it is smaller than the contain value. Otherwise, it behaves like none .
5. none : The replaced content is not resized to fit the container. The object's content will overflow the container if necessary.