Orphaned Content

Parked here rather than deleted: this was the editor tour that used to sit in Editor
Overview. Nothing links to it and it isn't part of the documentation's flow — it's here so
the material survives until you decide whether it has a home.

The editor at a glance

The editor has three parts: the toolbar, the canvas, and the panels.

The toolbar

From left to right:

• Menu — The Oxygen logo () at the far left opens the main menu: Dashboard (back to wp-admin), Preferences (see below), Plugin Settings, and links to Oxygen's Tutorials and Documentation.
• Add Element — The + button () opens the Add panel, where you search for elements and click to insert them.
• Structure — The layers button () toggles the Structure panel — the tree of every element on the page, for selecting, reordering, and nesting.
• The document chooser — The Page: Title control shows which document you're editing. Click it to switch to any other Oxygen document without leaving the editor — search, filter by post type, and sort by edit or creation date. The + next to the search box creates a new document (a page, post, template, header, footer, or component) without leaving the editor; it then appears in the list, ready to open.
• Breakpoint — Shows the breakpoint you're editing at (initially Desktop). Click it to switch the canvas to another device width.
• Undo and redo — The / arrows step backward and forward through your changes (Ctrl+Z / Ctrl+Shift+Z, Cmd on Mac). The buttons are grayed out when there's nothing to undo or redo.
• Settings menu — The ••• button () opens a two-item menu:
  • History — a panel with two tabs. History is the timeline of changes in your
    current editing session. Revisions lists the document's saved revisions with date
    and author; click one to load it into the editor — it stays unsaved (the Save button
    shows its purple dot) until you click Save, and the Current entry at the top takes
    you back to the latest saved state.
  • Element Studio — a developer tool for creating and editing your own elements,
    macros, and presets. It's provided as-is for developers; read its documentation before
    using it.
• Selectors — The {} button () opens the Selectors panel, which manages every CSS class and selector on your site.
• Variables — The $ button () opens the Variables panel — site-wide design tokens (colors, sizes, fonts) you can bind to any eligible style control.
• Preview — The ▶ button () hides the entire editor UI so you see the page exactly as a visitor would; a small ✕ stays in the top-right corner. Press Esc (or Alt+P, or the ✕) to come back.
• Save — Saves the document (Ctrl+S / Cmd+S). A purple dot on the button means you have unsaved changes. Leaving the editor with unsaved changes triggers a browser warning.
• Exit — The ✕ button () at the far right opens a menu: Exit to Frontend (view the page), Exit to WordPress (back to wp-admin), or Copy URL (copies the page's front-end URL).

The canvas

The canvas is a live render of your page — not a simulation. Click any element to select
it: the element is outlined, a badge above it shows its name with controls to drag,
duplicate, or delete it, and the
Element Properties panel opens
on the right with everything about that element — its classes, styles, conditions,
interactions, and animations.

Double-click a text element to edit its text directly on the canvas; press Esc when
you're done. On an empty page, the canvas shows a single + — click it to add your
first element.

By default the canvas is scaled down slightly so the full page width fits your screen.
Press Ctrl+Shift+S to switch between scale-to-fit and actual size, or turn scaling off
permanently in Preferences.

Panels

Four panels open from the toolbar, and a fifth opens itself when you select something.
Each has its own article:

• Add — every element you can insert, searchable.
• Structure — the tree of the page, for
  selecting, reordering and nesting.
• Selectors — every class and
  selector on the site, and the styles on each.
• Variables — the site's design tokens.
• Element Properties — opens on
  the right whenever an element is selected: its content, classes, styles, conditions,
  interactions and animations.