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.