Sticky Content Sections
The Sticky Content Sections element in the Salient page builder gives you a way to choreograph how content unfolds while the user scrolls. Depending on the selected layout type, sections can pin, stack, slide horizontally, reveal layered cards, or display synchronized sticky media, all managed through individual section blocks.
This element is ideal for:
- Hero sections
- Experimental landing pages
- Creative portfolios
- Editorial or storytelling layouts
- Micro-interactions that reinforce branding
Note
This element is a parent container and accepts both
Sticky Content Section and Row elements as child items.
Inner rows are available for special use cases such as fixed overlays, decorative elements and absolute positioning, but they do not scroll, pin, or animate like sections and should not be used for the main content structure. You should primarily use the Sticky Content Section element for each section in the animation.
1. Basic Usage
- In the Salient WPBakery page builder, add the Sticky Content Sections element.
- Inside it, add one or more Sticky Content Section (child) elements.
- For each child section, set the media and content you want displayed.
- In the parent element, choose a Type (scroll behavior) and configure the options available for that type.
Global Setting: Type
The Type controls the main scroll behavior and determines which option groups appear.
| Label | Description |
|---|---|
| Sticky Media, Scrolling Content | Classic layout: sticky media on one side, content sections scroll beside it. |
| Sticky Scroll Pinned Sections | Each section pins/sticks as you scroll, stacking vertically with optional animation effects. |
| Horizontal Scrolling | Sections scroll horizontally while the viewport remains fixed vertically. |
| Layered Card Reveal | Cards reveal in a layered stack as you scroll, ideal for testimonials or milestones. |
2. Sticky Media, Scrolling Content
Creates a layout where a media area (image or video) stays sticky while the content for each section scrolls alongside it. Each child section can swap the media as the user scrolls.
2.1 Layout Options
Content Position Choice
- Right Media on the left, content on the right.
- Left Media on the right, content on the left.
Content Spacing Choice
Controls the vertical spacing between stacked content sections (in viewport height).
- 20% to 55% (
20vhto55vh)
2.2 Media Size & Ratio
Media Width Choice
Controls how wide the sticky media area is relative to the full section width.
- 40% to 75%
Media Height Choice
Controls the vertical height of the sticky media area.
- 50vh to 100vh
Mobile Media Aspect Ratio Choice
Defines how the media is cropped on mobile devices.
- 16:9 (
16-9) - 1:1 (
1-1) - 3:2 (
3-2) - 4:3 (
4-3) - 4:5 (
4-5)
3. Sticky Scroll Pinned Sections type
Sections pin to the viewport as you scroll, stacking vertically with optional overlap and animation effects. Ideal for storytelling or milestone timelines where each section remains in view while the next one animates in.
3.1 Section Effects
Effect Choice
Controls the animation applied as sections stack or transition.
- None no extra animation.
- Overlapping sections overlap as they stack.
- Scale scale transform as sections move in/out.
- Blurred Scale combines scaling with blur.
- Fade Scale sections fade and scale against a color.
Effect Enabled ChoiceResponsive. Set a different value for desktop, tablet and phone.
Whether the effect runs at all. Disabled on a device, the sections stop being pinned: each one goes back to a normal block in the flow at its own height, and the page scrolls through them the way it scrolls through any other row.
A pinned section holds the viewport still while the rest of the page scrolls past it, so whatever the section holds has to fit the viewport. On a phone it rarely does, and the overflow is unreachable rather than merely cut off.
If a section only fits on a desktop, set Effect Enabled to Disabled on phone. The thresholds are the theme's own: phone is 690px and below, tablet 691px to 999px, desktop 1000px and up.
Overlap Amount NumberResponsive. Set a different value for desktop, tablet and phone.
Only when Effect is set to Overlapping. Controls how much each section overlaps the previous one. Higher values create a more pronounced stack.
Fade Color Color
Only when Effect is set to Fade Scale. Color picker for the background color used in the fade/scale transition.
3.2 Section Size & Layout
Section Height Choice
Visible height of each pinned section in viewport height.
- 50vh to 100vh (in 5% increments)
Max Height NumberResponsive. Set a different value for desktop, tablet and phone.
Optional maximum height (in px, rem, or vh) for pinned sections. Useful when you want to restrict extremely tall content on specific devices.
Subtract Navigation Height Toggle
When enabled, subtracts the navigation bar height from the section height so pinned sections fit exactly beneath a sticky header.
Content Alignment Choice
Vertical alignment of content within each pinned section.
- Middle
- Stretch
- Top
- Bottom
3.3 Visual Stack & Navigation
Stacked Appearance Toggle
Keeps the top edges of all sections slightly visible, creating a visual stack as you scroll through them.
Section Navigation Toggle
Adds in-view navigation controls to jump between sections.
Navigation Color Color
Color picker for the section navigation UI. Only visible when Section Navigation is enabled.
4. Type: Horizontal Scrolling type
Transforms stacked sections into a horizontal-scrolling track on desktop while maintaining vertical scroll behavior for the page. Ideal for portfolios, feature overviews, or timelines that slide sideways.
This variant will only use the scrolling effect in the desktop viewport (> 1000px). On smaller viewports, it will stack the sections normally.
4.1 Horizontal Effect
Effect Choice
Additional visual behavior for the horizontal scroll.
- None standard horizontal scroll.
- Stacking sections visually stack as they progress.
4.2 Section Dimensions
Section Width Number
Controls how wide each horizontal section is as a percentage of the viewport width.
- Min: 25%
- Max: 100%
- Step: 1%
Only applies on desktop where horizontal scrolling is active.
Section Height Choice
Vertical height (viewport-based) of the horizontal-scrolling area.
- 50vh to 100vh
Section Gap NumberResponsive. Set a different value for desktop, tablet and phone.
Controls the horizontal gap between sections (e.g. 10px).
4.3 Alignment & Viewport
Content Alignment Choice
Vertical alignment of content inside each horizontal section.
- Middle
- Stretch
- Top
- Bottom
Subtract Navigation Height Toggle
Deducts the navigation bar height from the section height to ensure the horizontal-scrolling region fits neatly beneath a sticky header on desktop.
5. Layered Card Reveal
Displays content as a stack of cards that are revealed progressively while scrolling. Great for testimonials, quotes, or milestone cards with a strong visual hierarchy.
5.1 Card Size & Layout
Effect Enabled ChoiceResponsive. Set a different value for desktop, tablet and phone.
Whether the effect runs at all. Disabled on a device, the sections stop being pinned: each one goes back to a normal block in the flow at its own height, and the page scrolls through them the way it scrolls through any other row.
A pinned section holds the viewport still while the rest of the page scrolls past it, so whatever the section holds has to fit the viewport. On a phone it rarely does, and the overflow is unreachable rather than merely cut off.
If a section only fits on a desktop, set Effect Enabled to Disabled on phone. The thresholds are the theme's own: phone is 690px and below, tablet 691px to 999px, desktop 1000px and up.
Card Width NumberResponsive. Set a different value for desktop, tablet and phone.
Numerical width values for the card container on each device breakpoint (e.g. 480px,
70%). These fields are grouped in the UI under a “Card Width” device group.
Card Aspect Ratio Choice
Controls the height of the card relative to its width.
- 1:1 (
1-1) - 4:3 (
4-3) - 3:2 (
3-2) - 16:9 (
16-9) - 2:1 (
2-1) - 4:5 (
4-5)
5.2 Alignment & Viewport
Content Alignment Choice
Vertical alignment of the stacked cards relative to the viewport.
- Middle
- Stretch
- Top
- Bottom
Subtract Navigation Height Toggle
When enabled, the effective section height is reduced by the nav height so that the card stack aligns nicely beneath a sticky site header.