Pattern Paste
Subscribe

42 layout options25 Styled looksNo 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

Live preview at its actual size. Scroll to explore the whole section.

Explore pattern

Cover cascade rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo 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.

CoverPreview pattern
Cover lap rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo 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.

CoverPreview pattern
Cover mosaic rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo 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.

CoverPreview pattern
Cover seam stamp rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo 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.

CoverPreview pattern
Cover seams rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo 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.

CoverPreview pattern
Cover veil rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo 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.

CoverPreview pattern
Cover window rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCoverNo 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.

CoverPreview pattern
Date in figures rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveStatsNo 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.

StatsPreview pattern
Feature heroic spotlight rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFeaturesNo plugin needed

Feature heroic spotlight

A cinematic feature showcase pairing a prominent hero media plate with a 3-column capability foundation underneath.

FeaturesPreview pattern
Hero aperture rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero arch rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero column portrait rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero corner notes rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero cover bookmark rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo plugin needed

Hero cover bookmark

A bright café photograph fills a full-width cover behind a tall, inset copy panel.

HeroPreview pattern
Hero cover rail rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero crown sheet rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
The Dispatch rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo plugin needed

The Dispatch

A magazine hero with a featured cover story and two secondary stories in a static issue layout.

HeroPreview pattern
Editorial still life rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo plugin needed

Editorial still life

An editorial hero with an offset object photograph, copy, a second small still and native story disclosure.

HeroPreview pattern
Hero flex row rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero horizon band rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo plugin needed

Hero horizon band

A coastal-stay opening with a broad opaque title band set across a bright full-width photograph.

HeroPreview pattern
Hero index rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Index across rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero invitation card rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero landscape wings rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo plugin needed

Hero landscape wings

A broad coastal photograph is framed by two narrow, shorter photographic wings under an oversized headline and compact introduction.

HeroPreview pattern
Hero ledger rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero measure rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero media and text rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero name and contact strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero next slots rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero open now stamp rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero plate on paper rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero quote open rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero reel rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero right weight rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero slab over still rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero stack rules rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Doubled rules, a variation of Hero stack rules rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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 rulesPreview pattern
Hero statement rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero tint wash rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero, two covers rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo plugin needed

Hero, two covers

An opening built from two identical photograph frames side by side with a hairline gutter between them.

HeroPreview pattern
Waitlist hero rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Split hero rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern

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. Read how we test patterns.

All Core Patterns