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.
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.
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.