Image banner settings

Setting	Description
First image	Choose the first image for your banner. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it. Note: If add only one image, it will be on the whole width of the section. If add two images, the images will be aligned vertically and placed next to each other.
Second image	Choose the second image for your banner. Select the second image for your banner and follow the same steps as described for the first image.
Image overlay opacity	The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes.
Banner height	Choose banner height from dropdown list: Adapt to first image Small Medium Large For best results, use an image with a 3:2 aspect ratio. Learn more
Color scheme	Select a color scheme from the list and customize it with appropriate colors for text, headings, buttons, and background. Applying a color scheme to the image banner section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes.
Layout	Full width: Displays the image banner across the entire width of the page. Grid: The image is in the same container width as other sections.
Desktop content position	Select the vertical alignment of the content: Top: Aligned with the top of the image (left, center, right). Middle: Centered within the height of the image (left, center, right). Bottom: Aligned with the bottom of the image (left, center, right).
Show container on desktop	Show the container to display text with a colored background on desktop. This will apply to the heading, description, and button text.
Desktop content alignment	You have three alignment options to align content horizontally on desktop: Left Right Center

Animations

Setting

Description

Image behavior

Choose an animation for your image:

None (default): The image remains static without any animation.
Ambient Movement: The image slowly moves within its container.
Fixed Background Position: As customers scroll, the foreground elements (e.g., text and buttons) move normally, while the background image remains stationary, creating a parallax effect.
Zoom In on Scroll: When a customer scrolls the page, the foreground elements, such as text and buttons, move at the same speed, while the background stays fixed and the image zooms in. To activate this option, check if “Reveal sections on scroll” is enabled in animations tab of theme settings.

Mobile layout

Setting	Description
Mobile content alignment	Choose the horizontal alignment of the content on mobile: Left Center Right
Stack images on mobile	If you enable this option and disable “Show Container on Mobile” the layout on mobile devices will display the first image, followed by text on the first image, and then the second image. However, if you enable “Stack Images on Mobile” and also enable “Show Container on Mobile” the layout will show the first image, followed by text within a container, and then the second image. If you disable “Stack images on mobile” the images will be displayed in a single column, aligned vertically, and placed next to each other.
Show container on mobile	Enabling this option will display text within a container after the image on mobile screens. Disabling it will place the text directly on top of the image on mobile screens.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.