WordPress hero section patterns, Pattern Paste Canonical: https://patternpaste.com/patterns/hero/ 42 layout options 25 Styled looks No plugin needed # WordPress hero section patterns Copy a WordPress hero section into the Gutenberg editor. Choose a text-led opener, a split image layout or a cover-led introduction for your block theme. 67 layout options shown Showing 1–50 of 67 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 Cover No plugin needed ## Cover cascade Three photographs of different sizes and shapes dealt across the page like prints on a table, each lapping the one before it down and across, edged in a thin mat of your theme's base colour, beside a display heading, lede and button on your page ground. Cover Preview pattern (https://patternpaste.com/pattern/cover-cascade.html) Shot in Twenty Twenty-Five Cover No plugin needed ## Cover lap A page opener where a full-bleed photograph gives way to a band of your theme's paper, and an ink plate carrying the eyebrow, headline, lede and button straddles the edge between them: half on the picture, half on the page. Cover Preview pattern (https://patternpaste.com/pattern/cover-lap.html) Shot in Twenty Twenty-Five Cover No plugin needed ## Cover mosaic Five photographs as cover tiles locked into one bento grid: a large square, a tall portrait, two small tiles and a wide panorama, with an ink slab carrying the eyebrow, heading, lede and button in the sixth cell. Cover Preview pattern (https://patternpaste.com/pattern/cover-mosaic.html) Shot in Twenty Twenty-Five Cover No plugin needed ## Cover seam stamp Two full-height photographs side by side at full bleed with no gap: the left under a heavy veil of your theme's contrast colour carrying an eyebrow, display headline, lede and button, the right clean. Cover Preview pattern (https://patternpaste.com/pattern/cover-seam-stamp.html) Shot in Twenty Twenty-Five Cover No plugin needed ## Cover seams Three full-bleed photographs stacked edge to edge, each a chapter, with a numbered plate straddling every seam: half on one photograph and half on the next, alternating left and right, and the last plate stepping off the third photograph onto your theme's paper. Cover Preview pattern (https://patternpaste.com/pattern/cover-seams.html) Shot in Twenty Twenty-Five Cover No plugin needed ## Cover veil A full-bleed cover whose photograph is reduced to grain behind a display headline by a heavy veil of your theme's contrast colour. Cover Preview pattern (https://patternpaste.com/pattern/cover-veil.html) Shot in Twenty Twenty-Five Cover No plugin needed ## Cover window A full-bleed cover whose photograph sits under a heavy veil of your theme's contrast colour, with display type on one side and, on the other, a second cover showing the same photograph with no veil at all, with the same focal point, so it reads as a window cut through the veil. Cover Preview pattern (https://patternpaste.com/pattern/cover-window.html) Shot in Twenty Twenty-Five Stats No plugin needed ## Date in figures One date made the headline: a dark slab with a small label and heading over the day, month and year as three equal figures at monumental size, each with a small word beneath and a hairline between them, then one line of place and an Add to your calendar button. Stats Preview pattern (https://patternpaste.com/pattern/date-in-figures.html) Shot in Twenty Twenty-Five Features No plugin needed ## Feature heroic spotlight A cinematic feature showcase pairing a prominent hero media plate with a 3-column capability foundation underneath. Features Preview pattern (https://patternpaste.com/pattern/feature-heroic-spotlight.html) Shot in Twenty Twenty-Five Hero No plugin needed ## 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. Hero Preview pattern (https://patternpaste.com/pattern/hero-aperture.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero arch A shop or studio hero with the photograph cut into an arch, rounded across the top and square at the foot, beside a display headline, a short lead and two actions. Hero Preview pattern (https://patternpaste.com/pattern/hero-arch.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero column portrait An opening section whose photograph stands as a column rather than a band: a tracked eyebrow, a display headline, a lede held to a 30rem measure and two actions on the left, and on the right a single portrait cover taller than everything beside it, carrying nothing but one tracked caption on an opaque plate at its foot. Hero Preview pattern (https://patternpaste.com/pattern/hero-column-portrait.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero corner notes An image-led architecture opening with a compact headline plate in the upper-left corner and a project invitation in the lower-right. Hero Preview pattern (https://patternpaste.com/pattern/hero-corner-notes.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero cover bookmark A bright café photograph fills a full-width cover behind a tall, inset copy panel. Hero Preview pattern (https://patternpaste.com/pattern/hero-cover-bookmark.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero cover rail A full-bleed hero on your own photograph, with a 1px hairline running down the middle of the picture to divide the statement from the facts. Hero Preview pattern (https://patternpaste.com/pattern/hero-cover-rail.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero crown sheet A trade hero where a site-survey sheet laps up over the corner of a tall photograph: an oversized headline, a short line, a call button and a text link centred beside a 4:5 picture, and over its foot a framed card listing the tree, its height and the work proposed on ruled lines and the promise of a written quote in 48 hours. Hero Preview pattern (https://patternpaste.com/pattern/hero-crown-sheet.html) Shot in Twenty Twenty-Five Hero No plugin needed ## The Dispatch A magazine hero with a featured cover story and two secondary stories in a static issue layout. Hero Preview pattern (https://patternpaste.com/pattern/hero-dispatch.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Editorial still life An editorial hero with an offset object photograph, copy, a second small still and native story disclosure. Hero Preview pattern (https://patternpaste.com/pattern/hero-editorial-still-life.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero flex row A hero built on a wrapping flex row instead of columns: one loose 30rem block holding a tracked eyebrow, a display headline and a single ruled action, and beside it four small ruled facts, each a tracked label over a short value. Hero Preview pattern (https://patternpaste.com/pattern/hero-flex-row.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero horizon band A coastal-stay opening with a broad opaque title band set across a bright full-width photograph. Hero Preview pattern (https://patternpaste.com/pattern/hero-horizon-band.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero index An opening that doubles as a table of contents: a tracked eyebrow and one display headline held to a 30rem measure, and beside it a ruled index of four numbered entries, each a tracked numeral, a short title and one line of description, closed top and bottom by currentColor hairlines. Hero Preview pattern (https://patternpaste.com/pattern/hero-index.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Index across An opening that doubles as a table of contents, read as a row rather than as a rail: a tracked eyebrow, one display headline held to a 30rem measure and a lede under it, then four numbered entries four-across beneath, each under its own currentColor hairline with one continuous rule closing the strip, and a flat action below. Hero Preview pattern (https://patternpaste.com/pattern/hero-index-row.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero invitation card A wedding hero that is the invitation itself: a full-bleed photograph under a light veil carrying a centred double-ruled card in the order a printed invitation keeps, the families line, the two names stacked around an italic ampersand, the invitation line, the date and time, the venue, a hairline and an RSVP button beside a text link. Hero Preview pattern (https://patternpaste.com/pattern/hero-invitation-card.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero landscape wings A broad coastal photograph is framed by two narrow, shorter photographic wings under an oversized headline and compact introduction. Hero Preview pattern (https://patternpaste.com/pattern/hero-landscape-wings.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero ledger A full-bleed opening section that doubles as a spec sheet: a display headline, a short lede and one action fill the left, while the right holds three ruled rows, each a tracked label over a value set large enough to read as content rather than fine print. Hero Preview pattern (https://patternpaste.com/pattern/hero-ledger.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero measure A hero held in the left half of a wide band: a tracked eyebrow, a headline running to a 44rem measure, a lede locked to 28rem under it, and one text action ruled with a currentColor underline. Hero Preview pattern (https://patternpaste.com/pattern/hero-measure.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero media and text A hero built on Media & Text rather than columns, so the photograph runs off the side of the screen while the words stay on the page's own measure. Hero Preview pattern (https://patternpaste.com/pattern/hero-media-text.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero name and contact strip A portfolio home hero where the person's name is the headline, set at the width of the page, then a hairline with one line of discipline and place, a short sentence, a filled and a text-link action and an availability note, then a strip of five photographs of equal height, each with a frame number and place beneath like a contact sheet. Hero Preview pattern (https://patternpaste.com/pattern/hero-name-contact-strip.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero next slots A clinic or practice hero: a display headline, a short lead and two text links beside a square photograph, with a card of the next free appointments lapping the photograph's foot. Hero Preview pattern (https://patternpaste.com/pattern/hero-next-slots.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero open now stamp A café home hero: a large photograph with a round Open today stamp giving the hours lapping its bottom corner, and beside it a label, the headline, a line of welcome, two actions and the address on a rule. Hero Preview pattern (https://patternpaste.com/pattern/hero-open-now-stamp.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero plate on paper A hero that is a card laid on the page rather than the page's own top edge: a full-bleed band of your theme's paper with generous air on all four sides, holding one inset plate of your contrast colour that carries the whole hero, eyebrow, headline, lede and two buttons. Hero Preview pattern (https://patternpaste.com/pattern/hero-plate-on-paper.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero quote open A hero that opens in someone else's voice: one quoted sentence set at display size on a 44rem measure, a currentColor hairline under it, and beneath the hairline a tiny tracked attribution row and one action. Hero Preview pattern (https://patternpaste.com/pattern/hero-quote-open.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero reel A full-bleed video cover, 44rem tall, with every word of it packed into the bottom-left corner: a tracked eyebrow, a display headline held to a measure that stays 26rem up to a 1300px window and opens to 38rem on a wide one, one line of orientation and two buttons. Hero Preview pattern (https://patternpaste.com/pattern/hero-reel.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero right weight A picture-led hero that reverses the usual hierarchy: the photograph takes the wide right column at a 4:3 crop and the words are a narrow 38% caption beside it, set small and hung from the same bottom line. Hero Preview pattern (https://patternpaste.com/pattern/hero-right-weight.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero slab over still Two full-bleed slabs stacked on one hard edge: an inverted band carrying an eyebrow, a display headline on a 32rem measure and two buttons, and beneath it a full-bleed picture that carries no type at all. Hero Preview pattern (https://patternpaste.com/pattern/hero-slab-over-still.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero stack rules An opening section ruled like a ledger: three full-measure bands divided by currentColor hairlines, a tracked eyebrow and a date on the top line, the headline alone in the tall middle band at up to 104px, and a lede with two actions on the closing line. Hero Preview pattern (https://patternpaste.com/pattern/hero-stack-rules.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Doubled rules The composition changes: the headline is cut in half by a hairline and set across two bands instead of one, so the ledger reads as four rows and the sentence is something the ruling happens to rather than something it frames. Variation of Hero stack rules Preview pattern (https://patternpaste.com/pattern/hero-stack-rules.html#variant=rules-doubled) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero statement An opening section with nothing in it but the sentence: one statement set at extreme display size on a narrow measure, a short rule under it, a single tracked meta line, and two actions. Hero Preview pattern (https://patternpaste.com/pattern/hero-statement.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero tint wash A full-bleed photographic opener with exactly three things on it: one two-word headline at up to 128px, a 12px tracked line sitting straight underneath it, and one button. Hero Preview pattern (https://patternpaste.com/pattern/hero-tint-wash.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Hero, two covers An opening built from two identical photograph frames side by side with a hairline gutter between them. Hero Preview pattern (https://patternpaste.com/pattern/hero-two-covers.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Waitlist hero A launch hero built around one oversized action: a short headline, a single line of copy, then a full-width button slab with a tiny reassurance line under it, and three small proof numerals on a ruled foot beneath that. Hero Preview pattern (https://patternpaste.com/pattern/hero-waitlist.html) Shot in Twenty Twenty-Five Hero No plugin needed ## Split hero An asymmetric hero with a headline, supporting copy and actions in one top-aligned column, beside a compact four-row facts panel. Hero Preview pattern (https://patternpaste.com/pattern/split-hero.html) Cover Own palette ## Champagne and rose , Cover cascade (https://patternpaste.com/pattern/cover-cascade.html#variant=champagne-and-rose) Cover cascade Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/cover-cascade.html#variant=champagne-and-rose) Cover Own palette ## Track red and bone , Cover mosaic (https://patternpaste.com/pattern/cover-mosaic.html#variant=track-red-and-bone) Cover mosaic Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/cover-mosaic.html#variant=track-red-and-bone) Cover Own palette ## Clubhouse and cream , Cover seam stamp (https://patternpaste.com/pattern/cover-seam-stamp.html#variant=clubhouse-and-cream) Cover seam stamp Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/cover-seam-stamp.html#variant=clubhouse-and-cream) Cover Own palette ## Buttercream and copper , Cover seams (https://patternpaste.com/pattern/cover-seams.html#variant=buttercream-and-copper) Cover seams Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/cover-seams.html#variant=buttercream-and-copper) Cover Own palette ## Mahogany and honey , Cover veil (https://patternpaste.com/pattern/cover-veil.html#variant=mahogany-and-honey) Cover veil Authored font stack with theme and device fallbacks Mahogany and honey (https://patternpaste.com/pattern/cover-veil.html#variant=mahogany-and-honey)Vow (https://patternpaste.com/pattern/cover-veil.html#variant=vow) Cover Own palette ## Vow , Cover veil (https://patternpaste.com/pattern/cover-veil.html#variant=vow) Cover veil Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/cover-veil.html#variant=vow)Vow set: whole pages (https://patternpaste.com/sets/vow/) Cover Own palette ## Heath and lichen , Cover window (https://patternpaste.com/pattern/cover-window.html#variant=heath-and-lichen) Cover window Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/cover-window.html#variant=heath-and-lichen) Stats Own palette ## Vow , Date in figures (https://patternpaste.com/pattern/date-in-figures.html#variant=vow) Date in figures Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/date-in-figures.html#variant=vow)Vow set: whole pages (https://patternpaste.com/sets/vow/) Hero Own palette ## Crumb , Hero arch (https://patternpaste.com/pattern/hero-arch.html#variant=crumb) Hero arch Authored font stack with theme and device fallbacks Crumb (https://patternpaste.com/pattern/hero-arch.html#variant=crumb)Peony and fern (https://patternpaste.com/pattern/hero-arch.html#variant=peony-and-fern)Crumb set: whole pages (https://patternpaste.com/sets/crumb/) Hero Own palette ## Porcelain and cobalt , Hero corner notes (https://patternpaste.com/pattern/hero-corner-notes.html#variant=porcelain-and-cobalt) Hero corner notes Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-corner-notes.html#variant=porcelain-and-cobalt) Hero Own palette ## Parchment and juniper , Hero cover bookmark (https://patternpaste.com/pattern/hero-cover-bookmark.html#variant=parchment-and-juniper) Hero cover bookmark Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-cover-bookmark.html#variant=parchment-and-juniper) Hero Own palette ## Bough , Hero crown sheet (https://patternpaste.com/pattern/hero-crown-sheet.html#variant=bough) Hero crown sheet Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-crown-sheet.html#variant=bough)Bough set: whole pages (https://patternpaste.com/sets/bough/) Hero Own palette ## The Dispatch styled , The Dispatch (https://patternpaste.com/pattern/hero-dispatch.html#variant=paper-and-vermilion) The Dispatch Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-dispatch.html#variant=paper-and-vermilion) Hero Own palette ## Editorial still life styled , Editorial still life (https://patternpaste.com/pattern/hero-editorial-still-life.html#variant=warm-gallery) Editorial still life Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-editorial-still-life.html#variant=warm-gallery) Hero Own palette ## Oat and persimmon , Hero horizon band (https://patternpaste.com/pattern/hero-horizon-band.html#variant=oat-and-persimmon) Hero horizon band Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-horizon-band.html#variant=oat-and-persimmon) Hero Own palette ## Vow , Hero invitation card (https://patternpaste.com/pattern/hero-invitation-card.html#variant=vow) Hero invitation card Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-invitation-card.html#variant=vow)Vow set: whole pages (https://patternpaste.com/sets/vow/) Hero Own palette ## Mist and lagoon , Hero landscape wings (https://patternpaste.com/pattern/hero-landscape-wings.html#variant=mist-and-lagoon) Hero landscape wings Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-landscape-wings.html#variant=mist-and-lagoon) Hero Own palette ## Spur , Hero media and text (https://patternpaste.com/pattern/hero-media-text.html#variant=spur) Hero media and text Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-media-text.html#variant=spur)Spur set: whole pages (https://patternpaste.com/sets/spur/) Hero Own palette ## Folio , Hero name and contact strip (https://patternpaste.com/pattern/hero-name-contact-strip.html#variant=folio) Hero name and contact strip Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-name-contact-strip.html#variant=folio)Folio set: whole pages (https://patternpaste.com/sets/folio/) Hero Own palette ## Mend , Hero next slots (https://patternpaste.com/pattern/hero-next-slots.html#variant=mend) Hero next slots Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-next-slots.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) Hero Own palette ## Crumb , Hero open now stamp (https://patternpaste.com/pattern/hero-open-now-stamp.html#variant=crumb) Hero open now stamp Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/hero-open-now-stamp.html#variant=crumb)Crumb set: whole pages (https://patternpaste.com/sets/crumb/) Hero Own palette ## Mend , Hero plate on paper (https://patternpaste.com/pattern/hero-plate-on-paper.html#variant=mend) Hero plate on paper Authored font stack with theme and device fallbacks Mend (https://patternpaste.com/pattern/hero-plate-on-paper.html#variant=mend)Moss and cream (https://patternpaste.com/pattern/hero-plate-on-paper.html#variant=moss-and-cream)Mend set: whole pages (https://patternpaste.com/sets/mend/) Hero Own palette ## Mend , Hero slab over still (https://patternpaste.com/pattern/hero-slab-over-still.html#variant=mend) Hero slab over still Authored font stack with theme and device fallbacks Mend (https://patternpaste.com/pattern/hero-slab-over-still.html#variant=mend)Slate and mint (https://patternpaste.com/pattern/hero-slab-over-still.html#variant=slate-and-mint)Mend set: whole pages (https://patternpaste.com/sets/mend/) Hero Own palette ## Stated wash , Hero tint wash (https://patternpaste.com/pattern/hero-tint-wash.html#variant=stated-wash) Hero tint wash Uses your theme’s typeface Explore this design (https://patternpaste.com/pattern/hero-tint-wash.html#variant=stated-wash) Hero Own palette ## Folio , Split hero (https://patternpaste.com/pattern/split-hero.html#variant=folio) Split hero Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/split-hero.html#variant=folio)Folio set: whole pages (https://patternpaste.com/sets/folio/) ## Choose a layout for your page Start with the message and the main action. Use a text-led hero for a strong proposition, a split layout when the image needs its own space, or a cover when photography sets the scene. 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/)