Image Banner

The Image Banner module is used to add full-width banner images to your website. It supports uploading two images: when only one image is uploaded, it is displayed in full width; when two images are uploaded, they are displayed side by side.

(I) Image Banner

  • Image 1: Upload or change the image. It is recommended to use high-resolution images.

  • Image 2: Upload or change the image. It is recommended to use high-resolution images.

  • Overlay opacity: Manually drag the slider to adjust the opacity, with values ranging from 0% to 100%.

  • Height: Set the image height, with four modes available: Adapt to First Image, Small, Medium, Large.

  • Animation: There are four modes available: No Animation, Ambient Movement, Fixed Background Position, Zoom on Scroll.

(II) Content

  • Position: There are 9 display positions available: Top Left, Top Center, Top Right, Middle Left, Middle Center, Middle Right, Bottom Left, Bottom Center, Bottom Right.

  • Alignment: There are three text alignment options: Left-aligned, Center-aligned, Right-aligned.

  • Container: Enable this option to add a background to the content area.

  • Color scheme: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

Mobile Layout

  • Stack images: Enable this option to display the two images in a vertical layout on mobile devices.

  • Alignment: There are three text alignment options: Left-aligned, Center-aligned, Right-aligned.

  • Container: Enable this option to add a background to the content area.

Heading

  • Heading: Set a main title to attract users' attention.

  • Heading size: Set the size of the heading (Small, Medium, Large, Extra Large, Maximum).

Text

  • Text: Add descriptive text to further explain relevant information.

  • Style: There are two styles available: Body, Subheading.

Buttons

  • Label: Enter the button name; the button will be automatically hidden if left blank.

  • Link: Select the location the button jumps to; the button will be in a grayed-out state if left blank.

  • Outline style: Enable this option to change the button style accordingly.

Last updated