Brickspace Lab
Contact usContact ShopifyTry a theme
Keystone
Keystone
  • Keystone documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Prices
      • Quick add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Custom content for tables
      • Replace "Add to cart"
      • Disable quick add
      • Product template
    • Collections
      • Collection template
    • Sitewide
      • Color and option swatches
      • Device specific visibility
      • Discount popups
      • Article template
      • Blog template
    • Wholesale
      • Wholesale basics
      • Account restrictions
  • Sections
    • Sitewide
      • Header
      • Footer
      • Announcement
      • Cart drawer
      • Search drawer
      • Menu drawer
      • Discount
      • Account drawer
      • Custom liquid
      • Store locater
    • Navigation
      • Navigation links
    • Content and Media
      • Banner
      • Image hotspot
      • Slideshow
      • Countdown
      • Slider
      • Video
      • Split banner
      • Testimonial slider
      • Search banner
      • Marquee
      • Rich text
      • Blog posts grid
      • Logo list
      • Icon grid
      • Collapsible content
      • Tabs
      • Collage
      • Testimonial grid
    • Products and Collections
      • Product grid
      • Product slider
      • Product table
      • Product comparison
      • Recently viewed
      • Collection list grid
      • Collection list slider
      • Featured product
      • Comparison table
    • Forms
      • Contact form
      • Email sign-up
      • Sign-up form
      • Tool tip
  • General
    • Changelog
      • v1.3.0
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
    • Cloning a demo theme
      • Knit
      • Kingpin
      • Kindred
      • Kettle
      • Kaleidoscope
Powered by GitBook
On this page
  • Section overview
  • Section settings
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Content and Media

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)

Last updated 1 month ago

Was this helpful?