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

# 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. **Layout Settings**
   * **Enable Full Width (`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.
     * **Default**: `true`
   * **Show Shadow (`show_shadow`)**
     * **Purpose**: Display a shadow effect around the banner when it's not full width.
     * **Default**: `true`
     * **Visibility**: Only visible if "Enable Full Width" is unchecked.
2. **Image Settings**
   * **Image (`image`)**: Upload or select the image to be displayed in the banner. Recommended image size for optimal display.
   * **Image Overlay Opacity (`image_overlay_opacity`)**: Adjust the opacity to add a transparent overlay on the image, enhancing text readability.
     * **Default**: `10%`
   * **Image Height (`image_height`)**: Choose the height of the banner image.
     * **Options**: `Adapt to image`, `Small`, `Medium`, `Large`
     * **Default**: `Medium`
   * **Adapt to Transparent Header (`enable_adapter_transparent_header`)**: Enable this option to add top padding for transparent headers to prevent content overlap.
     * **Default**: `false`
3. **Content Settings**
   * **Color Scheme (`color_scheme`)**: Choose the color scheme for the banner content to ensure it matches the background image and overall page design.
     * **Default**: `Background 1`
   * **Position (`desktop_content_position`)**: Set the alignment of the content within the banner.
     * **Options**: `Top left`, `Top center`, `Top right`, `Middle left`, `Middle center`, `Middle right`, `Bottom left`, `Bottom center`, `Bottom right`
     * **Default**: `Bottom right`
   * **Content Width (`content_width`)**: Control the maximum width of the content area within the banner.
     * **Options**: `Narrow`, `Normal`, `Wide`
     * **Default**: `Normal`
   * **Show Content Box (`show_text_box`)**: Check this option to display a content box on the image, containing text or other content.
     * **Default**: `true`
   * **Content Box Opacity (`text_box_opacity`)**: Adjust the opacity of the content box to ensure adequate contrast between the text and background.
     * **Default**: `100%`
     * **Visibility**: Only visible if "Show Content Box" is checked.
   * **Enable Blur Effect (`enabled_blur_effect`)**: Add a blurred background to the content box to highlight the text.
     * **Default**: `false`
     * **Visibility**: Only visible if "Show Content Box" is checked.
   * **Text Alignment (`desktop_content_alignment`)**: Set the alignment of the text within the content box (left, center, or right).
     * **Default**: `Center`
4. **Animation Settings**
   * **Image Behavior (`image_behavior`)**: Select the animation effect for the image.
     * **Options**: `None`, `Ambient movement`, `Fixed background position`, `Zoom on scroll`, `Parallax scrolling`
     * **Default**: `None`
5. **Mobile Settings**
   * **Mobile Cover Image (`image_mobile`)**: Upload or select a cover image for display on mobile devices, ensuring the best visual effect across different screen sizes. Recommended image size for optimal display on mobile.
   * **Mobile Content Position (`mobile_content_position`)**: Set the alignment of the content within the banner on mobile devices.
     * **Options**: `Top center`, `Middle center`, `Bottom center`
     * **Default**: `Middle center`
   * **Mobile Content Alignment (`mobile_content_alignment`)**: Set the alignment of the text within the content box on mobile devices.
     * **Default**: `Center`
6. **SEO Optimization**
   * **Primary Above-the-Fold Area (`if_as_main_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.
     * **Default**: `false`
7. **Margin Settings**
   * **Margin Top (`margin_top`)**: Adjust the top margin of the section.
     * **Default**: `0px`
   * **Margin Bottom (`margin_bottom`)**: Adjust the bottom margin of the section.
     * **Default**: `80px`

### 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. **Caption (`caption`)**
   * **Purpose**: Adds a small title to highlight secondary information or complement the main title.
   * **Limit**: 1
   * **Settings**:
     * **Caption (`caption`)**: Text content for the caption.
       * **Default**: `Add a Caption`
2. **Heading (`heading`)**
   * **Purpose**: Adds a primary title to prominently display important information.
   * **Limit**: 1
   * **Settings**:
     * **Heading (`heading`)**: Rich text content for the heading.
       * **Default**: `<p>Image banner</p>`
     * **Heading Size (`heading_size`)**: Choose the size of the heading.
       * **Options**: `Small`, `Medium`, `Large`
       * **Default**: `Small`
     * **Heading Decorative (`heading_decorative`)**: Enable decorative styling for the heading.
       * **Default**: `false`
     * **Enable Italic Gradient (`enable_italic_gradient`)**: Apply a gradient effect to italicized text within the heading.
       * **Default**: `false`
     * **Italic Gradient (`italic_gradient`)**: Select the gradient color for italicized text.
       * **Default**: `linear-gradient(90deg, rgba(40, 184, 242, 1) 1%, rgba(159, 30, 236, 1) 53%, rgba(225, 15, 239, 1) 100%, rgba(255, 255, 255, 0.55) 100%)`
       * **Visibility**: Only visible if "Enable Italic Gradient" is checked.
3. **Image (`image`)**
   * **Purpose**: Add an image within the banner content area.
   * **Settings**:
     * **Image (`image`)**: Upload or select an image.
     * **Image Width (`image_width`)**: Set the width of the image.
       * **Range**: `100px` to `500px`
       * **Default**: `300px`
4. **Description (`description`)**
   * **Purpose**: Add a text description to provide detailed information about the banner or offer additional content.
   * **Limit**: 3
   * **Settings**:
     * **Text (`text`)**: Rich text content for the description.
       * **Default**: `<p>Placeholder description for image banner</p>`
5. **Button (`button`)**
   * **Purpose**: Add interactive buttons to guide users to take specific actions. This block supports up to two buttons.
   * **Limit**: 1
   * **Settings**:
     * **Primary Button Header**
     * **Button Label (`button_label`)**: Text for the primary button.
       * **Default**: `Button label`
     * **Button Link (`button_link`)**: URL for the primary button.
     * **Button Style (`button_style`)**: Style of the primary button.
       * **Options**: `Primary`, `Secondary`
       * **Default**: `Primary`
     * **Button Arrow (`button_arrow`)**: Show an arrow icon on the primary button.
       * **Default**: `false`
     * **Secondary Button Header**
     * **Secondary Button Label (`secondary_button_label`)**: Text for the secondary button.
       * **Default**: `Button label`
     * **Secondary Button Link (`secondary_button_link`)**: URL for the secondary button.
     * **Secondary Button Style (`secondary_button_style`)**: Style of the secondary button.
       * **Options**: `Primary`, `Secondary`
       * **Default**: `Secondary`
     * **Secondary Button Arrow (`secondary_button_arrow`)**: Show an arrow icon on the secondary button.
       * **Default**: `false`

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