The widget library for WordPress is here Download plugin

Split Screen Accordion Call to Action with Hover Effect

Offer your users a distinct choice with the Split Screen Accordion CTA. This widget is perfect for websites that serve dual audiences (e.g., "Clients" vs. "Talent") or have two primary conversion goals.

Using advanced CSS Flexbox transitions, the interface feels fluid and organic. By default, the two options share the screen equally in a monochromatic, minimalist state. When a user engages with one side, it smoothly expands to dominate the view, bursting into full color while the opposing option recedes. This push-and-pull mechanic is a staple of high-end interactive design, making the simple act of choosing a path feel like a premium experience.

Key Features:

  • Fluid Accordion Effect: Uses cubic-bezier transitions for a smooth "elastic" expansion on hover.
  • Dual-Focus Design: Perfect for A/B choices like "Shop Men / Shop Women" or "Work / Agency".
  • Grayscale to Color: Images transition from a subtle, artistic black-and-white to full vivid color upon interaction.
  • Responsive Stacking: On mobile, the split-screen layout transforms into a vertical stack, maintaining a large tap area for touch users.
  • SVG Icons: Includes scalable vector arrows that animate and invert colors on hover.

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.