The Outlined Overlap Hero is an ultra-modern, editorial-inspired header component designed to make a massive visual impact the moment a page loads. It is a masterclass in high-end typography, utilizing a "sandwich" stacking technique where a bold heading is physically split by a media panel—passing behind the image as a solid fill and emerging over the top as a sharp, technical outline.

This widget is built specifically for designers and developers who need to break the "standard" boxy layout of typical websites. It is an ideal fit for:

• Premium Portfolios: For photographers, creative directors, and architects who want their names to feel "built-into" the imagery.
• High-End Fashion & Editorial: Sites that require a "Vogue" or "High-Snobiety" aesthetic where typography is treated as a structural element.
• Agency Landing Pages: To demonstrate technical sophistication and a "motion-first" design philosophy.
• Case Studies: Perfect for the top of a deep-dive project page to establish a strong brand identity immediately.

1. Sophisticated Stacking Logic (The "Sandwich" Effect)

The core of this widget is its three-dimensional stacking. The solid "Fill" text sits at the deepest layer, the image panel occupies the middle ground, and a perfectly synchronized "Outline" layer sits on top. This creates a complex visual depth that is usually impossible to achieve in standard website builders without heavy custom coding.

2. Dynamic Real-Time Clipping

The widget uses a high-performance JavaScript engine to calculate the exact intersection between your text and the image panel. As the screen resizes or the content changes, the "Outline" layer is clipped in real-time. This ensures that the outline only appears when it is physically overlapping the image, maintaining a clean, professional look at all times.

3. Live-Sync Typography

The "Fill" and "Outline" layers are intelligently linked. Using a built-in MutationObserver, the widget detects any changes you make to the heading in the editor. If you change a single letter or add a line break, the outline layer mirrors it instantly, keeping the effect perfectly aligned without any manual adjustment.

4. Editorial Meta-Data Layout

Beyond the heading, the widget includes a structured "Meta" area (typically for project indexing like 01 / 14). This reinforces the editorial "magazine" feel and provides a dedicated space for secondary information like dates, categories, or project numbers.

5. Mobile-Responsive Intelligence

While the overlapping effect is a desktop powerhouse, the widget automatically adapts for mobile. At smaller breakpoints, the layout shifts to a vertically stacked grid. This prioritizes readability and SEO performance on phones while maintaining the bold, oversized typography that defines the style.

6. Fluid Engine Compatibility

Built to be 100% stable within Squarespace, the widget respects the boundaries of the Fluid Engine while extending its capabilities. It is lightweight, hardware-accelerated, and designed to load instantly without the "jitter" associated with many third-party sliders or hero scripts.

How to install Outlined Overlap Hero to your website

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

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. 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. If you are using 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.