Story Scroll Hero

What this section does

Scroll-driven storytelling hero — each item owns one full screen of scroll

Where it goes

• Can be used at most 1 time(s) on one page.
• This section is in every plan — no extra plugin needed.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Cinematic

  Freecinematic

  Full-bleed crossfading images with a slow Ken Burns zoom, huge centered type and a vertical progress rail. Each chapter owns one full screen of scroll

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Split Parallax

  Freesplit-parallax

  A text column beside an oversized media panel. As you scroll the media parallax-slides and the copy swaps with a translate + fade

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Stacked Cards

  Page Editorstacked-cards

  Each next chapter's giant rounded media card slides up over the previous one — a tactile, deck-style reveal

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Kinetic Split

  Page Editorkinetic-split

  Scroll-choreographed: text sweeps in from the left, image counter-glides from the right, they cross and settle, then fly out opposite ways as the next chapter enters. Eased, with a slight rotation

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Arc Reveal

  Page Editorarc-reveal

  Content travels on curved quarter-circle paths instead of straight lines — the media swings in from the side while rotating and the text rises on its own arc

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Flip Through

  Page Editorflip-through

  Each chapter is a full-bleed card that flips in like a turning page — edge-on, swinging flat to face you, then flipping away as the next page turns in behind. True 3D

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Editorial Swap

  Page Editoreditorial-swap

  Contained (not full-screen) big bold text beside a framed image. On scroll the text sweeps out the left edge while the image glides to the text's spot and crossfades to the next chapter; the next text arrives from off the right edge. Gentle bow arcs

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Orbit Duo

  Page Editororbit-duo

  Big bold text and a framed image orbit around the centre on a circular path, swapping sides as you scroll while crossfading to the next chapter. Purely circular motion, never a straight slide

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Poster Swap

  Page Editorposter-swap

  Image-forward: a dominant big poster image (over half the stage) with huge bold text overlapping its edge. The poster glides in on a bow-arc while the text sweeps the opposite way and crossfades to the next chapter

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Duo Frames

  Page Editorduo-frames

  Two framed photos per chapter — a large primary plus a smaller accent (the next chapter's photo peeking in) — beside big bold text. Staggered bow-arcs keep multiple images in play

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

• Filmstrip

  Page Editorfilmstrip

  A horizontal gallery: three chapters at once — previous and next images peek at the edges, smaller and dimmed, while the current is big and centred. Scrolling advances the strip along a gentle arc

  Specific to this style: parallaxIntensity, overlayOpacity, showProgressRail, showScrollHint, scrollHintText, imageSide, items

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height