CTA two doors, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-two-doors.html Library (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Catalogue access Standard # CTA two doors A closing band split into two tall photographs side by side, edge to edge, each a door for a different audience with its own label, heading, line and button. One is veiled in your theme's contrast colour with your base as the type, the other in your base with your contrast as the type, so the pair reads as two doors in any theme, even one with no colour at all. Includes replaceable example photographs and a short hand-off row on your theme's paper below. States no colour and no font of its own. The signature moment ## Two doors The veils are the composition. The left door is veiled in your contrast at 80% with base type, the right in your base at 80% with contrast type, and the two meet at a hard seam with no gap. Strip every colour from the theme and it is still one dark panel beside one light one, so the page ends on a choice rather than on a single ask. The photographs are texture behind each veil; the split is what a visitor sees. Theme handoff ## What comes from where ### Theme and pattern - Height - Position - Headings are display type, off the ladder 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 for a page with two audiences. Two tall core/cover panels stand side by side, edge to edge, and each is a door: a label, a heading, one line and a button. ### The signature moment: two doors The veils are the composition. The left door is veiled in your contrast at 80% with base type, the right in your base at 80% with contrast type, and the two meet at a hard seam with no gap. Strip every colour from the theme and it is still one dark panel beside one light one, so the page ends on a choice rather than on a single ask. The photographs are texture behind each veil; the split is what a visitor sees. Make it yoursVariations and the edits to make first ### Variations - Main door: the same pair at two to one, a three-track grid (minimumColumnWidth 16rem) with the ink door spanning two, so both doors always end at one height. The wide door takes a clamp(3rem, 6.5vw, 7rem) heading for the audience you want most, the narrow paper side door clamp(1.75rem, 3vw, 3.25rem) and a short "Apply". WordPress drops the span below 33.5rem, so the doors stack on a phone and hold two to one at tablet. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour, the typeface, the spacing scale. Decides: the veil opacity, the door height, the copy's position, the 26rem measure of the line under each heading, and the grid's 22rem minimum column, so the doors hold side by side at tablet width and stack on a phone. - Height: minHeight 52vw, so a door is taller than it is wide from tablet up (998px tall by 960px wide at 1920). Never vh, which sizes to the preview frame. On a phone the stacked doors keep their height through a clamp(10rem, 16vw, 14rem) top padding. - Position: contentPosition bottom left, where a door's handle is. The cover's layout is default, and the measure group states zero side padding: a constrained layout in a theme with root-padding-aware alignments (Twenty Twenty-Five) adds has-global-padding, which would add the theme's gutter a second time inside the door. - Headings are display type, off the ladder: a bare clamp(2.75rem, 5.2vw, 5.5rem), because at this size the heading IS the door and has to hold a 960px panel. Large display, so 3:1 is its floor; it measures far above that. Technical notesBlock mechanics, responsive behaviour and constraints ### Why type on a photograph is permitted here A cover's veil is a chain at a known opacity, so the lightest and darkest ground each door's type can land on is the veil over a white and over a black photograph. The contrast half of check-responsive composites both and the worse has to pass. Lower either veil below 80 and that stops being true. ### The buttons The paper door's button states no colour, so your theme's elements.button paints it: a filled button reads on a light veil. The ink door's button is an outline, transparent with a base label and a currentColor border, because a theme-filled button in contrast would sink into a contrast veil and leave a label floating with no edge. ### What a buyer changes first The two photographs: select a cover and choose Replace. Then the labels and headings, which name the two audiences. Keep each heading to about four words. ### The hand-off row Below the doors, a short row on your theme's paper with one centred line, so the section ends and the page does not. It is the first thing a buyer rewrites or deletes. ### Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select a cover and choose Replace to use your own Media Library files. See image credits (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. 9.2KB of core-block markup, 6 blocks (button, buttons, cover, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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 cover colophon A footer that ends the page on a photograph: a full-bleed cover under a heavy veil of your theme's contrast colour, a display-size sign-off high on it with an outlined contact button and one line of copy, four short link columns lower down, and along the very floor a hairline and the small print. The columns wrap two across on a phone. Includes a replaceable example photograph. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-cover-colophon.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 Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.html) #### Before you paste Requires a block theme on WordPress 6.7 to 7.0. 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/). #### What's inside Blocks button, buttons, cover, group, heading, paragraph Core only yes Chains 28, deepest 2 rungs currentColor yes color base, black, contrast, white spacing 30, 40, 50, 60 font-size medium Continue exploring ## Next in Call to action Explore all 8 Call to action patterns (https://patternpaste.com/patterns/cta/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Call to action Call to action Standard ### CTA stamp A closing ask reduced to one small bordered box centred in a very deep band of empty paper. 5 blocks · 2 variations Open preview (https://patternpaste.com/pattern/cta-stamp.html) Night stamp (https://patternpaste.com/pattern/cta-stamp.html#variant=night-stamp)Filled stamp (https://patternpaste.com/pattern/cta-stamp.html#variant=stamp-filled) Shot in Twenty Twenty-Five Call to action Call to action Free Standard ### CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. 6 blocks Open preview (https://patternpaste.com/pattern/cta-band.html) Shot in Twenty Twenty-Five Call to action Call to action Cover Standard ### CTA cover The closing band that ends on a photograph. 6 blocks · 2 variations Open preview (https://patternpaste.com/pattern/cta-cover.html) In motion (https://patternpaste.com/pattern/cta-cover.html#variant=in-motion)Paper close (https://patternpaste.com/pattern/cta-cover.html#variant=paper-close)