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.
Paste the section's title to the "Heading" field. The font size of the title can be changed to "Small", "Medium", or "Large" in the "Heading font size" drop-down.
If you need to set up the color of the title, use the "Heading color" picker. Here you can paste the hex code to the corresponding field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.
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.
If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".
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.
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 banners.
Use the "Desktop vertical spacing" to set the "Small" or "Medium" gap between the heading and banner images.
The "Height" setting allows you to decide if to use the default image size by choosing the "Adapt to image" option. Or select the option "Fixed aspect ratio" to change the image size using the "Fixed aspect ratio" scale. The parameters vary from 50% to 150%, where 50% is a square image, 100% - is a landscape, and 150% is a portrait.
Width
Choose the width of the section 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. To read more about the described options, view the following help page.
Mobile layout
Use the "Text alignment" drop-down to change the text position on mobile. The text can be displayed on the "Left", "Center", or "Right". The examples of the listed functionality, you can view in the following here.
Animation
Desktop 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 options "Zoom in" and "Zoom out" place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Image overlay background" or "Image overlay gradient" in the corresponding blocks. To use this option, make sure that the "Image overlay opacity" is set up to be transparent. The overlay opacity and zooming effect on an image can be achieved with an active "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
