CTA two doors

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 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.

• 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.

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.

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 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.

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.

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.

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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.