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 chosen, 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
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
Color scheme 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.

Animations


Setting Description
Image behavior 

Choose how the image behaves:

  • None
  • Ambient movement: This creates a subtle, slow movement effect, making the image appear dynamic.
  • Zoom in on scroll: Gradually zooms in on the image as the user scrolls.

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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us