How To Use The Stacker Widget By Atomic Addons

The Stacker widget by Atomic Addons makes sections stack up as visitors scroll. Each section sticks near the top of the screen and the next one slides up over it, like cards piling onto a deck. You build the sections as usual in Elementor and list their IDs in the widget. This guide covers preparing the sections, adding the widget and its settings.

Enable the Stacker Widget

Stacker is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Stacker. You can also open the Creative category.

4. 4

   Turn the Stacker widget on.

5. 5

   Click Save Settings.

Add the Stacker Widget

First give each section or container you want to stack an ID: select it, open Advanced → CSS ID and type a name such as card-1. Then add the widget:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Stacker. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

On the live page the widget moves the listed sections into itself, so place the widget where the stack should be. The sections stack in the order they have on the page, not the order of the list. If the page is built with containers, list containers; the widget then ignores old-style sections.

Stacker

Open the widget and go to Content → Stacker:

1. 1

   Section or Container IDs: The list of sections to stack. Add one entry per section and type its CSS ID in ID, without the #. Dynamic tags are supported.

2. 2

   Scroller Start: How far down the screen each section sticks, in percent of the screen height: 10% by default.

3. 3

   Staking Space: How much of each earlier section stays visible above the next, 0 to 100px: 10px by default. It gives the stack its stepped edge.

4. 4

   Bottom Spacing: Space below each stacked section, 0 to 500px, per screen size.

5. 5

   Transparent on Scroll: Fades each section out as the next one covers it. Off by default.

6. 6

   3D Stacking Effect: Shrinks the earlier sections as the stack grows, so they seem to sink back. Off by default.

7. 7

   Scale Ratio (%): 3D Stacking Effect only: how much each section shrinks per section above it, 50% to 100%: 85% by default. Lower values shrink them more.

Visitors who ask their system for reduced motion still get the stacking, but without the fading and the 3D effect.

Style the Stacker

The widget has no Style tab settings of its own. Style the stacked sections themselves: a background color on each one keeps the sections below from showing through, and rounded corners and a shadow make the stack read as cards.