CTA cover: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cta-cover.html Core Patterns (https://patternpaste.com/patterns/) Call to action (https://patternpaste.com/patterns/cta/) Catalogue access Standard # CTA cover The closing band that ends on a photograph. A short full-bleed cover with an example photograph, with a heavy veil of your theme's contrast colour over whatever image you point it at, and one centred ask on top of it. It is the only CTA in the library that closes a page on a picture rather than on a colour. Ships with a short hand-off row on your theme's paper below it, so the section ends and the page does not. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The photograph. Select the cover block and choose an image. - The heading. "End on the picture, not the pitch." is our sentence, not yours. - The two labels and their links. Both buttons ship without a URL. - The hand-off row. If your page already ends in a footer that says the same thing, delete the row and keep the cover. The signature moment ## It is the only closing band in the library that carries a picture The signature is the picture itself. cta-band closes a page on your ink, cta-quiet closes it on your paper, cta-split closes it on both at once. This one closes on your photograph. That is the whole reason to choose it: the ask sits over a place, a product or a face instead of over a rectangle of colour, and the page ends somewhere rather than on a swatch. Theme handoff ## What comes from where ### From your theme - The typeface. - Your two universal colours. - Your spacing scale. - Your button element styles ### Set by this pattern - The veil is heavy, at 80%, and that is not a taste decision. - The cover includes an example photograph. - A short hand-off row underneath. - Height in rem, never vh. - The second action is outlined, not filled. 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 with a photograph in it. It is short, it is centred, it asks once, and the last thing a reader sees on the page is an image rather than a flat colour. ### The signature moment: it is the only closing band in the library that carries a picture The signature is the picture itself. cta-band closes a page on your ink, cta-quiet closes it on your paper, cta-split closes it on both at once. This one closes on your photograph. That is the whole reason to choose it: the ask sits over a place, a product or a face instead of over a rectangle of colour, and the page ends somewhere rather than on a swatch. Everything else is deliberately the simplest composition of the four closers. No seam, no hairline running past its column, no eyebrow, no fine print: one heading, one line, two actions, all centred on a 40rem measure. A closing band that competes with itself does not close, and the picture is already the event. The band is 30rem tall, about two thirds of a cover hero. Openers are tall because a reader has just arrived; a closer is short because they are leaving. Make it yoursVariations and the edits to make first ### The variations - Ink close (base). Contrast veil, base type. The default close. - In motion. The same band over a clip instead of a still: the cover's backgroundType is video and nothing else changes. Use something short, silent and looping. Under an 80% veil a clip reads as weather, not as a film, which is what you want behind an ask. - Paper close. The colour axis by inversion: a base veil at 80% with contrast type. The photograph becomes a pale ghost behind ink, for a page that should not go dark at the end. ### What to change first - The photograph. Select the cover block and choose an image. Prefer one with a subject that survives being dimmed: a horizon, a texture, a wide shot. A dense, detailed picture disappears under the veil and is a waste of the pattern. - The heading. "End on the picture, not the pitch." is our sentence, not yours. This ramp is built for five to eight words. - The two labels and their links. Both buttons ship without a URL. Make the first a verb and the second an escape route. - The hand-off row. If your page already ends in a footer that says the same thing, delete the row and keep the cover. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. The heading is set in yours. - Your two universal colours. The veil asks for contrast and the type asks for base, both of which every stock block theme defines. Where a theme defines neither, the pair falls back to black and white and the band still reads. - Your spacing scale. The rhythm inside the band is stated in spacing presets, so a theme with a generous scale gets a looser close. - Your button element styles, on both actions, through wp-element-button. ### What it decides for itself - The veil is heavy, at 80%, and that is not a taste decision. A photograph's luminance is unknowable: the buyer swaps in their own image, so type set on a lightly tinted one can land white on white and nothing warns you. At 80% the veil's own colour dominates whatever is behind it, so the pair measured for legibility is the pair a reader gets, whichever picture you choose. Do not lower it. If you want the image brighter, put the type on a plate instead, which is what cover-plate is for. - The cover includes an example photograph. Its public image URL travels with the copied block. Choose Replace to select your own image while keeping the height, veil and layout. - A short hand-off row underneath. A full-bleed cover with nothing after it reads as the whole page. The paper row below states what happens after the click and gives the section an end. - Height in rem, never vh. A viewport height makes the band's size depend on the window it is previewed in. - The second action is outlined, not filled. Two filled buttons on a veil read as a choice with no primary; the outline uses currentColor, so it follows the type wherever the type goes and cannot blank. Technical notesBlock mechanics, responsive behaviour and constraints ### What it does not do - It does not put type directly on the photograph. There is a veil between them in every variation, and that is the pattern. - It does not carry an accent colour anywhere. A pale accent over a dimmed photograph is a mark nobody can see, in half the themes it lands in. - It does not need the plugin. Three core blocks, no script, no stylesheet. ### Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or 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. Questions ## CTA cover: common questions Does CTA cover need a plugin? No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will CTA cover match my theme? Choose by variation. Ink close, In motion and Paper close take your theme’s palette; Mend and Vow bring its own colours. How many variations does CTA cover have? 5: Ink close, In motion, Mend, Paper close and Vow. 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 cover free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 6.4KB 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. 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 5 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, cover, group, heading, paragraph Presets color 5, font-size 2, spacing 4 WordPress 7.0+ Continue exploring ## Next in Call to action Explore all 20 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 No plugin needed ### CTA call now An emergency band for a trade that answers the phone at night. Call to action Preview pattern (https://patternpaste.com/pattern/cta-call-now.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### Festival bulletin A poster-scale festival announcement, four dated tickets and a wristband call to action. Call to action Preview pattern (https://patternpaste.com/pattern/cta-festival-bulletin.html) Shot in Twenty Twenty-Five Call to action No plugin needed ### CTA footnote The smallest closing section in the catalogue: a full-bleed band on your paper, one currentColor hairline, and under it a single line holding a short sentence and a text action. Call to action Preview pattern (https://patternpaste.com/pattern/cta-footnote.html)