Build

Pinned Panels & Scroll Swap

Two widgets that hold part of the page still while the rest advances — the effect that makes a long page feel designed rather than endless.

Both pin something in place and change its companion as the visitor scrolls. They differ in what they are for.

NovaKit Scroll Swap	Two columns. One stays, the other advances — text beside a screenshot, most often.
NovaKit Pinned Panels	Full-width panels that advance through a pinned section, one replacing the next.

Neither previews on the editor canvas. Both depend on scrolling, and an element hidden until you scroll cannot be edited. Use Elementor’s Preview, or view the page. That is deliberate, not a limitation to work around.

NovaKit Scroll Swap #

Two columns, several steps. As the visitor scrolls, one column holds and the other changes — the pattern where a phone mockup stays put while the feature description beside it advances.

Pin Mode

The one decision that changes everything else:

Media Pinned	The image holds; the text scrolls past it. The usual choice.
Content Pinned	The text holds; the images advance beside it.
Both Pinned	Neither moves. Both swap in place as you scroll through the section.

The rest of the settings

Setting	Default	Accepts
Media Position	Right	Left or Right
Content Alignment	—	Top, Centre, Bottom
Content Animation	—	Fade, Slide, Scale, Fade Blur, Reveal (clip)
Media Animation	—	The same five
Swap Trigger Point	—	How far down the screen a step becomes active
Dim Inactive	—	Fades the steps that are not current
Pin Offset	—	Pixels, to clear a sticky header
Turn Off Under	—	A breakpoint below which pinning stops
Show Numbers	—	Numbers each step
Media Column Width	—	How the two columns divide

Each Step holds a title, body text and an image.

Set Pin Offset if your header is sticky. Without it the pinned column pins to the top of the window, which is underneath the header — so the first line of every step sits behind it. The offset should match your header’s height.

Turn Off Under earns its keep on phones. Pinning on a small screen means a visitor scrolls and nothing appears to move, which reads as a broken page. Below the breakpoint the steps become an ordinary stacked list, which is what a phone wants anyway.

NovaKit Pinned Panels #

Full-width panels rather than two columns. The section pins, and each panel gives way to the next as the visitor scrolls — a process, a set of stages, a story in three beats.

Setting	Default	Accepts
Panel Height	—	How tall each panel is while pinned
Pin Start	—	Where the section pins relative to the window
Disable Pinning Below	—	A breakpoint below which it becomes a normal stack
Show Numbers	—	Numbers each panel
Gap Between Panels	—	Spacing when not pinned
Min Height	—	A floor for short panels

Each panel takes an eyebrow, title, subtitle, body and image, its own background for light and dark mode, and an image ratio. Or set Panel Template to a Global Block and design the panel yourself.

Three or four panels is the range. Each one holds the visitor in place while they scroll through it, so six panels means a long stretch where the page appears not to move. Pinning buys attention; too much of it feels like being stuck.

When it does not behave #

Symptom	Usual cause
Nothing pins in the editor	Expected. Use Preview.
Content sits behind the header	Pin Offset or Pin Start is not set to clear a sticky header.
The section jumps when it releases	Something in the pinned area has its own CSS transition. Remove it — two things animating the same position fight each other.
It feels broken on a phone	Set Turn Off Under or Disable Pinning Below.
Steps advance too fast or too slowly	Panel Height or Swap Trigger Point — taller panels mean more scrolling per step.