Circular Image CTA Spotlight

The Cinematic Circular Split Hero is an evocative website component engineered to anchor landing pages with high artistic contrast and structured visual tension. By framing a striking lifestyle visual inside a large, off-center circular portal, this widget completely subverts traditional square hero headers. It is a premier choice for creative industries, digital marketers, and fashion-forward agencies looking to launch campaigns with undeniable brand presence and an immediate editorial rhythm.

Design & Visual Aesthetic

The layout balances mood and message through dramatic lighting highlights and careful asymmetry.

• The Portal Framing Effect: The defining feature is the oversized circular crop on the left, which acts as a window into your brand’s lifestyle or product photography. Illuminated by ambient lighting glows in the background canvas, this geometric intersection cuts across bold typography to create a stylized, layered composition.
• Asymmetric Typography Split: The layout distributes its message across dual typographic zones. On the left, massive lowercase phrasing ("Make impact") breaks standard margins beneath the image frame. On the right, a tall, high-contrast headline ("Introduce something worth clicking") balances the design, drawing the eye toward the interactive targets.
• Cinematic Deep Canvas: Utilizing a premium slate-blue gradient field enhanced by soft, focal background light flares, the section establishes an expansive atmospheric mood. This ensures that the crisp white text and neon lighting within the portal remain highly legible and professional.

Core Features

• Integrated Media Masking: The circular window handles standard images or short-looping ambient video clips automatically, masking the content perfectly into a round silhouette without manual cropping hacks.
• Advanced Ambient Lighting Engine: Customize or toggle the background glow elements behind the typography to frame text legibly and introduce strategic accent colors into the section.
• Fluid Engine Stacking Calibration: Built from the ground up for seamless integration with systems like the Squarespace Fluid Engine and WordPress, this layout keeps absolute text coordinates, secondary descriptive labels, and button assets completely stable.
• Responsive Layout Reconfiguration: On smaller screens, the circular portal scales down beautifully while the text blocks reorganize into a unified single-column vertical flow, preserving large touch targets and text legibly for mobile devices.

Where to Use This Widget

This premium, hero-level layout is best placed above the fold to establish immediate authority:

• Creative Portfolio Openers: Perfect for design studios or multimedia directors who want to showcase an artistic, dramatic layout immediately upon loading the page.
• High-Impact Marketing Campaigns: Use this component as the main introduction for targeted product launches or brand re-introductions where you need to "turn ideas into launch-ready campaigns."
• Editorial & Digital Magazine Cover Sections: Elevate the first section of a feature-focused content hub or high-end blog index by presenting headers in a magazine-cover style.
• Conversion-Driven Action Blocks: Position this at critical mid-page milestones or long landing-page endpoints to frame your final value proposition with confidence and style.

How to install Circular Image CTA Spotlight 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.