Steps screens: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/steps-screens.html Core Patterns (https://patternpaste.com/patterns/) How it works (https://patternpaste.com/patterns/steps/) Catalogue access Standard # Steps screens A software walkthrough in four columns: a 16:10 frame with an example photograph ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence. The chip is the section's mark: it inverts to your contrast with your base on it, so it reads as a tab pressed into the bottom edge of each screen. Example images are included and can be replaced in the editor. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The four screenshots. Take them at the same window width or the run will look ragged even though the frames are identical. - The captions. One title of one or two words, one sentence that says what the user does on that screen. - The numerals. They are plain text in a plate, so 01-04 can become 1-4, or A-D, or Day 1-Day 4. - The count. Duplicate or delete a whole column. - The variation. Ship seam-bar where the section sits under a heading that has already introduced it and the titles can move up onto the seam. The signature moment ## The numeral rides the seam The numeral sits ON the seam between the frame and the caption, half in each. It is a small plate, inverted to your contrast with your base on it, whose top half covers the bottom edge of the screenshot frame and whose bottom half hangs into the caption. Nothing else in the section is inverted, so the four chips are the only dark marks on the band and the eye counts them before it reads a word. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your images. ### Set by this pattern - Full bleed with its own 1240px measure - 16:10. - The mat. - The type ramp. - Four columns with no widths. - The closing note is held to 29rem 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 software walkthrough: four columns, each one an empty 16:10 screenshot frame above a numeral and a caption. It is the first pattern in the steps section with a picture in it, and it exists for the page that has to show the product rather than describe the service. ### The signature moment: the numeral rides the seam The numeral sits ON the seam between the frame and the caption, half in each. It is a small plate, inverted to your contrast with your base on it, whose top half covers the bottom edge of the screenshot frame and whose bottom half hangs into the caption. Nothing else in the section is inverted, so the four chips are the only dark marks on the band and the eye counts them before it reads a word. That is also what makes the section legible as a sequence rather than as four pictures. Four framed screenshots side by side are a gallery; four framed screenshots each pinned by a numbered tab are steps, in an order, and the tab is what says which one you are on. #### How the lap is built, and why it cannot collapse A negative margin on a first child collapses into its parent's margin: block margins touch through a parent with no padding or border, and the overhang silently disappears. So the column is not a plain stack. Each column holds a vertical flex group (layout.type: flex, orientation: vertical, justifyContent: stretch, blockGap: 0) with three children in it: the frame, the numeral row, then the caption. A flex child's margins never collapse with its container's or with its siblings', so the numeral row's margin-top: -1.5rem moves it and nothing else. The -1.5rem is exactly half the chip: the numeral is a fixed 2rem at line-height 1 inside 0.5rem of vertical padding, which is a 3rem box. It is deliberately not a clamp(), because the lap has to be half of a height that is known rather than half of a height that depends on the viewport. The chip's ground is the contrast chain and its type is the base chain, which is a pair every theme defines, and it is opaque. Type never sits on the photograph: the numeral sits on its own plate, and the plate happens to lie over the picture. It is not frame-quartet, which is four square plates with labels and no sequence, and not steps-run or steps-ledger, which carry no picture at all. Make it yoursVariations and the edits to make first ### What to change first - The four screenshots. Take them at the same window width or the run will look ragged even though the frames are identical. - The captions. One title of one or two words, one sentence that says what the user does on that screen. Not what the screen contains. - The numerals. They are plain text in a plate, so 01-04 can become 1-4, or A-D, or Day 1-Day 4. A longer string simply makes a wider chip; only the height is load-bearing. - The count. Duplicate or delete a whole column. Nothing is numbered by WordPress, so the numerals are yours to renumber. - The variation. Ship seam-bar where the section sits under a heading that has already introduced it and the titles can move up onto the seam. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere, in the base or in the variation. The numerals, the titles and the captions are all set in your face. - Your colours. The band asks for base behind contrast, and the chip inverts that pair; both chains end on a colour WordPress itself guarantees, so neither can resolve to nothing. Every frame rule is currentColor, so the frames follow your text wherever your theme puts it. - Your spacing scale. The band padding, the frame mat, the gap under each chip and the gutters between columns are spacing presets, so a theme with a generous scale gets an airier run. - Your images. The frames include example photographs to show the composition, with the aspect ratio and scale: cover already set. Choose Replace to use your own screenshots; the examples are photographs, not software screenshots. ### What it decides for itself - Full bleed with its own 1240px measure, its own ground and its own vertical padding, because it is built to sit between other sections and cannot borrow air or colour from a neighbour. - 16:10. Wide enough to read as an application window and shallow enough that four of them fit across the band without the captions falling off the fold. A UI screenshot in a 4:3 frame reads as a photograph. - The mat. Each frame is a currentColor hairline with a small pad inside it, so the chip laps onto paper rather than onto pixels, and a screenshot with a white background still has an edge. - The type ramp. A tracked eyebrow, a display heading, a 40rem lede, then captions at a 15px floor. The chip's 2rem numeral against the 13px eyebrow is the scale collision the section is built around. - Four columns with no widths. Above 782px WordPress gives width-less columns an equal basis, so the four screens are exactly equal; below it they stack, and each step becomes frame, chip, caption in turn. - The closing note is held to 29rem, in a nested constrained group, so it reads at about 70 characters instead of running the full width of the four screens above it. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at 2rem Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin Nothing. Core blocks only: group, columns, column, image, paragraph, heading. No script, no stylesheet, nothing to keep updated. ### Notes - Every colour is a fallback chain ending on a colour WordPress guarantees, and every rule is currentColor. - Example image URLs travel with the copied markup. Replace these photographs with screenshots of the process you are explaining. - If you change the numeral's font size, change the negative margin on its row to half the chip's new height, or the lap stops being a lap. ### 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 ## Steps screens: common questions Does Steps screens need a plugin? No. It is built only from core WordPress blocks (group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Steps screens match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Steps screens have? 2: Numeral on the seam and Titles on the seam. 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 Steps screens free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 18KB of core-block markup, 4 blocks (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 Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.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)Timeline Availability calendar The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark. An open month carries a heavy top rule and a filled mark, a nearly full one a heavy rule and names the days left, and a booked month is struck through with an empty mark. A short line on how dates are held and one underlined link sit beside the heading. States no colour and no font of its own. (https://patternpaste.com/pattern/availability-calendar.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 How it works Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks group, heading, image, paragraph Presets color 5, spacing 6, font-size 3 WordPress 7.0+ Continue exploring ## Next in How it works Explore all 9 How it works patterns (https://patternpaste.com/patterns/steps/) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps run A process as one horizontal run: three display numerals across the band, each over a short title and a packed line of copy, with a single hairline threading the gaps between the numerals at numeral height so the row reads as a sequence rather than as three separate cards. How it works Preview pattern (https://patternpaste.com/pattern/steps-run.html) Shot in Twenty Twenty-Five How it works No plugin needed ### Process switchback Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order. How it works Preview pattern (https://patternpaste.com/pattern/steps-switchback.html) Shot in Twenty Twenty-Five How it works No plugin needed ### TPO permission steps A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line. How it works Preview pattern (https://patternpaste.com/pattern/tpo-permission-steps.html)