Split CTA
A two column banner with a message on one side and the action button on the other. Keeps the copy and the click target distinct and easy to scan.
A two column banner with a message on one side and the action button on the other. Keeps the copy and the click target distinct and easy to scan.
Search blocks by description or jump to a page.
Split CTA is a two column banner inside a rounded card. The left column holds a full bleed photograph with a subtle dark overlay, and the right column holds a bold heading, a short supporting line, and a large button with an animated arrow icon. On mobile the image stacks above the text at a fixed height, then both columns sit side by side from medium viewports upward.
The heading, body copy, and button label are independent pieces of text, so you can swap them without affecting the layout. The image and button target are also straightforward to replace. The entire card sits inside a standard page container, so it inherits whatever max width your layout applies.
Reach for this block near the bottom of a portfolio page when you want the call to action to feel considered rather than urgent. The image column gives the ask visual weight without a full hero, and separating the copy from the button makes it easier for a reader to absorb the message before clicking. It works especially well on an online education platform's instructor or tutor profile page, where a photo of a working environment reinforces credibility and the button drives course enrollment or a booking.
A natural flow around it on a Portfolio page:
Before
After
The block splits into two visually distinct zones that you can update independently:
Tip: keep the heading to one or two lines so the right column stays vertically centered without extra scrolling on smaller screens.