Split Content Video Hero Template

A cinematic split-layout video hero with a large left headline, right-side content block, and dual call-to-action buttons.

Command attention with the Split-Content Video Hero, an asymmetric masterpiece that balances striking visual motion with a highly organized typographical grid. Instead of stacking all your text in the center and obscuring your video, this layout pushes the primary headline to the top-left and the supporting copy to the middle-right. This creates a natural, diagonal reading path that guides the user's eye beautifully across your cinematic background.

This widget is designed for sophisticated storytelling. It features an eyebrow kicker, a massive primary headline, a right-aligned supporting paragraph, and a dual Call-to-Action (CTA) stack. To top it off, a row of sleek, pill-shaped taxonomy tags anchors the bottom-left corner, allowing you to highlight core services or industries at a single glance.

Key Features:

• Asymmetric Split Layout: A modern, diagonal visual hierarchy that separates the punchy headline from the detailed supporting text, giving your background video room to breathe.
• Dual Call-to-Actions: Features side-by-side primary (solid color) and secondary (outline/white with an icon) buttons to capture different levels of user intent.
• Taxonomy Tags: A built-in row of bottom-anchored badges to instantly communicate your core services, tech stack, or categories.
• Immersive 100vh Canvas: Full-bleed video integration with a subtle, protective gradient overlay to ensure text never gets lost in bright footage.
• Advanced Typography: Clean, scalable font structures that look like they were custom-coded by a high-end digital agency.

Versatile Use Cases

This hero section thrives when you have a complex value proposition that requires both a bold hook and a detailed explanation, all while maintaining a premium aesthetic.

• Creative Agencies & Studios: As shown in the demo, this is the perfect introduction for an independent studio. Use the main headline to state your purpose, the right paragraph for your methodology, and the bottom tags to list your disciplines (e.g., "Identity," "Digital campaigns").
• B2B Tech & Enterprise SaaS: Sell complex software elegantly. Use abstract, high-tech looping videos in the background, outline the software's main benefit on the left, and use the dual CTAs for "Request Demo" and "View Documentation."
• Consulting & Professional Services: Establish authority immediately. The split layout feels highly corporate and organized, making it ideal for financial advisors, legal firms, or management consultants who want to look modern and trustworthy.
• Corporate Portfolios & Case Studies: Highlight a massive flagship project. The background can run a case study sizzle reel, while the text provides context and the CTAs drive users deeper into the portfolio.

Cross-Platform Integration

Don't let the complex asymmetric grid fool you. This widget is built with un-nested CSS Flexbox and Grid, making it incredibly lightweight and easy to install anywhere.

• WordPress, Gutenberg & Elementor: Instantly upgrade your WordPress site's hero section. Drop it natively into Elementor (Free or Pro) or the Gutenberg editor. The split layout is already fully responsive, saving you hours of manual mobile-tweaking.
• Squarespace (Fluid Engine): Bypass the limitations of standard Squarespace blocks. Paste this directly into a Code or Markdown block to achieve an edge-to-edge, split-typography layout that usually requires heavy custom developer overrides.
• Shopify & E-Commerce: Create a high-end brand introduction on your storefront. Paste the clean source code into a custom liquid section to establish your brand's lifestyle or mission before users scroll down to your product grids.
• Custom Code (Webflow, Framer, Wix): A developer's dream. The self-contained HTML and CSS strings can be pasted straight into Webflow embed blocks or static environments. The CSS Grid logic ensures the diagonal split layout stacks perfectly into a vertical column on mobile devices automatically.

How to install Split Content Video Hero Template to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit Split Content Video Hero Template visually using the native Squarespace extension

+−

First, ensure you have connected your website to the native Redesignee extension. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. To drop the Split Content Video Hero Template into Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.