The widget library for Squarespace is here Learn more

Split-Screen Creative Hero Slider

Captivate your audience with this Split-Screen Creative Hero Slider, a visually distinct widget designed for modern brands, influencers, and creative studios. This component breaks away from traditional full-width banners by utilizing a dynamic 50/50 split layout that pairs bold messaging with layered visual storytelling.

The left column features a customizable solid color background (perfect for brand colors like pink, pastel blue, or dark mode themes) that ensures your typography remains crisp and legible. The right column introduces depth with a unique dual-layer design: a full-height background image sets the scene, while a prominent, editable circular image overlay floats on top, creating a sophisticated 3D effect perfect for portraits, product close-ups, or featured artwork.

Key Features:

  • Layered Visuals: Combine a background texture or scene with a focal point image inside a stylish circle container.
  • Customizable Colorblock: Easily change the left column's background color directly in the editor to match any campaign or seasonal theme.
  • Editorial Typography: Features large-scale headings and clean body text optimized for readability and impact.
  • Smooth Animations: Elements slide and scale in upon load, providing a premium, app-like feel.
  • Responsive Stacking: The split layout intelligently stacks into a vertical column on mobile devices, preserving the visual hierarchy without cramping the content.
  • Conversion Focused: Includes a high-visibility call-to-action button to drive user engagement immediately.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.

Published:

Jan 08, 2026 10:23 AM

Category: