Collage of images
This section enables to set an image gallery column with the descriptive text.
Section link
To redirect visitors to the pre-selected page by pressing the image gallery in the section, paste the external links to the field, or use the "Link" source selector to add an internal link.
Content
Tip: To display the Media column in the entire screen width, remove the heading, description, and labels of the buttons. Then apply settings in the "Image" block using the "Side position" scale.
Note! By adding the section, you get a ready-made layout of the Media column. Use settings from the section and blocks to customize the image appearance according to your preferences.
In the "Media position", set whether to display the media column on the left or right on the desktop. The desired "Left" or "Right" options can be used in the picker.
Decide the size of the image gallery on the "Media column height" scale from 50% to 150%, where 100% is a square image, less than 100% is a landscape, and more than 100% is a portrait.
Disable image cropping
By default, the image zooming effect is enabled on the desktop view when hovering over an image.
If the option is disabled, the scaled effect will be visible inside the image container. When activated, the whole image container will be scaled.
Heading
Use the "Heading" placeholder to add a section title. It will be placed on the opposite side of the Media column. Start typing text in the field to view the additional settings:
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.
If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Description
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.
The color of the description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Button/Second button
Use the settings described below to add or edit buttons that will be displayed under the description.
Change the internal button text in the "Label" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can fit your store design: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Section layout
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden when you select the "None" option.
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Animations
Hover animation
If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the "Inherit global settings" option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image" desktop hover animation drop-down. Read the details on the following help page.
The "Zoom in" and "Zoom out" options create a zoom effect when the mouse hovers over, either enlarging or decreasing the image. The option "None" deactivates the animation.
You can read more about the described options on the following help page.
In the following examples, you can view how the section might display on desktop and mobile:
Last updated