Image

Add the following block to use an image in the popup.

In the "Image" selector, press "Select" to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).

Use the "Height" options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:

• "Adapt to image". Displays an image/video in its original aspect ratio.

• "Proportion of height". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 0% to 200%.

"Proportion of height" indicators:

* 100% = Square image

* Less than 100% = Landscape

* More than 100% = Portrait

* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

To use an image as a background, activate the "Set as background" option.

The example of the background image for the pop-up can be viewed on the DEMO.

Media overlay

Turn on the "Enable" option to display the related settings.

Adjust the transparency of an image color overlay using the "Opacity" scale, which ranges from 0 to 100%.

In the "Type" picker, select one of the options: "Background" or "Gradient".

By selecting the "Background" option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.

Press the "Gradient" option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option here.

In the following example, you can view how the block might be displayed in the section: