The widget library for WordPress is here Download plugin

Split-Block Hero Section

Make a bold, sophisticated statement with the Split-Block Hero Widget. This layout moves beyond traditional full-screen banners by utilizing a geometric, architectural design that perfectly balances imagery and typography.

The structure is defined by a clean 50/50 vertical split. The left column is dedicated entirely to a full-height, immersive image, creating a strong visual anchor. The right column is further divided into two distinct content blocks: a colored top section for descriptive copy and calls-to-action, and a stark white bottom section reserved for a massive, high-impact headline. This separation of elements improves readability and allows for creative color blocking that can match your brand identity.

Key Features:

  • Geometric Split Layout: A modern 50% image / 50% content split that provides a high-end, editorial look.
  • Stacked Content Blocks: The right side features two equal-height blocks (Top & Bottom) to separate detailed messaging from the main headline.
  • High-Impact Typography: Optimized for extra-large, "poster-style" headlines that grab attention immediately.
  • Editable Color Areas: Fully customizable background colors for the top content block, allowing for vibrant accents (like the orange in the reference) or subtle brand tones.
  • Responsive Stacking: On mobile devices, the layout transforms into a vertical stack (Image -> Content Block -> Headline Block), ensuring every element gets full-width visibility without cramping.

 

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.