Editor Overview
Oxygen’s visual editor is where you design every part of your site—pages, headers, footers, layouts, styles, responsive behavior, dynamic data, interactions, and more.
Opening the editor
From the WordPress Edit Post screen
Open any page or post in WordPress and click Edit in Oxygen in the top
toolbar. On a page already built with Oxygen, a launcher card also appears in place of the
content with the same button. On a brand-new page, Oxygen saves a draft first, then opens
the editor.
From the pages list
Once a page has been built with Oxygen, the pages list in wp-admin shows an
Edit in Oxygen row action when you hover the page's title. Pages that haven't been
built with Oxygen yet don't have this link — open them in the WordPress editor and use
the button there instead.
From the front end
While logged in, browsing your site shows an Oxygen menu in the admin bar. It contains
Open 'Page Title' for the page you're viewing, plus entries for any template,
header, or footer being used to render it — the fastest way to answer "which template made
this page, and how do I edit it?"
Templates, headers, footers, and components
Documents that aren't pages — templates, headers, footers, and components — open in the same editor from their screens under the Oxygen admin menu. Everything in this article applies to them too.
How a page fits together
A page is a tree of elements — a container holding a heading, an image, a button —
which you select by clicking on the canvas, and everything about the one you've selected
opens in the properties panel on the right. Almost nothing is styled on the element
itself: elements carry selectors, the styles live on those, and the values inside them
come from variables defined once and reused, so changing a class restyles everything
using it and changing a variable changes everywhere it's used. Content doesn't have to be
typed either — it can be bound to dynamic data and filled from the database as the
page renders.
Editing content
Click an element on the canvas and the Element Properties panel opens on the right, where
its Content tab (the pencil , first in the tab strip above the
controls) holds that element's own content — the words in a heading, the image an Image
element shows and its alt text, the URL a link points at — while text has a shortcut:
double-click it on the canvas and type, editing in place without going to the panel at
all. See Content.
Editing the design
Design works on two ideas: elements are styled through selectors rather than one at a
time, so the styles you change are written to the element's active class and every element
using that class changes with it — see
Applying Classes and
Editing a Selector — and the
values inside those styles come from variables, defined once in the
Variables panel and bound to controls, so
changing one changes everywhere it's used. Styles also belong to the breakpoint you're
editing at; see
Responsive Design.
Adding elements
New elements come from the Add panel: click a tile to insert one, or drag it onto the
canvas to place it exactly. A clicked element lands inside whatever you have selected, or
at the end of the page if nothing is. See
Add Panel for what's in it, and
Adding Elements for where things
land.
Rearranging elements
Drag an element on the canvas to move it, and Oxygen shows where it will land as you go.
For anything fiddly — moving something into a container it isn't near, or reordering a
list — drag it in the Structure panel
instead, where the page is a tree and the drop targets are unambiguous. See
Rearranging Elements.