Picking an element.

Two ways to start picking:

• Click + Pick element to animate at the bottom of the sidebar. This kicks off a flow that ends with you choosing an animation type after you click an element.
• Re-pick a target from inside an existing animation’s panel by clicking the picker icon next to the selector input. This replaces the target without creating a new animation.

While in pick mode, your cursor becomes a crosshair, the canvas shows a thin overlay on whatever you’re hovering, and a label near the cursor displays the selector Glopzi would capture if you clicked. Press Esc to cancel.

When you hover over a piece of text inside a button inside a container inside a section, the leaf element is the text node. Most of the time, you don’t want the text node. You want the button.

The picker climbs the DOM from the leaf upward, looking for the most likely candidate:

• It prefers elements with semantic anchors: data-glopzi-label or data-glopzi-line attributes (added by site authors who want to mark intent).
• Failing that, it climbs to the nearest interactive element: buttons, links, headings.
• It walks up to five ancestors looking for a stable selector, then stops.

The result is that hovering over the text inside a hero CTA highlights the button itself, not the text inside the span inside the button.

Sometimes the climb is wrong. You want to animate a span inside a paragraph, not the whole paragraph. Hold Alt while hovering and the picker drops the climb, capturing the leaf element directly under your cursor.

The label near the cursor adds a small ⌥ prefix when Alt is held, so you can see the picker switched modes without moving the mouse. Release Alt to go back to the climb.

Mouse hover only gets you to elements that exist visually where the cursor is. For elements that are tiny, hidden under overlays, or stacked on top of each other, use the keyboard.

Press any arrow key while hovering and the picker enters sticky keyboard mode. The label changes to show keyboard hints, and the highlight stops following the mouse:

• ↑ climbs to the parent.
• ↓ drills into the first child.
• ← moves to the previous sibling.
• → moves to the next sibling.
• Click commits the keyboard target, regardless of where the cursor is.
• Esc exits keyboard mode and the picker entirely.

When you reach the edge of a branch (no more siblings, or the element has no children), the highlight border briefly thickens to signal there’s nowhere to go in that direction.

To save you from picking accidentally onto editor chrome or framework noise, the picker skips:

• WordPress admin bar (#wpadminbar) and any debug toolbars inside it.
• Glopzi’s own UI: marker overlays, picker highlight, selection outline.
• Structural elements: html and body are never selectable.
• Inline elements that aren’t laid out (zero-size spanwrappers, hidden elements, fixed-position overlays you didn’t intend to animate).

When the picker generates a CSS selector, it also skips builder-generated noise classes like elementor-element-abc123, e-con, jet-*, is-*, has-*, and hash-like class names. The selector you get is the shortest stable one Glopzi can build.

After you pick, the right panel shows the captured CSS selector with a small badge next to it:

• Green means exactly one element matches. Glopzi will animate just that one.
• Yellowwith a number means several elements match. Glopzi will animate all of them by default. If that’s not what you want, refine the selector or re-pick.
• Redmeans zero matches. Either the selector is wrong, or the element doesn’t exist on the current page (it might exist on another route).

For animations that need to survive layout changes regardless of what your CSS selector matches today, see Stable targeting.

• Naming targets with aliases: turn the captured selector into a readable label.
• Stable targeting: keep animations bound to the right element when your builder rewrites markup.
• Keyboard shortcuts: the full key list including the picker keys above.