Hero slider cover, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-slider-cover.html Interactive (https://patternpaste.com/interactive/) Content Slider (https://patternpaste.com/interactive/content-slider/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Hero slider cover A full-width hero slideshow with three bright edge-to-edge photographs and compact opaque panels, each carrying a headline, concise introduction and action. Needs the companion plugin, which comes with your access; without it, the three native Cover slides form a plain stack. Reduced motion keeps the manual horizontal row without smooth transitions. States no font of its own. Start here ## What you change first - Replace all three Cover images and their alt text from the Media Library. - Rewrite each label, h3, introduction and button together inside its named Slide group, including replacing the example /contact/ button URL with the destination for that story. - Keep the text concise enough to remain a hero at small widths; send the detailed story to the linked page. - Change the h3 level to suit the page hierarchy. AI tools can safely add, remove or reorder Slide groups because the editable structure uses native WordPress blocks. The signature moment ## A full-width photograph introduces each story with one clear headline and action Each slide is a complete editorial hero rather than a cropped gallery card. The photograph stays bright and edge to edge while one compact, opaque text panel keeps the label, headline, introduction and action readable as a unit. Theme handoff ## What comes from where ### From your theme It inherits the typeface and button treatment. The opaque panel uses the guaranteed base ground and contrast text chains; the Cover itself has no darkening veil, so the photograph remains visible without carrying text directly. ### Set by this pattern It decides three full-width slides, no gap, a 42rem Cover frame, bottom-left content and a restrained 32rem text panel. Symmetric responsive gutters keep the panel balanced, while extra bottom space clears the overlaid mobile controls. The scrollbar is hidden because previous and next controls, keyboard navigation, touch and drag remain available. The headlines use a fluid display size outside the theme ladder because their scale establishes the hero composition. 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 ### The signature moment: A full-width photograph introduces each story with one clear headline and action Each slide is a complete editorial hero rather than a cropped gallery card. The photograph stays bright and edge to edge while one compact, opaque text panel keeps the label, headline, introduction and action readable as a unit. ### Why this is not portfolio-slider-editorial or feature-slider-walkthrough The portfolio pattern presents several projects as a visual index with compact captions. The walkthrough teaches one sequence through repeated media-and-copy stages. This pattern gives three independent stories the full hero frame, and every slide can open a different destination or project. Make it yoursVariations and the edits to make first ### What you change first - Replace all three Cover images and their alt text from the Media Library. - Rewrite each label, h3, introduction and button together inside its named Slide group, including replacing the example /contact/ button URL with the destination for that story. - Keep the text concise enough to remain a hero at small widths; send the detailed story to the linked page. - Change the h3 level to suit the page hierarchy. AI tools can safely add, remove or reorder Slide groups because the editable structure uses native WordPress blocks. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme It inherits the typeface and button treatment. The opaque panel uses the guaranteed base ground and contrast text chains; the Cover itself has no darkening veil, so the photograph remains visible without carrying text directly. ### What it decides for itself It decides three full-width slides, no gap, a 42rem Cover frame, bottom-left content and a restrained 32rem text panel. Symmetric responsive gutters keep the panel balanced, while extra bottom space clears the overlaid mobile controls. The scrollbar is hidden because previous and next controls, keyboard navigation, touch and drag remain available. The headlines use a fluid display size outside the theme ladder because their scale establishes the hero composition. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin The plugin turns the three Cover Groups into a manual horizontal slideshow with arrow, keyboard, touch and drag navigation. Without the plugin, the three complete native Covers form a useful plain stack. With reduced motion, the manual horizontal row remains available but transitions no longer scroll smoothly. There is no autoplay and no content is hidden. ### What is not proved The destinations and actions are illustrative editorial copy. 12KB of core-block markup, 7 blocks (button, buttons, cover, group, heading, paragraph, patternpaste/content-slider), 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 - Destination features - Featured projects - Editorial story collections #### Pair with Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html)Stats Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.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, cover, group, heading, paragraph, patternpaste/content-slider Core only NO Chains 30, deepest 2 rungs currentColor no color base, black, contrast, white font-size medium Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Hero (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Features Features Needs plugin ### Feature slider walkthrough An inverted feature section that explains a product in three steps, one at a time: each stage fills the frame with a large photograph and its copy beside it, named in words (Step 1 of 3) and selected with numbered controls below. 7 blocks Open preview (https://patternpaste.com/pattern/feature-slider-walkthrough.html) Shot in Twenty Twenty-Five Gallery Gallery Editorial Needs plugin ### Portfolio slider editorial An editorial portfolio section with four broad image-led project cards and compact caption and project metadata beneath each image. 7 blocks Open preview (https://patternpaste.com/pattern/portfolio-slider-editorial.html) Shot in Twenty Twenty-Five Testimonials Testimonials Needs plugin ### Testimonial slider proof A testimonial section with three generous quote-and-metric cards, one main card and the next card held visibly at the edge. 5 blocks Open preview (https://patternpaste.com/pattern/testimonial-slider-proof.html)