Split banner

Section overview

The Split banner section provides a horizontally split layout with one side for content and the other for media (images or videos). It offers a flexible and visually appealing way to showcase content alongside visual elements.

Common use cases

• Feature product announcements with an image on one side

• Create promotional banners with compelling visuals

• Highlight special collections or seasonal offerings

• Welcome customers to your store with an engaging split layout

Usage tips

• Use images or videos that contrast well with the text overlay for better readability

• Customize different blocks for each half of the split layout

• For mobile optimization, upload specific mobile background images when necessary

• Keep text concise and use appropriate alignment settings for best readability

• Consider using the gradient overlay option when placing text over busy images

• Test the section at different screen sizes to ensure proper responsiveness

Section settings

Setting	Description
Vertical spacing	Controls the height of the banner section across different device sizes
Color scheme	Sets the background and text color theme for the entire section
Border color	Determines the color of any borders applied to the section
Border position	Controls where borders appear (top, bottom, both, or none)
Enable margin	When enabled, applies 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, only mobile, or only desktop

Block settings

Content

The Content block allows you to add text, images, videos, and buttons to either side of the split layout. Each banner alternative section can have up to 4 content blocks.

Setting	Description
Heading	The main title text for the content block
Content	Rich text area for descriptive content or promotional messaging
URL	Optional link that makes the entire block clickable
Desktop background image	Background image displayed on desktop devices
Mobile background image	Optional different image optimized for mobile devices
Video background	Optional video to display instead of or alongside images
Show entire image	When enabled, displays the full image (object-contain) instead of cropping to fill
Show video on mobile	Controls whether video backgrounds appear on mobile devices
Button label	Text displayed on the primary call-to-action button
Button URL	Destination link for the primary button
Button color	Style and color variant for the primary button
Secondary button label	Text for an optional secondary call-to-action button
Secondary button URL	Destination link for the secondary button
Secondary button color	Style and color variant for the secondary button
Color scheme	Background and text color theme for this specific content block
Text color	Override to force light or dark text regardless of the color scheme
Enable gradient	Adds a subtle dark gradient behind text for better readability over images
Enable background overlay	Applies a colored box behind the text based on the color scheme
Vertical alignment	Controls where content appears vertically (top, middle, bottom)
Horizontal alignment	Controls where content appears horizontally (left, center, right)