Image

Add the block to show images in the Media column of the section.

Tip: To add a block, the "Collage of images" section is required. Press "Add block" and choose the one in Theme Blocks. The following block can be added several times.

Drag images into different positions to indicate which image should overlay the other ones in the section.

Image

In the "Image" picker, press the "Select" button to upload the necessary image for both desktop and mobile.

Use the "Height" options to adapt a media to the desired size. Several available options can be selected from the drop-down. If an option includes additional settings, they will appear underneath the drop-down after selecting an option:

• "Adapt to image". Displays an image 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 50% to 150%*.

*The "Proportion of height" option is applied to mobile by default.

Note! Specify the image size on mobile in the "Mobile settings".

"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.

Note! The following settings can be applied to the desktop view only:

In the "Width" scale, set the image width. It can be changed from 0% to 100%.

The "Top position" scale controls the required image appearance on the top or bottom of the Media column. Set the point to 0 % to place an image at the very top and 100% at the bottom of the column.

Assign an image to the left or right side of the screen using the "Side position" scale, where 0% means an image appears on the left and 100% shows it on the right.

The examples of the described settings can be viewed below:

Animations

Change the position of images from different views of sight when scrolling up or down using the "Parallax effect" scale. The parameters can be changed from -100 to 100, which specifies how pronounced the effect will be for a particular image. Set the point to -X to make the sticked effect when scrolling up or down the page. If you indicate the point to X, the parallax effect will appear in the opposite direction of motion, so by scrolling down, the image will slide up and vice versa. Use 0 to deactivate the parallax.

Mobile settings

Settings from this block can be used to manage content in the Media column.

The "Width" picker determines whether to display an image at the full screen width (100%) or set two items in a row (50%).

In the "Order" scale, determine the image position on mobile. The block allows reordering the image sequence from 1 to 10.

Use the "Fixed aspect ratio" scale if you set the corresponding option in the "Height" picker above. The image height can be adjusted from 50% to 150%, where 100% renders as a square image, less than 100% is a landscape, and more than 100% is a portrait.

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