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

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

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

PreviousNarrow banner image NextVideo banner

Last updated 7 days ago