Interface overview


Inspired by the toolbar design of graphics programs like Photoshop, our Advantor bar is located on the inside left and consists of the following icons that you can quickly access with one click to open related areas.
  1. 1.
    Background (A)
  2. 2.
    Sizing & Spacing (S)
  3. 3.
    Layout (D)
  4. 4.
    Typography (F)
  5. 5.
    Borders (Y)
  6. 6.
    Effects (X)
  7. 7.
    Custom CSS (C)
  8. 8.
    Custom JS (V)
  9. 9.
    Attributes (B)
  10. 10.
    BlockPad Editor (3 panel Code Block preview)


Panelator is a customizable icon strip that provides the following one-click options:
  1. 1.
    Structure (Q)
  2. 2.
    Selectors (W)
  3. 3.
    Stylesheets (E)
  4. 4.
    Settings (R)
  5. 5.
    Style Inspector (T)
User preference:
If you wish, you can move the Panelator to the top bar or as part of the side panel (the right panel).
Panelator icons
Panelator icons

Bottom strip icons

The bottom stripe icons are Workspace related tools. You can find here some of yours favourite
The icons on the bottom strip are job-related tools. Here you will find some of your favorite tools like:
  • Live Server - This is essentially similar to Oxygen's front-end preview. However, it has a useful feature that saves you time by performing a hot reload when the Save in Oxygen action is triggered so that changes made in Oxygen are automatically reflected in the Live Server (frontend window). This feature works best in a two-screen configuration, with Oxygen Builder displayed on one screen and the Live Server preview on the other.
  • Live Server Scroll Sync - if this feature is enabled, you can synchronize bidirectional scrolling between the Live Server frontend preview and the canvas in Oxygen Builder.
  • Macro Mode - if this feature is enabled, you can apply your last command by clicking on an element in the Structure panel. A faster version of this is Shift+click on the Canvas element, which does the same thing.
  • X-Mode - puts your page into X-Ray mode, where all elements are displayed in gray boxes. This allows you to focus on the design and find any elements that are causing layout problems.
  • Grid Guides - like Figma/Sketch grid help, you can specify a desired grid from the designer and have visual helps to transfer a design from Figma files to your WordPress website.
  • Import stylesheets - in Oxygen Builder you can use variables for global colors, but you can not see their value. With this option you can import these variables into the editor
  • Quick fix - if something does not work, you can click this icon. It performs a few actions that can solve some problems. For example, imported stylesheets will be deleted if they collide with the Oxygen Builder editor.
  • User Settings - here you can find controls for your workspace interface and make fine adjustments for your needs. You can also find useful links to support, feedback, docs, etc. here.
Bottom stripe icons

Canvas Controls

Workspace overrides the native Oxygen Canvas controls and uses its own mechanisms to provide finer tuning options.
Question: Do you want to have auto-zoom (native Oxygen) or Responsive mode at the default breakpoint?
The workspace defaults to Responsive mode, so you can see the layout changes as you drag the resizer handles. If you prefer Oxygen's native auto-zoom, you need to enable it in the user settings.
Here you can see how to set Auto Zoom:
Auto Zoom setup
Ok, we have now decided which options are best for our workflow, but if you are not happy with them, you can always change them on the fly. The next step is to understand the other helpers, which are divided into two groups:
Default breakpoint = Canvas settings, this is a manual zoom control. You can set it by clicking on the zoom you want to use or by setting the width to simulate, which will then calculate your preferred zoom level.
Other breakpoints = Responsive Helpers - this is a two-dimensional canvas control where you can manually enter values, choose width/height presets or select devices to see the responsiveness of your design.

Canvas Settings

This option only works on a standard breakpoint. It has no effect at other breakpoints, because you do not need the Zoom Out Canvas at smaller breakpoints.
For other breakpoints, check the Responsive Helpers feature.
In the bottom left corner you will find Canvas Width / Zoom indicators:
Canvas Settings button
After clicking you should see a modal like this:
Canvas Settings - Default breakpoint manual Zoom control
You have five options to control default breakpoint Zoom:
  1. 1.
    Enter width and it will auto-calculate the needed Zoom
  2. 2.
    Select Common width and it will auto-calculate the needed Zoom
  3. 3.
    Select Scale by entering a value
  4. 4.
    Select one of the predefined Scale options
  5. 5.
    Reset Zoom

Responsive Helpers

For any other option, we can use the Responsive Helpers, which adjusts the canvas width and height to simulate the device sizes. To open the Responsive Helpers modal, click on the three vertical dots next to the mobile icon in the lower left corner, as shown in the figure below
Get Responsive Helpers options
After clicking on three dots you should see options like this:
Responsive Helpers options
You can:
For any other option, we can use the Responsive Helpers that adjust the width and height of the canvas to simulate the device sizes. To open the Responsive Helpers modal, click on the three vertical dots next to the mobile icon in the lower left corner, as shown in the figure below
Selecting one options will automatically do following
When Responsive Helpers options are enabled, you will see the mobile icon with a light blue background. When you switch to the default breakpoint, these options have no effect, whether they are enabled or not.
To exit this mode, you just need to disable the light blue icon.

Structure filters

If you want to find all:
  1. 1.
    Code blocks elements
  2. 2.
    Div elements
  3. 3.
    Image elements
  4. 4.
    Rich text elements
  5. 5.
  6. 6.
    Text elements
  7. 7.
    Heading elements
or a combination of elements listed above, you can do so by clicking on the Filters icon inside the Structure panel.
Active filters with code block filtering
Why can this be helpful?
Problem: Imagine you have a complicated structure where it can be difficult to find code blocks where you have written code.
The solution: just apply the filter for code blocks and find only the code blocks.

Class switcher

Something that sets Oxygen Builder apart from other WordPress builders is its class system. Classes are the most valuable feature in Oxygen and are used by developers all the time. The default method in Oxygen to view classes requires two clicks to change a selector, and one click each time you want to see all existing selectors.
Workspace Vision is a little different in this area. For us, an overview of the existing classes should always be visible without having to click on anything, and changing the selectors should be possible with one click, since this is one of the most common actions in the editor that we do all the time.
Class Switcher options overview


To enter/leave full-screen mode you should press the SPACE key.
Workspace Fullscreen

Missing native elements

Because Recoda Workspace overrides the native Oxygen UI, some options have become obsolete. This section explains in more detail how they have been replaced.

Hide/Show left Panel

You can see that there is no Hide/Show button. This element is not needed anymore. Hidding/ Showing is now controlled in two ways:
  1. 1.
  2. 2.
    Double click on the handle