Overview #
The Sticky Content widget creates a modern two-column layout where the left section stays fixed (sticky) while the right section scrolls through a grid of feature cards. This is a popular design pattern used on SaaS landing pages, product showcases, and feature highlight sections.
The sticky behavior is powered by a custom JavaScript engine with hardware-accelerated animations, smooth scroll tracking, and automatic mobile fallback.
Getting Started #
- Open any page in Elementor Editor
- Search for “Sticky Content” in the widget panel (under the PistonUI category)
- Drag the widget onto your page
- Edit the Left Content (title, description, button)
- Add your Cards in the Cards section
- Adjust layout widths and styling as needed
- Save and preview
Content Tab #
Left Content #
The sticky side of the layout. This section remains fixed as the user scrolls past the cards.
| Setting | Description | Default |
|---|---|---|
| Title | Main heading text. Supports dynamic content. | “PistonUI: Built for Speed…” |
| Title HTML Tag | Semantic heading tag (H1–H6) | H2 |
| Description | Rich text editor (WYSIWYG) for detailed content. Supports dynamic content. | — |
| Show Button | Toggle the CTA button on/off | On |
| Button Text | Label displayed on the button | “Explore Features” |
| Button Link | URL with target and nofollow options | # |
| Button Icon | Optional icon from the Elementor icon library | — |
| Icon Position | Place the icon before or after the button text | After |
Cards #
The scrollable side of the layout. Cards are displayed in a responsive grid.
Each card has:
| Field | Description |
|---|---|
| Icon | Choose from Font Awesome, Elementor icons, or custom SVGs |
| Title | Card heading text |
| Description | Card body text |
Cards Columns — Number of columns in the card grid (1–3). Responsive controls for desktop, tablet, and mobile. Default: 2 columns on desktop/tablet, 1 on mobile.
Layout #
Fine-tune the split layout proportions and sticky behavior.
| Setting | Description | Default |
|---|---|---|
| Left Content Width | Width of the sticky section (20–70%) | 40% |
| Right Content Width | Width of the scrollable cards section (30–80%) | 60% |
| Gap Between Sections | Horizontal space between left and right (20–120px) | 60px |
| Sticky Offset Top | Distance from the top of the viewport when sticky (0–200px) | 40px |
Tip: Left + Right widths should total approximately 100% minus the gap for best results. All layout controls are fully responsive — set different values for desktop, tablet, and mobile.
Style Tab #
Left Content Style #
| Setting | Description |
|---|---|
| Title Color | Color of the sticky section heading |
| Title Typography | Full typography controls (font family, size, weight, line height, etc.) |
| Description Color | Color of the description text |
| Description Typography | Full typography controls for description |
Button Style #
(Visible when Show Button is enabled)
| Setting | Description |
|---|---|
| Typography | Font controls for button text |
| Text Color (Normal/Hover) | Button text color with separate hover state |
| Background (Normal/Hover) | Button background color with separate hover state |
| Padding | Inner spacing of the button |
| Border | Border style, width, and color |
| Border Radius | Corner rounding for the button |
Cards Style #
| Setting | Description |
|---|---|
| Gap | Space between cards in the grid |
| Background (Normal/Hover) | Card background color with hover state |
| Box Shadow (Normal/Hover) | Shadow effect with hover state |
| Hover Border Color | Border color change on hover |
| Padding | Inner spacing of each card |
| Border | Card border style, width, and color |
| Border Radius | Corner rounding for cards |
Card Icon:
| Setting | Description |
|---|---|
| Color (Normal/Hover) | Icon color with hover state |
| Size | Icon dimensions (10–100px) |
Card Title:
| Setting | Description |
|---|---|
| Color (Normal/Hover) | Title color with hover state |
| Typography | Full typography controls |
Card Description:
| Setting | Description |
|---|---|
| Color (Normal/Hover) | Description color with hover state |
| Typography | Full typography controls |
How the Sticky Behavior Works #
The widget uses a custom JavaScript engine (no external dependencies) with three scroll states:
- Before sticky zone — Left content flows normally in the document
- Sticky zone — Left content becomes
position: fixedand stays at the top while cards scroll past - After sticky zone — Left content switches to
position: absoluteat the bottom of the wrapper, scrolling away naturally with the rest of the page
Performance features:
requestAnimationFramefor smooth 60fps scroll handling- Passive scroll listeners for zero scroll jank
ResizeObserverfor responsive width changes- Hardware-accelerated transforms (
translate3d) - Subtle velocity-based trailing animation for a polished feel
- Respects
prefers-reduced-motionaccessibility setting
Mobile behavior: On screens ≤768px, the layout switches to a single column and sticky behavior is automatically disabled. The left content and cards stack vertically.
Responsive Behavior #
| Breakpoint | Layout | Cards Grid | Sticky |
|---|---|---|---|
| Desktop (≥1025px) | Side-by-side, 40/60 split | 2 columns | Active |
| Tablet (769–1024px) | Side-by-side, 42/58 split | 2 columns | Active |
| Mobile (≤768px) | Stacked vertically, 100% width | 1 column | Disabled |
| Small Mobile (≤480px) | Stacked, compact spacing | 1 column | Disabled |
All responsive values can be customized per breakpoint in Elementor’s responsive controls.
