Interface overview


Inspired by the toolbar design of graphic tools such as Photoshop, our Advantor strip is located on the inside left panel and is composed of the following fast-access one-click icons which you use to open related panels.
  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-stripe which 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 prefer, the Panelator can be moved to the Top Bar or as part of Sidepanel (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 tools like:
  1. 1.
    Live Server -In essence this is similar to Oxygen’s Frontend preview. However, it hase aneat feature that will save you time as it is able to hot-reload when the Save action is triggered inside Oxygen, allowing changes made in Oxygen to be reflected automatically in the Live Server (Fronted window). This feature works best on a dual screen setup with Oxygen Builder on one screen and the Live Server preview on the other.
  2. 2.
    Live Server Scroll Sync - when enabled allows synchronized bidirectional scrolling between the Live Server frontend preview and the Canvas inside Oxygen Builder.
  3. 3.
    Macro mode - enabling this allows you to apply your last command by clicking on an elements inside the structure panel. A faster version of this is Shift+Click on the Canvas element which will do same.
  4. 4.
    X-mode - puts your page into an X-ray scanner mode in which all the elements appear outlined in grayscale boxes, allowing you to focus on design and find any that causing layout issues.
  5. 5.
    Grid Guide - like Figma/Sketch grid guides, you can set a required grid from designer and have visual helpers to transfer a design from Figma files to your WordPress website.
  6. 6.
    Import Stylesheets - in Oxygen Builder you can use variables for global colors, but you can't see their value. This options will import those variables inside the Editor.
  7. 7.
    Quick fix - if something is broken you can try clicking on this icon. It performs a few actions which can solve some problems. For example, it will delete imported Stylesheets if they collide with the Oxygen Builder Editor.
  8. 8.
    Help / User preference - here you can find controls for your Workspace interface and where you can make fine-adjustments to suit your needs. It also contains useful links for Support, Feedback, Docs etc.
Bottom stripe icons

Canvas Controls

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

Canvas Settings

This option only works on a default breakpoint. On others it won't have any effect because on smaller breakpoints you don't need Zoom Out Canvas.
On 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 needed Zoom
  2. 2.
    Select Common width and it will auto-calculate needed Zoom
  3. 3.
    Select Scale by entering a value
  4. 4.
    Select one of predefined Scale options
  5. 5.
    Reset Zoom

Responsive Helpers

For every other option we can use the Responsive Helpers which will setup Canvas Width and Height to simulate device sizes.
To open the Responsive Helpers modal you should click on the three vertical dots next to the mobile icon in bottom left corner, as illustrated in a picture below
Get Responsive Helpers options
After clicking on three dots you should see options like this:
Responsive Helpers options
You can:
  1. 1.
    Enter manually desired width/height
  2. 2.
    Select one of presets by the most commonly in use
  3. 3.
    Select one of the common devices
After selecting any of the options, it will auto select breakpoints where the device exists, and it will activate the Responsive Helpers mode if it is not already activated:
Selecting one options will automatically do following
If Responsive Helpers options are active you will see the mobile icon with a light blue background. If you go to default breakpoint this options will not have any effect no matter if it is activated or not.
To exit this mode you just need to uncheck that 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 that you have a complicated Structure in which it can be tricky to find code blocks where you have written some code. Solution: Just apply Filter for Code Block and locate 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 developers use them all the time. The default method in Oxygen to show classes requires two clicks to change a selector, and one click every time you want to see all existing selectors.
Workspace vision is a little different in this area. For us an overview of exisitng classes should be always be visible without the need to click on anything
And changing them should be a one-click action because we do this constantly as one of the most common actions inside the Editor.
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 handle