Split Panel CTA Showcase

The Split-Panel CTA Showcase is a multi-dimensional, high-conversion section designed to fuse lifestyle imagery, bold editorial typography, and direct interactive pathways into a single cohesive experience. By breaking away from predictable horizontal layout lines, this widget relies on an asynchronous vertical panel design to pull users deeper into your brand's digital ecosystem. It is a premium web component engineered for design studios, modern brands, and content creators looking to transform standard digital traffic into targeted action.

Design & Visual Aesthetic

The structure relies on a precise three-panel split that balance media, message, and conversion targets simultaneously.

• Asymmetric Panel Split: The canvas is split dynamically across three core focal points. The left panel anchors the layout with rich contextual or environmental media; the central panel delivers high-impact typographic messaging; and the right panel uses a bold, contrasting color overlay to isolate the primary call to action.
• Overlapping Action Nodes: A signature feature is the floating, high-contrast action button that bridges the media panel and the central text panel. This deliberate overlapping positioning breaks standard browser containers, establishing an editorial "visual rhythm" that guides the user's attention down the page.
• Refined Typographic Stacking: The central headline utilizes oversized, compressed sans-serif lettering with a staggered alignment ("YOUR NEXT BIG MOVE"). This creates a striking architectural layout that frames smaller, technical sub-labels and descriptions with crisp precision.

Core Features

• Tri-Panel Media & Color Mapping: Through your design dashboard, you can individually configure each vertical panel—swapping out the left background image, setting custom background shades, and adjusting the right color canvas to match specific brand collateral.
• Micro-Interactive Floating Button: The intersecting circular button stays perfectly positioned between layouts, allowing for micro-interactions such as smooth hover scale-ups or custom directional arrow rotations.
• Fluid Engine Stacking Calibration: Built specifically to scale effortlessly alongside properties like the Squarespace Fluid Engine and WordPress, this layout keeps panels securely mapped to page grids without custom code bottlenecks or alignment breakages.
• Responsive Stack Transformations: On smaller screens, the horizontal columns compress dynamically into an elegant vertical list, ensuring that call-to-action buttons, headline text, and media sections stack comfortably for phone users.

Where to Use This Widget

This sectional widget is highly effective when placed at strategic turning points across a digital interface:

• High-Impact Landing Page Footers: Place this section at the baseline of a homepage or services page to summarize your authority and provide a visually undeniable path to convert.
• Project Case Study Conclusions: Ideal for portfolio pages where you want to reveal lifestyle project shots on the left while asking the reader if they are "Ready to turn attention into action?" on the right.
• Product Line Launches: Use it as a secondary page hero section to anchor a specific campaign launch, using social handles (e.g., @nextchapter) and button modules to prompt registration.
• Service Capabilities Introductions: Introduce a premium agency service division with a balanced arrangement that proves your firm's "sharper visuals and clear strategy."

How to install Split Panel CTA Showcase 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.