Interface overview
Advantor
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.
Background (A)
Sizing & Spacing (S)
Layout (D)
Typography (F)
Borders (Y)
Effects (X)
Custom CSS (C)
Custom JS (V)
Attributes (B)
BlockPad Editor (3 panel Code Block preview)
Panelator
Panelator is a customizable icon strip that provides the following one-click options:
Structure (Q)
Selectors (W)
Stylesheets (E)
Settings (R)
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
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.
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:
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
In the bottom left corner you will find Canvas Width / Zoom indicators:
After clicking you should see a modal like this:
You have five options to control default breakpoint Zoom:
Enter width and it will auto-calculate the needed Zoom
Select Common width and it will auto-calculate the needed Zoom
Select Scale by entering a value
Select one of the predefined Scale options
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
After clicking on three dots you should see options like this:
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
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:
Code blocks elements
Div elements
Image elements
Rich text elements
Buttons/Links
Text elements
Heading elements
or a combination of elements listed above, you can do so by clicking on the Filters icon inside the Structure panel.
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.
Fullscreen
To enter/leave full-screen mode you should press the SPACE key.
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:
Dragging
Double click on the handle
Last updated
Was this helpful?