# Image banner

The image banner module is used to add a full-width or fixed-width banner image to your website. It can be used to display promotions, products, or brand information. This module offers a rich set of configuration options to help you customize the image display and content styles.

### Configuration Options

1. **Enable Full Width**

   **Purpose**: Decides whether the banner image will occupy the full width of the page. If unchecked, the image will be displayed according to its content width.
2. **Image Settings**
   * **Image**: Upload or select the image to be displayed in the banner.
   * **Image Overlay Opacity**: Adjust the opacity to add a transparent overlay on the image, enhancing text readability.
   * **Image Height**: Choose the height of the banner image. It can be set to auto, small, medium, or large to ensure the image proportions align with the overall design.
   * **Adapt to Transparent Header**: Enable this option to add top padding for transparent headers to prevent content overlap.
3. **Content Settings**
   * **Color Scheme**: Choose the color scheme for the banner content to ensure it matches the background image and overall page design.
   * **Position**: Set the alignment of the content within the banner (e.g., bottom-right).
4. **Other Settings**
   * **Show Content Box**: Check this option to display a content box on the image, containing text or other content.
   * **Content Box Opacity**: Adjust the opacity of the content box to ensure adequate contrast between the text and background.
   * **Enable Blur Effect**: Add a blurred background to the content box to highlight the text.
   * **Text Alignment**: Set the alignment of the text within the content box (left, center, or right).
5. **Animation Settings**

   **Image Behavior**: Select the animation effect for the image. Supported scroll effects include:

   * Environmental Movement
   * Fixed Background Position
   * Zoom on Scroll
   * Parallax Scrolling
6. **Mobile Settings**

   **Mobile Cover Image**: Upload or select a cover image for display on mobile devices, ensuring the best visual effect across different screen sizes.
7. **SEO Optimization**

   **Primary Above-the-Fold Area**: If set as the main above-the-fold area, optimization will be applied to improve SEO performance, making it easier for search engines to identify and index the page content.

### Addable Blocks

The image banner module supports adding various types of content blocks. You can select the appropriate block to enhance the banner display. The following block types are supported:

1. **Subtitle**
   * **Purpose**: Adds a small title to highlight secondary information or complement the main title.
2. **Title**
   * **Purpose**: Adds a primary title to prominently display important information.
   * **Settings**: The font size can be adjusted, and all-caps formatting is supported.
3. **Text**
   * **Purpose**: Add a text description to provide detailed information about the banner or offer additional content.
   * **Settings**: Supports rich text editing, with options for text style, color, and links.
4. **Button**
   * **Purpose**: Add an interactive button to guide users to take specific actions (e.g., “Learn More” or “Shop Now”).
   * **Settings**: Button text, link, and style (solid, border, floating) can be customized.

### Usage Tips

* **Full Width vs. Non-Full Width**: The decision to enable full width depends on the purpose of the banner image. Full-width effects are suitable for large visual displays meant to capture the user’s attention.
* **Image Overlay**: By adjusting the overlay opacity, you can balance the visibility of the background image and the readability of the foreground text, ensuring clear communication of information.
* **Animation Effects**: Moderately using animation can add dynamic elements to the page but should be used sparingly to avoid distracting the user experience.

### Common Issues

* **Image Not Displaying Fully**: Check the image height settings to ensure the image’s proportions fit the banner size.
* **Text Not Clear**: Try adjusting the content box opacity or enabling the blur effect to enhance contrast between the text and the background.
* **Mobile Display Issues**: In the mobile settings, select a suitable smaller image to ensure the best visual effect across different devices.

By configuring these settings, your image banner will have excellent visual appeal and maintain a consistent user experience across different devices.