Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
docs PHP, CSS & JS

Editor Overview

Oxygen's visual editor is a what-you-see-is-what-you-get interface for creating and editing page designs.

Adding Elements To Your Page

Click the +Add button to open the element browser.

Click on the element you wish to add to add it to your page.

Editing Element Properties & Styles

Properties for the currently active element are shown in the Primary and Advanced tabs in the left sidebar.

Common properties and properties specific to the element you are editing will appear in the Primary tab.

The Advanced tab provides options for extensive customization of the element.

Choosing An Element To Edit

To activate an element, simply click on it in the page preview or in the Structure panel.

Navigating to Parent Elements

Sometimes an element is not clickable because all of its space is taken up by other elements nested inside of it. To activate an element that can't be clicked directly, click an element nested inside of it, and then click on either:

  • the pink title bar for the parent element
  • the element you wish to edit in the breadcrumb path near the top of the left sidebar
  • the up arrow to the right of the element name in the purple title bar

Editing An Element's Text

To edit text on your page, double click on the text in the page preview.

A toolbar for basic text formatting will appear at the top of the screen.

When you are done editing, click anywhere outside of the text, or click the Done button in the top bar.

Re-ordering Elements

There are two ways to reorder elements.

The first way is to simply drag and drop an element to a different position as shown below. To start the drag, you can click on the element itself, or the drag icon on the left side of the element's title bar.

When dragging very large elements, dragging elements a very long way, or when creating complicated nesting, the Structure panel is often an easier way to position the element where you want it.

Click the Structure toggle near the top right corner of the screen to open the Structure panel. Then click and drag an element to reposition it.

Adjusting Element Spacing

Space around and inside the active element can be adjusted by dragging the purple spacing bars around the boundary of the element.

First, activate the element you wish to adjust spacing for by clicking it.

Then, hover the mouse pointer over the inside or outside edge of the element until a purple drag bar appears.

Click and drag the bar to adjust spacing.


In Oxygen versions prior to 3.4, a one-step Undo is available if you needed to reverse a delete. After deleting an element, the red undo bar will appear in the to left corner of the design preview as shown below. Click the Undo link to reverse the delete.

In Oxygen version 3.4 or newer, full undo/redo functionality is available via the top bar in the Oxygen builder.

Click the circular back arrow to revert a change, or the circular forward arrow to reinstate a change. To view a complete history of all available undo points in your current session, click the History button to launch the History Pane.

In the History Pane, click any undo point to navigate to that point in your session's history. Click Clear All if you'd like to clear all undo nodes (Warning: This cannot be undone.)

Oxygen's undo history persists on a per-session basis. This means that reloading the builder, or exiting and re-entering the builder, will clear the undo history.


Last modified: September 13, 2022
Copyright © 2023 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram