Banner

Showcase key highlights with customizable backgrounds, media, and calls-to-action — optimized for clarity, impact, and responsiveness across all devices.

Last updated 4 months ago

Overview

The Banner section is a dynamic, high-impact area designed to capture attention and drive action. Use it to promote announcements, sales, or brand highlights with layered media, flexible aspect ratios, and responsive controls that look great on any device. Every setting is built to help you communicate clearly and convert visitors effectively.

⚠️ Important: Combine strong visuals, compelling text, and optimized layouts to make your Banner section both engaging and conversion-focused.

Banner layout and aspect ratio

These settings define your banner’s proportions and media display, helping you create a consistent, polished experience across all devices. Adjust ratios and layout to ensure your message stands out and drives engagement, whether viewed on desktop or mobile.

  1. Select the aspect ratio for desktop:

    1. Default (default) — default

    2. Landscape

    3. Portrait

    4. Square

    5. Ultrawide

    6. Widescreen

  2. Select the aspect ratio for mobile:

    1. Default (default) — default

    2. Landscape

    3. Portrait

    4. Square

    5. Ultrawide

    6. Widescreen

Banner background

Background settings give your Banner visual depth and richness. You can use images or video as your foundation, with separate options for desktop or mobile. This ensures both visual quality and page speed are optimized for all users.

  1. Choose how the background fits:

    1. Contain

    2. Cover (default)

    3. Default

      1. Contain displays the entire image, while Cover fills the space, cropping if needed.

  2. Upload a background image for desktop for sharp, high-impact visuals.

  3. Upload a separate background image for mobile to further optimize for speed and clarity.

  4. Add a background video for desktop to create dynamic movement.

  5. Add a background video for mobile for additional responsiveness and performance.

📝 Note: Using device-specific media helps deliver the best experience for every visitor and keeps your site quick and visually engaging.

Foreground content

Foreground content tools help you create well-aligned, impactful text, icons, and call-to-actions over your Banner backgrounds. These options are central to making your message readable, actionable, and visually engaging.

  1. Set the horizontal alignment:

    1. Left

    2. Center

    3. Right

  2. Set the vertical alignment:

    1. Top

    2. Center

    3. Bottom (default)

  3. Add an icon for a visual accent above your text content.

  4. Add a caption for brief supporting messaging or promo details.

  5. Enter your main heading text (default: Banner).

  6. Choose heading size

    • Extra small

    • Small

    • Medium

    • Large

    • Extra large

    • Jumbo

  7. Choose a heading type for size and hierarchy:

    1. Paragraph

    2. H1

    3. H2 (default)

    4. H3

    5. H4

    6. H5

    7. H6

  8. Add a subheading for additional supporting information.

  9. Display an icon within your button to draw more attention.

  10. Enter button text for your main call to action.

  11. Add a link for the button destination.

  12. Enable "open link in a new tab" if you want users taken to a new window (default: disabled).

  13. Choose your button style to match visibility needs:

    1. Primary

    2. Secondary

    3. Extra large

    4. Plain

    5. Small

    6. Small secondary

    7. Circle

  14. Choose your button layout:

    1. Icon left

    2. Icon right

    3. Icon only

  15. Set link style for the Banner:

    1. Button

    2. Full block

    3. Full block with button

💡 Tip: Use concise headings, focused subheadings, and a single call-to-action for clarity. Ensure strong color contrast for readability and user engagement.

Foreground media

Foreground media provides an extra layer for visual storytelling within your Banner. Use this to add brand marks, hero products, or decorative elements above your main background.

  1. Upload a foreground image to display on top of your background.

  2. Select the image style for your foreground image:

    1. Default

    2. Rounded corners

    3. Circle

  3. Set the maximum width for the foreground image (0 to 1600px in 16px increments; default: 160px).

  4. Add a link to make the foreground image clickable for users.

Supported block types

Banner is fully managed through its settings and does not support additional blocks. All imagery, text, and layout decisions take place within this section's options.

Usage notes

  1. Always use images and videos optimized for each device to maximize speed and display clarity.

  2. Choose foreground and background color combinations that ensure headings and buttons are easy to read.

  3. Preview your Banner on multiple devices to check alignment, text contrast, and button interactivity.

  4. Apply gradients or overlays as needed to increase contrast and highlight key content.

  5. Keep each banner focused on a single call to action for the best user clarity and performance.

  6. Compress images and videos for quick loading and to maintain user engagement.

⚠️ Important: The Banner section combines display versatility with powerful messaging. Adjust its settings thoughtfully to balance aesthetics, performance, and accessibility so your banners always stand out and contribute to your goals.