Builder Panels

Oxygen has several different panels within the builder that empower you with the tools necessary to make your designs perfect. This article discusses each of those panels further.

Add Panel

The Add panel is where you search for and add new elements to your designs.

You may search for elements by name or browse elements by opening and closing accordions within the panel.

After you find the desired element, you may either click it to add it to the builder or drag and drop the element into the Canvas.

In the top right of the Add panel are controls to open the Design Library or close the panel.

History Panel

The History panel allows you to review previous steps you’ve made during your current builder session as well as view previous revisions.

The History panel has two tabs, History and Revisions. The History tab is where you can see edits done during the current builder session. The Revisions tab is where you can see previously saved versions of the design. Learn more about Oxygen’s Revisions system.

Properties Panel

The Properties panel is where you will be able to edit the controls, designs, and other features of an element in Oxygen.

1. Name – This shows the element’s name. You can change the element’s name from the Structure Panel.
2. Tag – Select the Tag that the element will use.
3. Classes – Add or Edit Classes that have been added to the element.
4. Content Controls – Modify the Content Controls available for the element.
5. Design Controls – Change the Design Controls if they are available for the element
6. Override Variables – Allows you to manually override variables. This will count for the specified element as well as any children of the element.
7. Conditions – Set the Conditions required for the element to display.
8. Interactions – define the interactions available for the element.
9. Animations – Add animations for displaying the element.
10. Settings – All available settings for the element.
11. Controls List: This is where you’ll see the different options available for the property tabs (items 4-10).

Variables Panel

The Variables panel is where you can view and manage the Variables available on a site.

1. Add new collection: Creates a new collection to store Variables.
2. History: View the history for Variable changes.
3. Import/Export Variables: Easily move Variables from one site to another using the import and export feature.
4. Close Panel: Closes the Variables panel.
5. Download: Download the current collection of Variables.
6. Delete Collection: Deletes a collection and any any Variables inside of it.
7. Reorganize Collection: Allows you to change the order of collections.
8. Reorganize Variables: Change order of variables within a collection.
9. Copy Variable Name: Copy the Variable name to use elsewhere in Oxygen.
10. Delete Variable: Delete the desired variable.
11. Add Varable: Create a new Variable to be used on the site.

Selectors Panel

The Selectors panel is where you can manage classes and manually added selectors.

1. Selectors History: Allows you to view and restore previous versions of your selectors.
2. Import/Export Selectors: Move selectors to/from other Oxygen sites.
3. Close Panel: Closes the Selectors panel.
4. Add Selector: Allows you to manually add a selector. This allows for simple or complex selectors.
5. Selectors List: View all the selectors available on the site.
6. Selectors Search: Search the selectors list to find the selector you’re looking for.

Structure Panel

The Structure panel is where you can view and manage the different elements used in the current design.

1. Collapse/Expand: Collapse or Expand all elements in the Structure panel.
2. Copy All/Paste Elements: Copy all the current elements from one page or site and paste them in another site. Learn more.
3. Close Panel: Close the selected panel.
4. Collapse/Expand Individual: Collapse or Expand the specific parent element.
5. Drag: Click this button to drag an element elsewhere within the Structure panel.
6. Duplicate: Duplicate the selected element.
7. Delete: Delete the selected element.
8. Elements List: Lists all the elements currently used in the design.