Overview

Click an element on the canvas and the Element Properties panel opens on the right. It is
where you control everything about that element — its content, its styles, when it renders,
how it behaves, and the markup it produces.

The top of the panel names the element and its HTML tag; below that sits the class field,
and below that a strip of icon tabs. Each does one job.

Classes

Elements are styled through classes, not one at a time. Apply a class to an element, then
edit that class's properties, and every element carrying it changes with you — which is
what keeps a site consistent as it grows instead of turning into a hundred hand-tuned
boxes. An element can carry several classes, and you can put a condition on one so it only
applies in certain circumstances.

Applying and managing them: Applying Classes.
Styling them: Selector Properties.

Content

The Content tab holds what the element actually shows — the words in a heading, the
image and its alt text, the URL a link points at, the query a loop runs. It's different for
every element type, and elements with nothing to configure (a plain Container) don't have
the tab at all.

The useful part is that none of it has to be typed: any content control can be bound to
dynamic data and filled from the
database instead, which is what makes one template serve a thousand posts.

See Content.

Variables

The Override Variables tab sets a different value for a global variable on this element
and everything inside it. Override a colour on one Container and that whole section
re-themes, while the rest of the site keeps the global value — and the override can itself
come from dynamic data, so each post can render in its own colour.

See Variables and
Per Element Overrides.

Conditions

The Conditions tab decides whether the element renders at all — a flat visibility
toggle, or a rule such as "only for logged-in visitors" or "only when this field has a
value". An element hidden by a condition isn't styled out of view; it isn't in the page.

See Conditions.

Interactions

The Interactions tab attaches behaviour to events: a click that opens something, a
hover that changes something else, without writing JavaScript.

See Interactions.

Animations

The Animations tab covers three separate things: an
entrance animation
that plays as the element arrives, a
scrolling animation
driven by scroll position, and sticky
behaviour that pins the element as the page moves past it.

Settings

The Settings tab holds what's left: the element's own settings, plus Advanced,
where you set a custom HTML ID and add arbitrary HTML attributes. That's the escape
hatch for anything Oxygen doesn't have a control for — a data- attribute a script reads,
an ARIA attribute, an anchor target.

See Settings.