> For the complete documentation index, see [llms.txt](https://nestable-studio.gitbook.io/test/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nestable-studio.gitbook.io/test/theme-sections/image-banner.md).

# 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**<br>

* **Heading**: Set a main title to attract users' attention.
* **Heading size**: Set the size of the heading (Small, Medium, Large, Extra Large, Maximum).

\
**Text**<br>

* **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.