Featured promotions
The "Featured promotions" section was built to display the banner blocks with promotion texts for each block.
Last updated
The "Featured promotions" section was built to display the banner blocks with promotion texts for each block.
Last updated
Tip: This section can be edited by blocks: "", "", and "". 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.
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.
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
Desktop hover animation
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.
In the following examples, you can view how the section might be displayed on desktop and mobile:
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 .
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 .
You can read more about the described options on the following .
