Elementor Sticky Element: Keep the Buy Button on Screen All the Way Down

September 25, 2026
·
Shahidul Islam
Elementor sticky element keeping a call to action bar pinned while a page scrolls

Long pages have a quiet leak. Somebody reads to the bottom, decides they are interested, and then has to scroll all the way back up to find the button. Most of them do not bother.

The fix is not a longer page or a second button halfway down. It is keeping the thing that matters on screen while everything else moves: a header, a price, a booking bar, a table of contents.

The Elementor sticky element in Sky Addons 4.0 is free, it works on any section or widget you have already built, and it does not require Elementor Pro.

Elementor sticky element keeping a call to action bar pinned while a page scrolls
A bar that stays on screen while the page moves, so the action is always one tap away.

Where an Elementor sticky element pays off

  • Product and service pages. Price and buy button pinned to the bottom, which is how every serious ecommerce app behaves.
  • Headers. A sticky header without buying Elementor Pro for one feature.
  • Long-form articles. A contents list pinned beside the text, so readers can move around.
  • Landing pages. One booking bar that follows the reader from the top of the argument to the bottom.
  • Sidebars. A form or a summary that stays visible while the main column scrolls past it.
  • Announcement bars. A notice that stays for as long as it is relevant and stops at the footer.

Why an Elementor sticky element beats repeating the button

Repeating a button down the pageAn Elementor sticky element
Clutters the layoutOne element, always available
Easy to miss between sectionsNever leaves the screen
Each copy needs maintainingOne place to edit
Nothing on phones, usuallyBottom bar, which is where thumbs are

The Elementor sticky element settings that matter

Top or bottom, with an offset. Headers stick to the top, calls to action work better at the bottom, especially on phones. The offset is the gap from the edge while stuck, which is how you clear an existing sticky header.

Stick until a specific element. Give it the ID of your footer or the next section and the element releases there instead of following the visitor forever. This is the setting that separates a helpful sticky bar from an irritating one.

Show on scroll up. Hide the element while people scroll down and slide it back when they scroll up. It is the pattern used by most mobile apps, because it returns the screen to the content while still keeping the control one gesture away.

An entrance animation. Slide or fade each time it becomes stuck, so the change is understood rather than noticed as a jump.

Z-index control. Raise the stacking order when the sticky element slips behind something else, without writing CSS.

Off on tablet or mobile. Sticky elements are useful on phones, but not all of them are. Disable per breakpoint rather than accepting a bar that eats a quarter of a small screen.

Four Elementor sticky element examples from the demo page
A sticky header, a bottom bar, a pinned sidebar and a contents list.

Set up an Elementor sticky element in five steps

  1. Pick the single element that deserves to stay. One per page.
  2. Choose top for navigation, bottom for actions.
  3. Set the offset so it clears anything else that is already fixed.
  4. Set Stick Until to your footer ID, so it lets go at the end.
  5. Check it on a phone, and disable it there if it takes too much of the screen.

A sticky element that never releases becomes furniture people resent. Always set the point where it stops.

Why it works

Decisions happen at unpredictable moments. Someone might be convinced by the second paragraph or the last testimonial, and a page that only offers the action in one place is betting on a single moment. Keeping the control visible means the page can be acted on whenever the reader is ready.

On phones the effect is larger, because scrolling back up a long page is genuinely tedious. A bottom bar with a price and a button is the single most reliable conversion change on a mobile product page.

Note that the effect runs on the front end only, so it stays out of the way while you are editing. If you use Elementor Pro’s own sticky, do not apply both to the same element.

Elementor sticky element on desktop and on a phone
The same page with a pinned bar on a laptop and on a phone.

When something refuses to stick, the cause is nearly always a parent with its own overflow rule, which the MDN reference on CSS position explains.

Getting it right

  • One sticky element per page. Two is a page with a shrinking window.
  • Keep it thin. A sticky bar should cost no more than sixty pixels of screen.
  • Always set the release point. Usually the footer.
  • Check overlap on phones. Cookie bars, chat buttons and sticky bars all want the same corner.
  • Never stick something people need to read past. Headings and images belong in the flow.

Elementor sticky element: common questions

Do I need Elementor Pro?

No. This is free in Sky Addons 4.0 and works with the free version of Elementor.

Can it stop before the footer?

Yes. Enter the ID of the element where it should unstick.

Can I hide it while scrolling down?

Yes, with show on scroll up, which is the pattern most apps use.

Does it work on phones?

Yes, and you can disable it per breakpoint if it takes too much room.

Why can I not see it in the editor?

It runs on the front end only, so you can keep editing normally. Preview the page.

The short version

The Elementor sticky element keeps the one thing that matters visible while the rest of the page scrolls: a header, a price, a booking bar or a contents list. It is free, it applies to sections you already built, and setting the release point takes it from a nuisance to a conversion tool.

See it in use

The Sticky demo shows a sticky header, a bottom action bar, a pinned sidebar and a contents list on one page, so you can compare behaviours rather than settings. Everything is documented on the Sticky page.

If the page needs the action to open something rather than link away, pair it with the Elementor modal popup. Both are part of the release described in Sky Addons 4.0 and Pro 5.0.

Sticky costs nothing. Sky Addons Pro adds the motion, social and store widgets, and the free versus Pro page shows where the line falls.

Written by
Shahidul Islam
Writes about the work behind the widgets — what shipped, why, and what it cost.
Share
In this post

More from the journal

Elementor Sticky Element: Keep the Buy Button on Screen All the Way Down

Elementor Sticky Element: Keep the Buy Button on Screen All the Way Down

Pin any section with the free Elementor sticky element: stick to top or bottom, stop at a chosen element, hide on scroll down, and disable it on phones.
Elementor Grid Canvas: Give a Page the Structure Magazines Have

Elementor Grid Canvas: Give a Page the Structure Magazines Have

The free Elementor grid canvas draws a real column grid behind your sections, so a page looks composed instead of stacked. Lines, tints and exclusions.
Elementor Button Effects: Turn Ignored Buttons Into Clicks

Elementor Button Effects: Turn Ignored Buttons Into Clicks

Free Elementor button effects add ten hover styles and a halo ring to the buttons you already have, so the call to action stops blending into the page.

Comments are closed.