Start free trial

Interactive Content Slider

Catalogue accessNeeds plugin

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.

ThemePreview sizeMotion
As authoredColourCornersPlate
Twenty Twenty-Five·1280pxPlays best in its own window

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What you change first

  1. Replace all three Cover images and their alt text from the Media Library.
  2. 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.
  3. Keep the text concise enough to remain a hero at small widths; send the detailed story to the linked page.
  4. 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

  1. Replace all three Cover images and their alt text from the Media Library.
  2. 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.
  3. Keep the text concise enough to remain a hero at small widths; send the detailed story to the linked page.
  4. 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.

The markup

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 copyWhat you copy is yours forever. Cancel whenever.

Back to the library

Continue exploring

Next in Interactive

Explore all 36 interactive patterns Also in Hero

Feature slider walkthrough rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFeaturesFeaturesNeeds 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 blocksOpen preview
Portfolio slider editorial rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryEditorialNeeds 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 blocksOpen preview
Testimonial slider proof rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTestimonialsTestimonialsNeeds 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 blocksOpen preview