CTA split: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-split.html Core Patterns (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Catalogue access Standard # CTA split A closing band with one hard seam: an inverted main ask meets a quieter route with an editable WordPress photograph. Both halves stretch to the same height on desktop and stack on a phone. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The heading. Six to nine words. - Both buttons' labels and links. Neither ships with a URL. - The right half's job. It ships as "try one first". - The band's height. Spacing preset 80 on both halves. - The eyebrows. Two small uppercase lines. The signature moment ## The signature moment The seam. Two grounds meet on a single hard vertical edge down the centre of one full-bleed band, with the loud half and the quiet half exactly the same height, so the join reads as a cut rather than as two boxes sitting next to each other. Theme handoff ## What comes from where ### From your theme - The typeface. - Your two universal colours. - Your spacing scale. - Your button shape. ### Set by this pattern - No gap. - Equal heights. - Each half states its own text colour on every element. - The measure inside each half. - The weight of the two actions. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A closing band cut in two down the middle. The left half inverts to your contrast and carries the ask; the right half stays on your base and carries a second, quieter route out. There is no gutter between them and no page ground showing anywhere: one band, two grounds. ### The signature moment The seam. Two grounds meet on a single hard vertical edge down the centre of one full-bleed band, with the loud half and the quiet half exactly the same height, so the join reads as a cut rather than as two boxes sitting next to each other. Everything else is held to the floor to keep the seam the only event: no rules, no accent marks, no cards. The other half of the composition is scale collision across that edge, a display heading on the left against a heading a third of its size on the right. Make it yoursVariations and the edits to make first ### What to change first - The heading. Six to nine words. This ramp is built for a sentence, and a long one softens the stop. - Both buttons' labels and links. Neither ships with a URL. Make both labels verbs, and keep the second one obviously smaller in ambition than the first. - The right half's job. It ships as "try one first". A price note, a contact route or a reassurance block all sit in the same space; keep it one heading, one short paragraph and one action, or the seam stops being a hierarchy. - The band's height. Spacing preset 80 on both halves. Step both to 70 if the band feels heavy in your theme's scale, and always change both, or the halves are no longer the same shape. - The eyebrows. Two small uppercase lines. Delete either and its half still reads. ### Variations - Ask right (seam-mirrored) mirrors the composition: the paper half leads and the inverted ask closes on the right. One structural change, nothing else; the chains, the type ramp and the seam are identical. - Cobalt and chalk (cobalt-and-chalk) states the cobalt and chalk palette and Helvetica Neue, Arial, sans-serif face while keeping the base composition. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. The band is set in yours. - Your two universal colours. The dark half asks for contrast with base on it; the paper half asks for base with contrast on it. Every stock block theme defines both, and if a theme defines neither the pair falls back to black and white and the seam still reads. - Your spacing scale. The band's height is spacing preset 80 top and bottom on both halves, so a theme with a generous scale gets a taller band. - Your button shape. Both actions are core buttons carrying your theme's button element styles, including whatever it does on hover and focus. ### What it decides for itself - No gap. The columns state a block gap of zero on both axes. A gap here is not a nicety: at any non-zero value a stripe of the page's own ground shows through the middle of the band, and the pattern stops being one band. - Equal heights. The halves are left to stretch, which is what makes the two grounds meet along the whole edge. This is why neither half is vertically centred: any vertical alignment on a column, or on the columns block, collapses it to its content and breaks the seam. - Each half states its own text colour on every element. Headings included, and that is the point: a theme's heading element style beats a colour inherited from the wrapping group, which is how a headline ends up painted in the same colour as its own band with nothing to warn you. - The measure inside each half. The ask is held to 32rem and the second route to 24rem by a nested constrained group, not by padding, so the two columns of type sit against the seam at their own widths. - The weight of the two actions. The primary button inverts back to your page ground on the dark half, so it cannot disappear into it. The secondary is a 1px currentColor outline on a transparent ground, so it follows the type wherever your theme puts it and reads as the lesser of the two everywhere. Technical notesBlock mechanics, responsive behaviour and constraints ### At 390 Core stacks columns below 782px. In the base, the inverted half stacks on top and the paper half sits under it, with the seam turning horizontal and staying gapless. The Ask right variation reverses that: the paper half comes first and the section ends on the ask. ### Notes - Core blocks only: group, columns, column, paragraph, heading, buttons, button. No plugin, no script, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress itself guarantees, and the two borders are currentColor, so nothing here can resolve to nothing. - The text on each half sits on that half's own ground rather than on your page ground. If you swap either colour, check the pair rather than assuming it carried over. ### Included photograph The quieter paper half opens with a 16:9 WordPress photograph. It gives the second route a visual anchor and remains editable after copying. The mirrored variation moves the picture with its paper half. Replace the photo in the editor and update its alt text. Image credits (https://patternpaste.com/image-credits/). Questions ## CTA split: common questions Does CTA split need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will CTA split match my theme? Choose by variation. Ask left and Ask right take your theme’s palette; Cobalt and chalk brings its own colours. How many variations does CTA split have? 3: Ask left, Cobalt and chalk and Ask right. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is CTA split free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 8.8KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Footer Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. One closing rule joins both parts to the useful and legal links below. The two fields stack in reading order on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-booking-fold.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Pricing Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Call to action Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, image, paragraph Presets color 6, spacing 2, font-size 3 WordPress 7.0+ Continue exploring ## Next in Call to action Explore all 20 Call to action patterns (https://patternpaste.com/patterns/cta/) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA RSVP reply card A reply card for an invitation: a double-ruled card centred on the page with the reply-by date at display size, the three things a guest needs to tell you as numbered lines, then a button to your reply form and an email link that opens with the same three questions filled in, and beside the card a ruled note naming who to ask. Call to action Preview pattern (https://patternpaste.com/pattern/cta-rsvp-reply-card.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA stamp A closing ask reduced to one small bordered box centred in a very deep band of empty paper. Call to action Preview pattern (https://patternpaste.com/pattern/cta-stamp.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### Studio openings A measured availability ledger with dated service notices and a clear enquiry action. Call to action Preview pattern (https://patternpaste.com/pattern/cta-studio-openings.html)