WordPress editorial layout patterns, Pattern Paste Canonical: https://patternpaste.com/patterns/editorial/ 20 layout options 13 Styled looks No plugin needed # WordPress editorial layout patterns Long-form WordPress editorial patterns: article sections with a measure, a side rail and room to read, built from core blocks for your theme. 33 layout options shown Showing 1–33 of 33 Sort by Per page Lightbox Pattern page Live preview at its actual size. Scroll to explore the whole section. Explore pattern (https://patternpaste.com/patterns/) Shot in Twenty Twenty-Five Team No plugin needed ## About founder story An about-page story told by the founder. Team Preview pattern (https://patternpaste.com/pattern/about-founder-story.html) Shot in Twenty Twenty-Five Team No plugin needed ## About pull quote photo A founder’s story led by a large pull quote on a plate that laps up over an offset pair of photographs, a tall one and a shorter one dropped lower, with a signed attribution, a short paragraph and a text link. Team Preview pattern (https://patternpaste.com/pattern/about-pull-quote-photo.html) Shot in Twenty Twenty-Five Team No plugin needed ## About stacked plates An about-us story set as three stacked plates: a photograph mounted on a pale mat, the mat on a larger inverted plate, and the story itself on a third plate lapped over the lower corner of the frame. Team Preview pattern (https://patternpaste.com/pattern/about-stacked-plates.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## 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. Editorial Preview pattern (https://patternpaste.com/pattern/article-footer.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Bio leads The composition changes rather than the colour: the slip moves to the left and takes two thirds of the measure, portrait and all, and the two exits stack in one narrow ruled column at the right, so the section reads as a card with an index beside it. Variation of Article footer Preview pattern (https://patternpaste.com/pattern/article-footer.html#variant=bio-lead) Shot in Twenty Twenty-Five Editorial No plugin needed ## Article opener The opening of a long read: a ruled strip of tiny metadata, a headline set as large as the section allows beneath it, a standfirst, and a first paragraph that opens with a drop cap at a strict reading measure. Editorial Preview pattern (https://patternpaste.com/pattern/article-opener.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Case study spread One project told in full on a dark slab: a label and a display headline, a large photograph with a smaller one lapping its lower corner and hanging below it, then three columns for the brief, what was done and what it became, the last closing on three big figures, and a client's line under a hairline. Editorial Preview pattern (https://patternpaste.com/pattern/case-study-spread.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Chapter rail A chapter of a guide: a narrow rail on the left carries the chapter numeral at display size and a short contents list, and stays put while the prose on the right scrolls past it. Editorial Preview pattern (https://patternpaste.com/pattern/chapter-rail.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Comments region The comment thread as a ruled record: a long rule under the count, then every comment opened by a currentColor hairline with the name tracked small against a plain date, the comment set at reading size, and the reply link tracked back down to the name's size. Editorial Preview pattern (https://patternpaste.com/pattern/comments-region.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Hanging byline The composition changes rather than the colour: the name and date leave the top of each comment and hang in a narrow left column beside it, so every comment becomes a two column record and the thread reads as a ledger of who said what. Variation of Comments region Preview pattern (https://patternpaste.com/pattern/comments-region.html#variant=thread-hang) Shot in Twenty Twenty-Five Editorial No plugin needed ## Content columns A long-form editorial section held to a strict reading measure, with a narrow sidenote rail hanging outside it: each note sits under its own hairline beside the paragraph it annotates, and drops beneath that paragraph on a phone. Editorial Preview pattern (https://patternpaste.com/pattern/content-columns.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Editorial cover contents A screen-height cover like a magazine's: a heavy veil of your theme's contrast colour over the photograph, a display headline hung in the lower left and a numbered contents list in a narrow column at the top right, each entry a number, a title and one line between hairline rules. Editorial Preview pattern (https://patternpaste.com/pattern/editorial-cover-contents.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Editorial lap A two-frame editorial spread where an inverted headline slab laps up over the first photograph and breaks out of its column. Editorial Preview pattern (https://patternpaste.com/pattern/editorial-lap.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Mirror masthead Frames swapped, the lap breaking right instead of left, and the headline set in caps with open tracking. Variation of Editorial lap Preview pattern (https://patternpaste.com/pattern/editorial-lap.html#variant=mirror-masthead) Shot in Twenty Twenty-Five Editorial No plugin needed ## Figure break A reading column interrupted by one wide photograph: the prose holds a strict measure, the figure breaks out to twice that width, and its caption hangs from a small index at the figure's left edge before the column resumes. Editorial Preview pattern (https://patternpaste.com/pattern/figure-break.html) Shot in Twenty Twenty-Five Gallery No plugin needed ## Gallery spread An editorial spread with a one-sided bleed: a tall 2:3 portrait frame runs off the left edge of the viewport while the type column beside it stops flush with the 1240px measure, and a small 3:2 frame sits under the lede. Gallery Preview pattern (https://patternpaste.com/pattern/gallery-spread.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Newsprint columns A magazine body: a running head on a rule, a wide headline, then the prose packed into two true text columns under it with numbered footnotes gathered on a rule at the foot. Editorial Preview pattern (https://patternpaste.com/pattern/newsprint-columns.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Open letter A statement set as a letter: a centred eyebrow, headline and short rule open it, the body runs left-aligned at a generous size and line height down one narrow measure, and it closes with a sign-off set in italic at display size. Editorial Preview pattern (https://patternpaste.com/pattern/open-letter.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Quote break A reading column broken by one quotation: two hairlines run wider than the measure and between them the line is set at display size, with its source on a short rule beneath, before the prose resumes at its own width. Editorial Preview pattern (https://patternpaste.com/pattern/quote-break.html) Shot in Twenty Twenty-Five Editorial No plugin needed ## Story two voices How we met, told twice: two monogram circles head two columns, Nell and Sam, then three questions set across the full width, each answered once by each of them side by side, the answers disagreeing a little. Editorial Preview pattern (https://patternpaste.com/pattern/story-two-voices.html) Team Own palette ## Bough , About founder story (https://patternpaste.com/pattern/about-founder-story.html#variant=bough) About founder story Authored font stack with theme and device fallbacks Bough (https://patternpaste.com/pattern/about-founder-story.html#variant=bough)Flax and walnut (https://patternpaste.com/pattern/about-founder-story.html#variant=flax-and-walnut)Mend (https://patternpaste.com/pattern/about-founder-story.html#variant=mend)Spur (https://patternpaste.com/pattern/about-founder-story.html#variant=spur)Bough set: whole pages (https://patternpaste.com/sets/bough/) Team Own palette ## Mend , About founder story (https://patternpaste.com/pattern/about-founder-story.html#variant=mend) About founder story Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/about-founder-story.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) Team Own palette ## Spur , About founder story (https://patternpaste.com/pattern/about-founder-story.html#variant=spur) About founder story Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/about-founder-story.html#variant=spur)Spur set: whole pages (https://patternpaste.com/sets/spur/) Team Own palette ## Crumb , About pull quote photo (https://patternpaste.com/pattern/about-pull-quote-photo.html#variant=crumb) About pull quote photo Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/about-pull-quote-photo.html#variant=crumb)Crumb set: whole pages (https://patternpaste.com/sets/crumb/) Team Own palette ## Bisque and indigo , About stacked plates (https://patternpaste.com/pattern/about-stacked-plates.html#variant=bisque-and-indigo) About stacked plates Authored font stack with theme and device fallbacks Bisque and indigo (https://patternpaste.com/pattern/about-stacked-plates.html#variant=bisque-and-indigo)Crumb (https://patternpaste.com/pattern/about-stacked-plates.html#variant=crumb) Team Own palette ## Crumb , About stacked plates (https://patternpaste.com/pattern/about-stacked-plates.html#variant=crumb) About stacked plates Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/about-stacked-plates.html#variant=crumb)Crumb set: whole pages (https://patternpaste.com/sets/crumb/) Editorial Own palette ## Folio , Case study spread (https://patternpaste.com/pattern/case-study-spread.html#variant=folio) Case study spread Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/case-study-spread.html#variant=folio)Folio set: whole pages (https://patternpaste.com/sets/folio/) Editorial Own palette ## Ink and sand , Editorial lap (https://patternpaste.com/pattern/editorial-lap.html#variant=ink-and-sand) Editorial lap Uses your theme’s typeface Explore this design (https://patternpaste.com/pattern/editorial-lap.html#variant=ink-and-sand) Editorial Own palette ## Straw and rhubarb , Figure break (https://patternpaste.com/pattern/figure-break.html#variant=straw-and-rhubarb) Figure break Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/figure-break.html#variant=straw-and-rhubarb) Gallery Own palette ## Crumb , Gallery spread (https://patternpaste.com/pattern/gallery-spread.html#variant=crumb) Gallery spread Authored font stack with theme and device fallbacks Crumb (https://patternpaste.com/pattern/gallery-spread.html#variant=crumb)Terracotta and linen (https://patternpaste.com/pattern/gallery-spread.html#variant=terracotta-and-linen)Crumb set: whole pages (https://patternpaste.com/sets/crumb/) Editorial Own palette ## Folio , Quote break (https://patternpaste.com/pattern/quote-break.html#variant=folio) Quote break Authored font stack with theme and device fallbacks Folio (https://patternpaste.com/pattern/quote-break.html#variant=folio)Vow (https://patternpaste.com/pattern/quote-break.html#variant=vow)Folio set: whole pages (https://patternpaste.com/sets/folio/) Editorial Own palette ## Vow , Quote break (https://patternpaste.com/pattern/quote-break.html#variant=vow) Quote break Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/quote-break.html#variant=vow)Vow set: whole pages (https://patternpaste.com/sets/vow/) Editorial Own palette ## Vow , Story two voices (https://patternpaste.com/pattern/story-two-voices.html#variant=vow) Story two voices Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/story-two-voices.html#variant=vow)Vow set: whole pages (https://patternpaste.com/sets/vow/) ## Choose a layout for your page Use a measured column for reading and a rail for asides. Keep one idea per section and let headings carry the structure. New to patterns? Learn how to copy and paste a pattern (https://patternpaste.com/how-it-works/). Read how we test patterns (https://patternpaste.com/how-we-test/). All Core Patterns (https://patternpaste.com/patterns/)