Elementor sticky column without Pro: what works and why

Last updated: 4 November 2026

In Elementor, the Sticky setting under Advanced → Motion Effects belongs to Elementor Pro: the free plugin shows it only as an upgrade prompt. You can still keep a column, a container or a widget in view while the page scrolls. Here is what free Elementor gives you, why a sticky column so often refuses to move, and three ways that worked in our tests.

Short version: a column in an Elementor row is stretched to the height of the row, so it has no room to stick. Give it room first (Advanced → Layout → Align Self: Start, or stick a container inside the column), then make it sticky with four lines of CSS in Appearance → Customize → Additional CSS, with Position: Sticky in the new V4 editor, or with a free plugin. A parent set to Overflow: Hidden stops the CSS way from working.

We make a sticky widget plugin, Quicksloth Sticky Widget, so we are not neutral; everything on this page except the last section needs no plugin. We read the code of free Elementor 4.3.6 and tested every case on 4 November 2026 on WordPress 7.1.4 with the Hello Elementor theme 3.5.2, a row of two containers (a long column and a short one) followed by another section, in Chromium 153 at 1280 × 800, 1024 × 768 and 390 × 844, scrolling with the mouse wheel and measuring where the column was at each step. We did not test Firefox, Safari, Elementor Pro or other themes.

What free Elementor gives you

Elementor's own guide, Motion effects (last update 4 June 2026), says "Elementor Pro allows creating parallax, animations and other Motion Effects from the Elementor editor", and its guide Implement sticky scrolling (last update 3 August 2026) describes the Pro options: Sticky Top or Bottom, Sticky On per device, Offset, Effects Offset and Stay in Column. The same guide describes the V4 way through the Style tab. In the code of the free plugin, the Motion Effects section of a container contains only the promotion of those settings and the entrance animations.

Why the column does not move: it is stretched

An Elementor row is a flex container, and its columns stretch to the height of the tallest one. CSS position: sticky moves an element only inside its parent: a column as tall as its row has nowhere to go. In our test the short column measured 1,748 px, as tall as the long one next to it, and with position: sticky on it, it never moved.

Two ways to give it room, both free:

• Make the column as short as its content. Select the column (the inner container), open Advanced → Layout and set Align Self to Start. The column then measured 106 px and could travel the whole height of the row.
• Stick something inside the column. Leave the column stretched and put the content you want in view in a container inside it (or use a single widget). That inner box can travel the height of the column.

The CSS way (no plugin)

1. Select the column (or the inner container), open Advanced → Layout and type qs-sticky in CSS Classes (without the dot). Click Publish.
2. In the WordPress dashboard go to Appearance → Customize → Additional CSS (Hello Elementor and other classic themes; in a block theme the same box is in the Site Editor's Styles), paste the rule below and click Publish.

@media (min-width: 768px) {
  .elementor .qs-sticky {
    position: sticky;
    top: 20px;
    align-self: flex-start;
  }
}

The align-self line does what Align Self: Start does, so with it you do not need the Elementor setting. What we measured with this exact rule:

• At 1280 × 800 and at 1024 × 768 the column stayed 20 px from the top while the long column scrolled, and stopped at the end of its row, 10 px before the next section (the row's padding). The next section was never covered.
• With the class on a container inside a stretched column, the box stayed 20 px from the top and stopped 20 px before the next section.
• At 390 px Elementor puts the columns one below the other, so the short column comes after the long text and there is nothing to keep in view. The media query switches the rule off there, so align-self does not change the column's width on phones.

The same rule without the align-self line did nothing on a stretched column, as described above. If your site has a fixed header, raise top to the header's height plus a little space. The usual reasons for a rule that still does not stick are in Sticky sidebar not working? Six causes and the fix for each.

The V4 editor: Position, Sticky

Elementor 4 has a new editor with new elements (Div block, Flexbox and others). On our test site, installed fresh with 4.3.6, it was switched on; according to the code it starts switched on only on sites first installed with version 4.0.0 or later, and off on older sites. For these elements the Style tab has a Position section, and its Position menu offers Static, Relative, Absolute, Fixed and Sticky, with Top, Bottom, Z-index and Anchor offset. We opened it in the editor of free Elementor, without Pro: the menu and the Top field were there, and the Custom CSS section below carried the Pro crown.

It writes plain CSS (position: sticky with the top offset), so the stretch rule applies here too:

• A Div block set to Sticky, Top 20 px, inside a Flexbox row next to a long block was stretched to 980 px and did not move.
• With align-self set to start as well, it stayed 20 px from the top and stopped at the end of the row. In the editor that setting is under Style → Layout, in the Flex child group: Align self, Start (label from Elementor's editor code; we set the value in the page data for the test).

It has no device switch of its own; we did not test changing it at the tablet or mobile breakpoint.

Overflow: Hidden and other traps

• Overflow: Hidden on a parent. Containers have Layout → Additional Options → Overflow. With the row set to Hidden, the CSS rule above did not stick at all: the column scrolled away with the page. CSS sticky does not work inside a parent that clips its content. Set the row back to Default, or use a plugin with a fallback (next section).
• Taller than the window. A CSS sticky box taller than the window keeps its top pinned, so its end stays out of view until the row ends (we measured this in GeneratePress, in the theme guide). Stick a shorter box inside the column.
• Check the published page. All our measurements were made on the published page, not in the editor canvas.

With Quicksloth Sticky Widget

Our free plugin has no switch inside Elementor; it works with any element that has an ID or a class, so an Elementor column, container or widget works too. It adds a top margin, stop elements, the theme footer as a stop, devices and a minimum window width, and a fixed-position fallback where CSS sticky cannot work.

1. In Elementor, select the column, the inner container or the widget and type an ID in Advanced → Layout → CSS ID, for example my-sticky-box (for a column of an old-style section the field is under Advanced → Advanced). Click Publish.
2. Select the section that comes after the row and give it an ID too, for example after-row.
3. In the dashboard open Appearance → Sticky Widget. Under Custom sticky elements write #my-sticky-box; under Stop elements write #after-row. Click Save Changes, and clear your cache if you use a caching plugin.

Step 2 matters. What we measured with plugin version 1.0.2 (top margin 10 px):

Why: the plugin uses CSS sticky only when the column reaches the next stop element, and the footer counts as one by default. When the row ends long before the footer, it switches to its fixed-position fallback, which stops only at stop elements. With the next section listed, the row's end is the stop and the box stays in its row. At 390 px the columns stack and nothing was pinned or moved. Once a selector is set under Custom sticky elements, the plugin's script (16 KB, about 5 KB compressed) loads on every front-end page.

The plugin is free in the WordPress.org Plugin Directory. If you use JetSticky for Elementor today, see JetSticky for Elementor: does it still work, and an alternative.

Quick check list

• Is the element stretched? Set Align Self: Start, or stick a box inside the column.
• Is any parent set to Overflow: Hidden? CSS sticky will not work under it.
• Is the box shorter than the window?
• Does a fixed header cover it? Raise top (or Margin top in the plugin).
• With the plugin: is the next section listed under Stop elements?
• Did you check the published page after clearing the cache?

Questions and answers

Is the Sticky setting in Motion Effects free?

No. In free Elementor 4.3.6 it is an upgrade prompt for Elementor Pro, in containers, sections and widgets. The V4 editor's Position: Sticky is free, but only for V4 elements.

Can I write the CSS in Elementor's Custom CSS field?

Not in the free version: Custom CSS is a Pro feature. Put the rule in Appearance → Customize → Additional CSS and use the free CSS Classes field to name the element.

Does it work for a sticky header?

This page is about columns and boxes next to long content; we did not test headers. Elementor's Sticky for headers is part of Pro, and our plugin does not do sticky headers: other plugins do that.

What about old-style sections and columns?

Sites built before containers still render them. We tested the plugin on a widget in a section's column (it stuck and stopped at the next section with a stop element); we tested the CSS rule only on containers.

Sources

Elementor's help pages Motion effects and Implement sticky scrolling, the code of free Elementor 4.3.6 (the container element, the controls manager with the Pro prompts for Sticky and Custom CSS, the V4 style schema and editor panel) downloaded from WordPress.org, and the WordPress.org plugin API for the version (4.3.6, updated 2 November 2026, more than 10 million active installations), all read on 4 November 2026. Elementor changes often: if the labels on your screen differ, tell us at support@quicksloth.dev and we will correct this page.

More on how to make a widget sticky with and without a plugin, and the sticky sidebar options of Astra, GeneratePress, Kadence and OceanWP.

Behaviour tested on 4 November 2026 as described at the top. Written with AI tools and checked by Quicksloth. Quicksloth is an independent developer, not affiliated with Elementor.