Cover chapters backdrop, Pattern Paste Canonical: https://patternpaste.com/pattern/cover-chapters-backdrop.html Interactive (https://patternpaste.com/interactive/) Chapters (https://patternpaste.com/interactive/chapters/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Cover chapters backdrop A photo essay where the pictures fill the page: six chapters run down the right on white plates over one full-height frame behind them, and as each chapter reaches the reading line the photograph behind the words changes, wiping in along the direction of travel. The plates stay at full strength, because a faded plate over a photograph is translucent type on a picture. Nothing moves until you scroll. Includes replaceable example images, one per chapter. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the six chapters as a plain stack, each picture above its own plate. States no colour and no font of its own. Start here ## What you change first - The photographs. Every chapter includes an image block with an example photograph; click each and choose from your media library, or use the block toolbar's "Fill chapters from media library" to deal a multiple selection in order. - The words. A month, a title and two paragraphs a chapter, inside the Plate group. - The plate's colour. The plate is your base; a contrast plate with base ink is the other honest choice. - The band and the line. Chapter length in the inspector, 760 here, is a floor: a plate may be as long as it likes and its picture stays behind it until the next plate arrives. - The masthead and the hand-off row. Ordinary core blocks before and after the block. - Motion. The inspector has the switch and the dials. - The heading levels. The masthead is an h2 and every chapter title an h3. The signature moment ## Six photographs behind six plates, each one the height of the screen The backdrop is the block's cinematic layout. Live, the frame is not a window in a column but the whole width of the section and the height of the screen, parked behind the chapters; every photograph is cropped to fill it, and the prose sits on a plate of the page's own base colour down the right-hand side. Reading it is reading captions over a slideshow that only turns when you do: a chapter arrives, its photograph wipes up behind it, and the previous one is pushed out underneath. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The measure. - The ladder. ### Set by this pattern - Six chapters across a year. - Mixed crops - The band, at 760. - The reading line at 80 - The masthead is outside the block 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 photo essay where the pictures fill the page. Six chapters run down the right on white plates over one full-height frame behind them, and as each chapter reaches the reading line the photograph behind the words changes, wiping in along the direction of travel. The block is patternpaste/chapters with the backdrop on, the morph and the plate off, the reading line at 80, the smear off, a band of 760 and no fade. ### The signature moment: six photographs behind six plates, each one the height of the screen The backdrop is the block's cinematic layout. Live, the frame is not a window in a column but the whole width of the section and the height of the screen, parked behind the chapters; every photograph is cropped to fill it, and the prose sits on a plate of the page's own base colour down the right-hand side. Reading it is reading captions over a slideshow that only turns when you do: a chapter arrives, its photograph wipes up behind it, and the previous one is pushed out underneath. The plate is the composite's, not the block's. The block paints nothing under the words, because type never sits on a photograph and a translucent ground over one has a contrast nobody can measure; each chapter here is a group with your base as its ground and your contrast as its ink, measured on the stock themes at better than 17:1. ### Why this is not editorial-chapters-case, team-chapters-index or timeline-chapters-years - The frame is behind the words, not beside them. Every other chapters composite is a two-column spread live. This one is a spread only at rest and on a phone; live, at two columns, the pictures are the page. - The chapter is a plate. The prose is inside a Plate group with a stated ground, which the others never need. That is the one authoring rule the backdrop adds: never take the plate away. - The pictures are the largest of the set by some way, cropped to the screen rather than to a frame in a column, so this is the composition for photographs that carry the story: a review, a travelogue, a campaign. - The morph is off because the frame is the screen and every picture fills it; the wipe is on because a photograph the height of the screen wants a direction to arrive from. - No fade, and it is the only one of the set without it. The fade dims the whole chapter cell, plate included, and a plate at sixty per cent over a photograph is translucent type on a picture, which is the one thing this composite exists to avoid (seen in the first live picture, 2026-09-03). The plates are already what separates one chapter from the next. Make it yoursVariations and the edits to make first ### What you change first - The photographs. Every chapter includes an image block with an example photograph; click each and choose from your media library, or use the block toolbar's "Fill chapters from media library" to deal a multiple selection in order. Choose pictures that survive being cropped to a screen. - The words. A month, a title and two paragraphs a chapter, inside the Plate group. Keep the plate: it is what keeps the words off the picture. - The plate's colour. The plate is your base; a contrast plate with base ink is the other honest choice. Never a translucent one. - The band and the line. Chapter length in the inspector, 760 here, is a floor: a plate may be as long as it likes and its picture stays behind it until the next plate arrives. Reading line is at 80 so a picture changes as its plate enters the screen; lower it and the plate is read over the wrong picture for a while. - The masthead and the hand-off row. Ordinary core blocks before and after the block. - Motion. The inspector has the switch and the dials. Turning the backdrop OFF makes this a two-column spread live as well as at rest. - The heading levels. The masthead is an h2 and every chapter title an h3. If this lands under another h2, or the page has no h1, change the masthead's level in the block toolbar. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. Nothing states a family. - Palette. The band and every plate are your base, the ink your contrast; the two labels lead on role-label and fall through; the button is your theme's outline style. - The measure. The plate is a constrained group at 36rem, aligned left in its column, so a line of prose never runs wider than a reader wants over a photograph. - The ladder. The masthead is x-large, every chapter title large, every paragraph medium. ### What it decides for itself - Six chapters across a year. A creative studio notebook at two-month intervals links each photograph to an observation about light, material or space. The months are labels you replace. - Mixed crops (3:2, 4:3, 16:9, 3:4), because with the backdrop on every picture is cropped to the screen anyway and the crop only shapes the still spread; a portrait photograph works as a backdrop, it is simply cropped harder. - The band, at 760. A plate of two paragraphs is under that, so each photograph is held for a screen and a bit before the next arrives. - The reading line at 80, the control's maximum and the opposite of every spread composite. The photograph is the plate's own background, so it has to be behind the plate BEFORE the plate is read: at 80 the swap fires as the next plate's top enters the bottom of the screen, and a plate of any length keeps its picture until the one after it arrives. At 40 a reader had half a plate on screen over the previous month's picture. - The masthead is outside the block and the hand-off row is a sibling after it, both inset by the block's gutter, and both sit on the band rather than on a photograph. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin This pattern embeds patternpaste/chapters, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor. - With the plugin and motion off (the inspector switch, and also what the storefront's still picture and the contact sheet show): the two-column spread, every photograph in the left rail beside its own plate. - With the plugin deactivated entirely: the masthead is followed by the six chapters as a plain stack of core blocks, each photograph above its own plate, and then the hand-off row. - A reader who has asked for reduced motion gets the still spread. - On a phone or a tablet in portrait, with the plugin and motion on, the backdrop is the whole screen and the plates pass over it, the composition every scroll piece uses on a small screen. With motion off, or without the plugin, it is the one-column stack. ### What is not proved - The plate's contrast is measured on the resting spread, where the plate sits on the band; live it sits on a photograph, and the plate is opaque, so the measurement holds, but nothing reads it there. - The backdrop's width is 100cqw, the block's own width, which every current browser supports; a browser without container query units shows the frame at the column's width instead, which is the spread's frame and not a fault. - The sheet is the spread. The backdrop composition is seen on the live page and in the storefront's picture, which is photographed live at the second chapter; the contact sheet, which is the resting section at four widths, never shows it. The motion gate's 390 viewport judges the screen composition with every frame rule, and the section's height is held to the script-free one there as it is at two columns. ### 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. 30KB of core-block markup, 7 blocks (button, buttons, group, heading, image, paragraph, patternpaste/chapters), 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. #### Use it for - Annual reviews and year-in-pictures pages - Photo essays and travel stories - Architecture and studio case studies in pictures - Campaign and brand story pages - Expedition, event and festival recaps #### Pair with 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)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Call to action CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. States no colour and no font of its own. (https://patternpaste.com/pattern/cta-band.html) #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-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, group, heading, image, paragraph, patternpaste/chapters Core only NO Chains 86, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 20, 30, 40, 60, 80 font-size large, medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Studio split reel A large studio statement holds the left while a screen-height photographic wheel fills the right. 9 blocks Open preview (https://patternpaste.com/pattern/hero-warp-reel-studio.html) Shot in Twenty Twenty-Five Editorial Editorial Needs plugin ### Editorial chapters case A long-form case study in seven chapters: the prose runs down the left and one picture frame on the right stays with you as you read, taking each chapter's photograph as that chapter reaches the reading line. 9 blocks Open preview (https://patternpaste.com/pattern/editorial-chapters-case.html) Shot in Twenty Twenty-Five Features Features Needs plugin ### Feature chapters view One photograph, six looks: the frame holds a single scene and the camera moves across it as you read, panning and zooming to the part each chapter points at with a soft spotlight on it, and the last chapter lets the whole picture go. 7 blocks Open preview (https://patternpaste.com/pattern/feature-chapters-view.html)