Banner

Overview

The Banner Block is an adaptable feature for presenting important messages, promotions, or branding content in a bold and engaging way. Flexible background media options, smart layering, and a range of layout tools make the Banner Block effective both visually and interactively. With settings for aspect ratios, overlays, and responsive content alignment, you have control over how your message stands out across all devices.

📝 Note: The Banner Block can be extensively customized, making it an ideal choice for visual highlights and dynamic content across various areas of your site.

Available in sections

The Banner Block is available in these locations:

1. Collage

2. Slideshow

3. Multicolumn

4. Blog post

5. Page content

Aspect ratio

Aspect ratio settings allow you to define the overall shape and cropping of your block's background. This ensures consistency and impact, matching the visual balance of your layout.

Choose separate aspect ratios for desktop and mobile displays to guarantee an optimal look and feel across all screen sizes.

1. For desktop, options include default, landscape, portrait, square, ultrawide, and widescreen. The default selection lets the content adapt to standard layout proportions.

2. For mobile, set a mobile-specific aspect ratio or use default for automatic adjustment. This builds responsiveness without extra effort.

Info: Refining ratios helps maintain media clarity, avoids unwanted cropping, and gives you precise control over visual presentation on every device.

Banner background settings

Background controls are the foundation of the Banner Block's look. Use them to set the mood and energy of your feature area.

You can select static images or dynamic videos, each with separate desktop and mobile choices for optimized speed and clarity.

1. Choose how your background image fits: contain (keeps the full image visible), cover (default, fills the area but may crop the image), or default (uses the theme’s baseline setting).

2. Desktop image: Upload or select a high-quality image for large screens.

3. Mobile image: Supply a mobile-friendly image with improved clarity and speed.

4. Desktop video: Add motion to your banner using a background video for desktop.

5. Mobile video: Provide a video specifically optimized for mobile devices and their dimensions.

Info: Pairing separate mobile assets with desktop options ensures your block always looks sharp and loads quickly, no matter the device.

Foreground content

Configure your overlay: this is where you arrange the most important part—your banner's message, icon, and interactive elements.

Foreground content settings help with text order, icon placement, and button arrangement, making your content engaging and actionable.

1. Set horizontal alignment to place content left, center, or right.

2. Choose vertical alignment for top, center, or bottom layering. Bottom is the default and works well for banners over images or videos.

3. Add an icon above your heading for brand recognition or emphasis.

4. Use caption text to provide a quick context or promotional hook.

5. Configure the main heading as the focus, with Banner as the default content.

6. Pick a heading type from paragraph, h1, h2 (default), h3, h4, h5, or h6. Right sizing your heading improves both accessibility and presentation.

7. Add subheading text for expanded context right under the headline.

8. Include a button icon for call-to-action buttons, reinforcing user intent.

9. Define the button label with your desired call-to-action text.

10. Set the button link to direct users to your desired destination.

11. Enable “open in a new tab” to ensure visitors aren’t redirected away from your main site. Default: off

12. Select button style from primary, secondary, xl, plain, sm, sm-secondary, or circle to match the tone and prominence you want.

13. Choose the button layout for the icon: left, right, or icon only. This can make actions visually clearer.

14. Set link style so only the button, the full block, or both are interactive, based on your usability goals.

Info: Properly layered content with icons and well-targeted call-to-action buttons attracts attention and encourages interaction.

💡 Tip: Arrange headings, captions, and actions in a logical order. Use contrast and alignment for better readability, especially on complex or textured backgrounds.

Foreground media

Foreground media allows you to overlay a high-impact image, such as a product or logo, directly within your banner content.

This option boosts branding and draws the eye to a specific subject. You can also style foreground images and link them for extra interactivity.

1. Upload or specify the main foreground image inside the overlay content area.

2. Select the foreground image style: default (square/rectangular), rounded corners, or circle for different aesthetic effects.

3. Set max image width from 0 to 1600 px in 16 px increments. Default is 160 px

4. Optionally, link the image to a URL for more interactive experiences.

Info: Foreground images should be crisp and appropriately sized. This avoids crowding your message while adding visual focus.

Visibility settings

Visibility controls help you make the Banner Block appear or disappear on specific devices for a truly responsive experience.

Use these settings to hide banners on desktop or mobile, or show them everywhere for unified messaging.

1. Show the block everywhere (default), or

2. Hide on desktop, or

3. Hide on mobile

Info: Streamlining banners for just the right device or audience helps prevent clutter and boosts site performance.

Usage notes

1. Preview the Banner Block in both desktop and mobile layouts to confirm the best look and legibility.

2. Use sharp, high-contrast color pairings with overlays for easy-to-read text.

3. Optimize and compress background images and videos so your banners load quickly, especially for mobile visitors.

4. Arrange headings, buttons, and links in a way that makes navigation obvious and click targets easy for all users.

5. Select heading levels and button styles to enhance accessibility and overall search performance.

⚠️ Important: The Banner Block puts strong branding, layout flexibility, and engaging interactivity within reach. By using background controls, aspect ratios, and accessible content options, you can give every important message the attention it deserves.