Kinetic Image Hero for photographichero sections that feel designed.

Kinetic Image Hero is a powerful Gutenberg block for creating photographic hero sections that feel thoughtfully designed. Combine responsive image compositions, precise focal points, elegant typography, and interactive motion to build distinctive WordPress landing pages — all without writing code.

Live layout playground CSS Demo Only
Built for Gutenberg

Photography that feels composed, not dropped in.

Switch layouts to preview how one image set can become five different hero compositions.

A strong hero starts with hierarchy and imagery. Kinetic Image Hero gives you the
composition tools first, then lets motion, reveal,
atmosphere, and depth enhance the result.

Kinetic Image Hero
Live

DEMO

One hero component instead of a stack of layout fixes.

A basic Gutenberg hero is easy. A multi-image hero with deliberate cropping, responsive behavior, content hierarchy, CTAs, reveals and motion usually takes multiple blocks plus custom CSS. Image Hero packages that workflow into one focused block.

FIVE PRESENTATION SYSTEMS

Choose the composition that
matches the story.

Start simple with a single image or duo layout. Move into stacked and editorial compositions when you need a more expressive PRO hero.

Single

One strong photograph with clear content hierarchy.

Split Duo

Two images sharing a controlled visual field.

Offset Duo

Asymmetric composition with more editorial energy.

PRO

Stacked Cards

Layered three-image treatment with dimensional presence.

PRO

Editorial Collage

A composed multi-image grid for campaign-level art direction.

Use the block when the image arrangement itself carries the visual direction of the page.

  • Keep key subjects in frame with focal-point-aware image positioning.
  • Create visual hierarchy with one, two or three coordinated images.
  • Keep copy and CTAs attached to the composition instead of rebuilding the hero from separate blocks.
  • Add motion intentionally with hover, reveal, depth and scroll-oriented options.

Use Image Hero when you want photography, product imagery or campaign artwork to feel art-directed rather than dropped into a generic banner.

  • Agency and studio homepages
  • Portfolio and case study intros
  • Product and service launches
  • Editorial and magazine-style landing pages
  • Hospitality, architecture and lifestyle websites
  • Campaign pages that need strong photographic direction

Build the first screen around the thing visitors should remember.

Kinetic Image Hero is most useful when photography or campaign artwork
should establish the page before the visitor scrolls.

  • Use Hero Mesh for generative atmosphere and Image Hero for photographic art direction
  • Reduced-motion-aware behavior across KineticHub motion features

Pair positioning copy with project imagery in a controlled first-screen composition.

Keep buildings and interiors framed correctly across desktop and mobile.

Stage hero imagery, supporting detail shots and strong CTAs as one component.

Open a project or case study with photography that feels intentionally placed.

Use immersive destination photography without losing readable content hierarchy.

Build magazine-inspired image layouts without creating the collage manually.

Combine a clear offer, proof image and CTA in a more distinctive hero.

Use premium compositions and motion for launch moments that need extra visual impact.

Free gives you the complete hero workflow. Kinetic Image Hero PRO expands the art direction.

KineticHub Free includes a genuinely useful Image Hero with one or two images, three compositions, full content and core visual behavior. PRO adds the third image, premium layouts, mobile image replacements, advanced reveals, motion, atmosphere and smart visual add-ons.

FeatureKineticHub FreeKineticHub PRO
Authored images1–2 imagesUp to 50 items
PresentationsSingle, Split Duo, Offset DuoIncluded + styling
Eyebrow, badge, heading, descriptionIncludedIncluded
CTA buttonsUp to 2Included
Focal-point image positioningIncludedIncluded
Responsive image handlingIncludedIncluded + mobile image replacements
Card Focus + Smart ReadabilityIncludedIncluded + advanced add-ons
Motion triggerHoverHover, Scroll, Scroll + Hover
Image revealsCore revealsClip, Blur → Sharp, stagger
AtmosphereNone, Soft Glow, Gradient Washpremium backdrop treatments
Advanced depth / interactionNot includedScroll depth, pointer depth, scroll drift, stack fan, reactive spotlight, focus reveal
PresetsClean Split, Floating DuoLayered Studio, Editorial Showcase, Cinematic Edge

Everything you need to know before choosing a plan — licensing, refunds, renewals, and what happens after your first year.

What is Kinetic Image Hero?

Kinetic Image Hero is a Gutenberg block for building art-directed photographic hero sections with one to three images, built-in content, focal-point-aware compositions and optional motion.

How is it different from a normal WordPress Cover or Group hero?

A Cover or Group is excellent for simple hero sections. Image Hero is for layouts where the arrangement of multiple images, focal-point cropping, responsive art direction, built-in content and motion need to work as one component.

Which layouts are included in KineticHub Free?

Free includes Single, Split Duo and Offset Duo presentations with one or two authored images, full hero content, focal-point controls, core readability tools, basic reveals and atmosphere options.

Want to explore the basics first? Kinetic Image Hero is included in the free version of KineticHub, available directly on WordPress.org. Upgrade to PRO when you’re ready for advanced image compositions, motion effects, and interactive features.

What does PRO add?

PRO adds a third image, Stacked Cards and Editorial Collage, mobile image replacements, advanced motion and reveal behavior, stagger, premium backdrops, smart add-ons and premium presets.

Can I use separate images for mobile?

Yes in PRO. Mobile image replacements let you change the source when the desktop photograph or crop is not the right art direction for a narrow screen.

Can Image Hero work with Hero Mesh or another background?

Yes. Image Hero supports a transparent background workflow, so you can combine the photographic composition with a parent background treatment or a compatible Kinetic Hero Mesh setup.

Does the block support motion without making the hero feel busy?

Yes. The workflow is composition-first. Free includes core hover and reveal behavior, while PRO adds scroll-driven depth, pointer depth, drift, spotlight, focus and stagger options for designs that need more movement.