Featured promotions
The "Featured promotions" section was built to display the banner blocks with promotion texts for each block.
Tip: This section can be edited by blocks: "Content, Text on image", "Content, Text below the image", and "Content, Button on image". Each block can be added individually and customized in different ways.
Heading
Paste the section's title into the "Heading" field. 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.
Content
The number of blocks in a row can be set in the "Images in row". Choose whether to display 2, 3, 4, or 6 blocks in each row. If you use different content blocks ("Content, Text on image", "Content, Text below the image", and "Content, Button on image") to display in the section, use the option "Auto" to adapt the number of blocks in a row according to the size of the banners.
Use the "Vertical spacing" to set the "Small" or "Medium" gap between the heading and banner images.
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.
Width
Choose the section width in the drop-down. It can be changed to "Standard" or "Fixed". If you applied the "Fixed" option, control the parameters on the "Fixed width" slider from 900 px to 2000 px. Read about the described options on the following help page.
Section layout
The layout settings change the look and feel of the section.
To change the position of the title, choose one of the "Heading on top" or "Heading top center" options in the "Layout" drop-down.
Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use 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.
Animation
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. You can activate opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Background" or "Gradient" in the blocks. To use this option, ensure that the "Opacity" is set to transparent. The overlay opacity and zooming effect on an image can be achieved by selecting the "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". 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 be displayed on desktop and mobile:
Last updated