Stable targeting.

A CSS selector like .elementor-element-abc123 is fragile by design. It’s tied to a generated identifier that can change when:

• You duplicate a section in your page builder. The new copy often gets a new ID.
• Your builder runs a cleanup or rebundle pass. Some regenerate IDs to deduplicate them.
• You rebuild a section from scratch. The old IDs disappear.
• You move from a staging template to production. Templates sometimes randomize identifiers.

When the selector breaks, the animation has nothing to attach to. Without protection, animations would disappear silently. With Glopzi’s stable targeting, they don’t.

For each target, Glopzi keeps two pieces of information:

• The CSS selector captured by the picker. Used as the primary lookup at runtime.
• An optional Glopzi ID: data-glopzi-id, an attribute we inject onto the element when you secure it. Survives most builder changes because it’s ours and we control it.

At runtime, the order is: try the Glopzi ID first; fall back to the CSS selector. If the ID has been stripped (rare, but possible after a builder cleanup), the selector still works. If the selector has changed too, the animation gracefully does nothing instead of erroring.

Each target chip in the right panel shows a small icon indicating how robust its current selector is:

• Clean (no warning icon). The target has a Glopzi ID assigned. Maximally resilient.
• Solid (a small dot). The selector is specific enough to survive ordinary edits, but no Glopzi ID is set yet.
• Fragile (warning icon). The selector relies on something brittle (deep nth-of-typechains, generated class names, ambiguous structures). One click on the chip opens the “Secure target” flow.

The chip color is informative, not blocking. A fragile selector still animates today; the icon just tells you there’s a higher chance of breakage if your markup changes.

When you click a fragile target chip, a small popover opens with two fields:

• The proposed Glopzi ID. Glopzi suggests a short, semantic name based on the alias and element kind (for example, hero-cta). You can edit it to anything alphanumeric with hyphens.
• A Confirm button. Clicking it injects data-glopzi-id="hero-cta" into the element on save, and updates the target chip to use that ID as the primary lookup. The CSS selector stays as the fallback.

On WordPress sites, the attribute is injected at runtime by the plugin without modifying your post content. On custom sites, it’s injected by Glopzi’s runtime for the duration of the page load. Either way, your stored HTML is untouched.

Securing every target isn’t necessary. Glopzi works fine on plain CSS selectors most of the time. Reach for the Secure flow when:

• The chip is showing a warning icon (fragile selector).
• You’re working on a complex page with a heavy builder (Elementor, Bricks, Divi) and you know future edits will reshuffle things.
• You have multiple animations on similar elements and want to be certain each one targets the specific element you picked, not a sibling.
• You’re shipping a long-lived animation (hero entrance, brand logo treatment) that you want to set and forget.

• Picking an element: how the selector you’re stabilizing got captured in the first place.
• Naming targets with aliases: aliases pair well with secured targets.
• Why Glopzi works on any website: the bigger picture behind the read-only DOM rule.