Sticky Wrapper Demo

Sticky Wrapper keeps an Elementor template visible while the neighbouring column scrolls. Use it for a contact card, table of contents, pricing offer, or booking form that should stay on screen as visitors read.

This demo puts a short “Book a design review” card in the sidebar. As you continue down this article, that card should remain in the visible area instead of scrolling away with the first paragraph.

The widget works with free Elementor. Create a section template for the stuck content, drop Sticky Wrapper into a sidebar column, and pick that template. Set a top offset so the card clears your header and the WordPress admin bar.

Choose which breakpoints stay sticky. Desktop and tablet are on by default so phones can scroll the card with the page. Turn mobile on if you still want a compact offer pinned on small screens.

A common failure for CSS position: sticky on WordPress sites is a parent with overflow-x: clip or hidden. Many themes and page builders set that on body, which creates a containing block and stops native sticky from pinning to the viewport.

Sticky Wrapper now uses a small script that pins the card with position: fixed while you are inside this column, then releases it when you reach the end of the article so the card leaves with the section.

Keep the stuck template short. A tall card that is taller than the viewport will cover the article. The “Follow scroll” behaviour of the older Sticky Elements extension is separate; this widget is meant for a compact sidebar module.

Place Sticky Wrapper in a column that sits beside long content. If both columns are only as tall as the card, there is nowhere to travel and the pin will never be noticeable. This article is intentionally long so you can feel the effect.

You can nest any Elementor section template: a Gravity form, a small gallery, a testimonial, or a “call us” block. The wrapper does not restyle the template; it only keeps it in view.

Offset from top is a slider. On this site the header and admin bar need about 30 extra pixels so the card does not slide under the bar. Increase it if you use a taller sticky header.

Z-index defaults to 100. Raise it if a mega menu or popup sits above the card. Lower it if the card covers a cookie banner you need people to click.

After you save the template, update the page and hard-refresh. Cached compiled CSS from the asset compiler can serve an older stylesheet until the page is recompiled or the plugin version changes.

This paragraph exists so you still have room to scroll. Watch the dark “Stay in view” card on the right: it should stay near the top of the viewport while these lines keep moving.

If you are building a docs page, swap the card for a table of contents. If you are selling a service, use a short form. The pattern is the same: long reading column, short stuck companion.

Continue scrolling. The card should still be on screen. When you reach the “How to implement” section below this article, the card will unstick and leave with this two-column block.

That unstick-at-the-end behaviour is intentional. A card that stays forever would cover the footer and the next section. Sticky means “stay while this column is in play,” not “float over the whole page.”

Still scrolling? Good. This is the length a real case study or service page usually has, which is why a stuck CTA is useful. A three-line demo never shows the feature.

Last stretch of the article. If the card is still in the viewable area as you read this, the widget is doing its job. The next heading is the implementation checklist.