Split banner

Section overview

The Split banner Alternative section provides a versatile banner with a horizontal split layout, displaying content blocks side by side on desktop. It allows for text content on one side and customizable media (images or videos) on the other.

Common use cases

• Showcasing featured products with compelling visuals and call-to-action buttons

• Creating promotional announcements with attention-grabbing media

• Welcoming customers to your store with an impactful introductory message

• Highlighting seasonal campaigns or special offers with dual content blocks

Usage tips

• Use high-contrast images that complement the text overlay for maximum readability

• Leverage different media for mobile and desktop to optimize for each device

• Consider using header overlap for a more immersive design when appropriate

• Keep text content concise and focused for better conversion rates

• Test the section on both mobile and desktop devices to ensure responsive design works correctly

Section settings

Setting	Description
Vertical spacing	Controls the height of the banner section
Color scheme	Sets the background color scheme for the entire banner section
Custom color	Allows for a custom background color when 'Custom' is selected as the color scheme
Border color	Determines the color of any borders applied to the section
Border position	Sets where borders appear on the section (top, bottom, both, or none)
Enable header overlap	Allows the header to overlap with the banner section
Enable margin	Adds horizontal margin to the section content
Enable max width	Limits the width of text content for better readability
Visibility	Controls whether the section appears on all devices, mobile only, or desktop only

Block settings

Content

Content blocks allow you to add text, media, and buttons to each side of the banner. This section supports up to 4 content blocks.

Setting	Description
Heading	The primary heading text for the block
Content	Rich text area for descriptive content
URL	Link for the entire block (clickable area)
Desktop background image	The image displayed on desktop devices
Mobile background image	The image displayed on mobile devices (falls back to desktop if not specified)
Video background	Optional video to use as the background instead of an image
Show entire image	When enabled, displays the entire image (object-contain) rather than covering the space
Show video on mobile	Controls whether video backgrounds appear on mobile devices
Button label	Text for the primary call-to-action button
Button URL	Link destination for the primary button
Button color	Style variant for the primary button
Secondary button label	Text for the secondary call-to-action button
Secondary button URL	Link destination for the secondary button
Secondary button color	Style variant for the secondary button
Color scheme	Background color scheme for the specific content block
Text color	Controls whether text is light or dark to ensure readability
Enable gradient	Adds a gradient overlay effect to improve text readability over images
Enable background overlay	Adds a background behind the text for improved readability
Vertical alignment	Controls where content appears vertically (top, middle, or bottom)
Horizontal alignment	Controls where content appears horizontally (left, center, or right)