Getting Started with Oxygen 6: Walk-Through and Review

Oxygen 6 is a modern rewrite of the classic Oxygen builder that targets power users and developers who want lean, performant output and strong dynamic data support. It is built on the Breakdance editor, inherits its responsiveness, adds its own workflow, and offers a lifetime license which is included for existing Oxygen customers.

Video Version

The video includes a full walk-through of Oxygen 6 settings and UI.

Licensing, Inclusions, and Documentation

A purchase of Oxygen 6 currently includes:

• Oxygen 6
• Classic Oxygen
• Breakdance Elements for Oxygen
• Breakdance forms for Oxygen
• Breakdance WooCommerce for Oxygen

The advertised “over 130 premium elements” appears to refer to the combined total across the bundled Breakdance add-ons rather than Oxygen 6 alone. The lifetime bundle is priced at $199.50 and includes Oxygen Classic, though most people would probably want to use Oxygen 6 going forward. Formal documentation for Oxygen 6 is already available and reasonably complete at launch, which is a positive sign for long‑term support and onboarding.

Test Environment

The walkthrough below is based on a test site that starts with the Twenty Twenty‑Five theme and sample blog posts. The site has the following plugins installed:

• Advanced Custom Fields Pro, used to register a “Team” custom post type and fields
• WPVivid Backup, used to reset the site between test cycles
• Oxygen 6 Release Candidate 1
• Breakdance Elements for Oxygen (installed but initially inactive)

The content and behavior described reflect this environment and Oxygen 6 RC1.

Initial Setup and Global Settings

Activation and Admin Menu

After activating Oxygen 6, WordPress gains a new “Oxygen” top‑level menu with entries for:

• Home (minimal content)
• Templates
• Headers
• Footers
• Components
• Design Library
• Partner Discount
• Settings

Templates, headers, footers, and components are the primary structural building blocks. Components act like reusable blocks or sections that can be inserted across the site. A small UI bug currently causes duplicate entries for some menu items, but it is cosmetic.

Performance Enhancements and Hardening

The Settings screen includes a “Performance Enhancements” section that exposes a number of toggles aimed at reducing legacy or unnecessary front‑end bloat:

• Disable Gutenberg CSS (if Gutenberg is unused)
• Disable XML‑RPC (now mostly used by a few plugins such as Jetpack; also a common attack vector)
• Disable emojis
• Disable dashicons on the front end
• Disable oEmbed front‑end assets
• Disable RSD (Really Simple Discovery)
• Disable Windows Live Writer support
• Hide REST API link from the page header (does not disable the API itself)
• Hide WordPress generator meta tag
• Disable shortlink output for posts
• Disable relational links for previous/next posts
• Toggle RSS support

Many of these options target legacy or rarely needed features that should already be deprecated in core, but Oxygen 6 makes it easy to disable any you don’t need.

Post Types and Advanced Settings

The “Post Types” section determines which post types are editable with Oxygen 6. This does not control template assignment, but rather which content types you can use Oxygen on for directly editing. A recommended workflow is to create post content with the block editor and use Oxygen primarily for templates and special pages, thereby keeping content portable while leveraging Oxygen for structure and design.

Under “Advanced,” Oxygen 6 provides:

• Allow SVG uploads (with the usual caveat that SVG files can contain script and therefore should be restricted or sanitized on multi‑author sites, e.g., via a plugin such as Safe SVG)
• Control over whether third‑party plugins can filter “the_content” area
• Allow unfiltered HTML and dynamic data output (recommended only on locked‑down, single‑author or developer‑only environments)
• Enable a rendering performance debugger
• Limit the number of post revisions

Privacy settings default to not sharing usage statistics with the Oxygen team, but there is an option to opt in. The partner discount page can also be hidden.

Design Libraries, Custom Code, and Utilities

Oxygen’s Design Library system lets a site act as a host for templates and pre‑designed content, which can be shared with or sold to other sites. Classic Oxygen was one of the early builders to popularize this type of feature. In Oxygen 6, design libraries are configured under Settings and can be exported/imported across projects.

There is also:

• A header/footer custom code area
• CSS cache regeneration tools (useful if cached CSS fails to reflect template changes)
• Soft and total reset options for Oxygen
• A directory‑creation utility (typically targeting the wp‑content folder)
• A URL rewrite/update tool for migrated sites
• Export/import for Oxygen settings, which is essential for blueprint sites or for moving default settings between installations

These utilities make it feasible to configure Oxygen once and then clone or start new projects from that baseline.

Core Editor Walk‑Through (Without Breakdance Elements)

Canvas and Element Palette

When editing a page with Oxygen 6, the editor opens to a minimal canvas with an “add element” plus icon. The native Oxygen 6 element set includes:

• Container (with configurable HTML tag)
• Image
• Text (can be promoted to semantic tags such as h1)
• Rich text (TinyMCE‑based)
• Link and text link
• JavaScript code block
• Component insertion
• Shortcode and “container shortcode” (wrapping shortcode output in a container)
• Post loop builder
• ACF/Meta Box repeater element
• Term loop builder for taxonomies
• WordPress widget insertion
• CSS code editor
• HTML5 video element
• Raw HTML code block
• PHP code block
• SVG icons
• oEmbed element

This set is deliberately small and oriented toward building more complex structures rather than providing dozens of specific elements.

Class‑Based Styling Workflow

Oxygen 6 uses a class‑based workflow for layout and styling. When an element is selected without a class assigned, the layout and style panels remain hidden, which can initially be confusing. The expected workflow is:

1. Select the element.
2. Create or assign a class (e.g., h1-element).
3. Once a class is active, the Layout and Style controls become available.

Style panels cover:

• Spacing
• Size
• Position
• Typography
• Background (color, image, gradient)
• Border and border radius
• Effects (opacity, cursor, blend mode, transitions, box shadow, filters, transforms)
• Custom CSS

Most common CSS options are exposed via the UI. Individual style groups can be expanded or collapsed, and styles can be quickly reset by right‑clicking on panel labels.

The layout panel supports display modes such as:

• Block, flex, grid
• Inline block, inline flex, inline grid, inline contents
• Visibility toggles

Above the style panels are controls for:

• Overriding variables
• Display conditions (including dynamic data and custom PHP functions)
• Interactions and animations
• HTML attributes

Display conditions are particularly flexible, making it possible to build complex, data‑driven visibility logic without leaving the builder.

Class Management, Selectors, and Variables

The editor includes a “selectors” panel where classes can be:

• Renamed
• Duplicated
• Deleted
• Locked
• Extended with states (hover, focus, etc.)

Element selectors (e.g., a global h1) can also be defined for baseline HTML element styling.

A separate variables editor allows creation of:

• Color variables
• Numeric variables
• Unit variables (pixels, rem, etc.)
• Font family variables
• Image URL variables

Variables are grouped into collections and can be referenced wherever style controls show the variable icon (plus sign that turns into a dollar sign on hover). This encourages a more systemized, design‑token‑like approach. For example, a color variable named primary might be set to a salmon‑colored value and then reused across headings, buttons, and other elements.

Structure Panel, Breakpoints, and Preview

The structure panel shows the element hierarchy and supports:

• Collapsing/expanding containers
• Drag‑and‑drop reordering
• Cloning and deletion
• Contextual actions such as wrapping elements in containers or links
• Saving as components

A preview content selector lets the user choose which post or custom post type instance to use for dynamic data previews when building templates.

Oxygen 6 includes standard breakpoints:

• Tablet landscape (1199 and below)
• Tablet portrait (1023 and below)
• Phone landscape (767 and below)
• Phone portrait (479 and below)

Undo/redo controls are present, along with a rich history panel for restoring previous states. There is also an “Element Studio” feature, which provides a structured environment for building reusable elements that are guaranteed to be compatible with Oxygen since they are authored within the platform. These can be saved into plugins for reuse or distribution.

Preferences, Custom Fonts, and Custom Breakpoints

The preferences panel includes options for:

• Auto‑scrolling to the active element
• Scaling content to fit the screen
• Suppressing messages for empty server‑side rendered elements
• Showing element IDs in the structure panel
• Disabling code editor line wrapping
• Preferring TinyMCE for rich text
• Including custom breakpoints in the breakpoint dropdown
• Disabling custom unit dropdowns and locking units

Panel positioning is configurable; for example, element properties can be placed on the left and the structure panel on the right. Users can also:

• Upload custom fonts (e.g., WOFF2 files) or connect external font services
• Create custom breakpoints beyond the defaults

Overall, the core editor is lean, class‑driven, and oriented toward developers and advanced users.

Enhancing Oxygen 6 With Breakdance Elements

Activation and Additional Elements

Once the Breakdance Elements plugin is activated and its license key is entered under Extensions, the Oxygen editor gains a new panel containing a large library of pre‑built elements, including:

• Header builder and WordPress menu elements (supporting dropdown and mega menus)
• Columns, tabs, sliders, accordions
• Content reveal blocks
• Headings, buttons, search forms
• Image and icon boxes, lists, badges
• Galleries and social icons
• Star ratings, Lottie animations, countdown timers
• Table of contents, hover cards
• Facebook and other social media embeds

These elements provide a higher‑level “easy mode” on top of Oxygen’s base building blocks. While most of the functionality could be recreated manually with containers and custom CSS/JS, using Breakdance Elements greatly speeds up typical marketing and content‑focused layouts.

Global Settings for Breakdance Elements

Activating Breakdance Elements also adds a “global settings” screen inside the editor, specific to these elements. Here, users can configure:

• Brand colors and basic color palettes for text, headings, and links
• Button styles and their states
• Typography defaults
• Section and container defaults, including:
  • Container width (e.g., 1280px)
  • Vertical padding (e.g., 4rem)
  • Horizontal padding/gutters (e.g., 20px)
  • Gaps between elements

These global settings are applied to Breakdance‑powered elements by default and complement Oxygen’s own variables and selectors. However, they form a parallel system: Breakdance globals live separately from Oxygen 6’s selector/variable system, which can lead to some duplication until third‑party frameworks fill the gap.

Sections, Containers, and the “Hidden Container” Gotcha

The Breakdance section element provides a convenient way to enforce consistent padding and content width across the site. For example, with a section containing a container set to 1280px and 20px horizontal padding, the actual content width becomes 1240px with 20px gutters on each side, as expected.

However, there is a subtle behavior that can surprise new users: adjusting padding directly on the section layer adds additional padding on top of the global padding, rather than replacing it. This is due to a hidden inner container used in the Breakdance section implementation.

A practical workaround for scenarios requiring more precise control is:

1. Add a container and manually set its HTML tag to section.
2. Add a second container inside it.
3. Set the inner container’s max width using a variable (e.g., max-screen-width = 1280px).
4. Center the inner container with auto margins and apply explicit left/right padding (e.g., 20px).

This replicates the Breakdance section behavior while allowing direct, predictable control over spacing. For generalized content sections, the Breakdance section remains convenient; for special layouts, the manual container approach is preferable.

Discussion and Conclusions

Historical Context and Strategic Positioning

Oxygen was originally released in 2016 and gained momentum around 2018 when it added robust dynamic data support. It distinguished itself by being lean, developer‑oriented, and by producing performant front‑end output compared to many competing builders of the time.

Classic Oxygen was built on AngularJS, which was officially sunset in 2021. This made it unrealistic to modernize the editor without a complete rewrite, and the community increasingly viewed the classic editor as laggy and outdated.

In 2022, instead of rewriting Oxygen, the team released Breakdance—a separate builder aimed squarely at the Elementor Pro audience. Breakdance offered:

• An easy‑to‑use interface
• Strong dynamic data support
• Fewer add‑ons required
• Much more performant output than Elementor

However, Oxygen users did not receive lifetime access to Breakdance; they got a one‑year license to try it, which caused some friction.

In February 2025, the Oxygen 6 beta appeared unexpectedly. Oxygen 6 is a full rewrite based on the Breakdance editor core, but repurposed to meet the original Oxygen audience’s needs: a lean, developer‑centric builder with performant output and strong dynamic data capabilities. Oxygen 6 is included in the classic Oxygen lifetime license and includes Breakdance Elements at no additional cost.

Pros and Cons of Oxygen 6

Strengths

• Modern editor foundation
  • Built on the Breakdance editor, Oxygen 6 is noticeably snappy and responsive.
  • The lean UI avoids the clutter common in visual builders.
• Developer‑friendly workflow
  • Class‑based styling and extensive CSS controls encourage scalable architectures.
  • Built‑in code editors for JavaScript, CSS, HTML, and PHP cater to advanced users.
  • Oxygen Element Studio allows creation of custom elements that are guaranteed to be compatible.
• Dynamic data and integration
  • First‑class support for ACF and Meta Box, including repeater and group fields.
  • ACPT, a newer custom field and post type plugin, has already used the Breakdance data provider pattern to integrate with Oxygen 6. This suggests that JetEngine, Pods, and other tool authors can add support as well.
• Powerful conditional and interaction system
  • Display conditions based on variables, dynamic data, and custom PHP open up complex logic scenarios.
  • Interaction and animation controls are built in.
• Bundled value
  • For approximately $200, buyers receive classic Oxygen, Oxygen 6, Breakdance Elements, Breakdance forms, and Breakdance WooCommerce.
  • Breakdance’s WooCommerce integration is widely regarded as one of its standout strengths, and Oxygen 6 inherits this through the bundle.
• Design libraries and project bootstrapping
  • Native support for design libraries and settings export/import makes it easy to create blueprint sites and internal starter kits.

Weaknesses and Limitations

• Early‑version gaps and bugs
  • There are small UI bugs (such as duplicate menu items) and missing quality‑of‑life features like a light editor theme (dark mode only at present).
• Learning curve
  • The requirement to assign classes before styling is powerful but unintuitive for users who expect inline, per‑element styling.
  • Compared to some builders, there is more to learn up front, though many developers may still find it easier than moving into a more complex builder like Bricks.
• Parallel design systems
  • Breakdance global settings exist separately from Oxygen 6’s selectors and variables, leading to duplication and the possibility of inconsistent configuration if not carefully managed.
  • There is currently no way to import a variable list or a styles‑only CSS file; JSON import is the only option, which makes large variable sets tedious to enter.
• Communication and community channels
  • Historically, the Oxygen/Breakdance team has communicated major moves (like Breakdance and Oxygen 6) as surprises.
  • Although communication is improving via videos, email, and a Facebook group, the community might benefit from a more structured forum.

Ecosystem and Future Outlook

Third‑party frameworks are already moving to support Oxygen 6:

• OxyMade has announced a free CSS framework specifically for Oxygen 6.
• Core Framework has stated that Oxygen 6 will be supported and that existing customers with the classic Oxygen add‑on will receive the Oxygen 6 version at no extra cost.

These frameworks should significantly reduce friction around variables and global design systems once they become widely available.

Given the combination of:

• A modern, performant editor
• Deep dynamic data integration
• A class‑based, developer‑friendly workflow
• Strong WooCommerce tools via bundled Breakdance extensions
• A competitive lifetime price point

Oxygen 6 is well positioned to be one of the leading options in the 2026 wave of WordPress page builder releases. It particularly suits developers and power users who want the convenience of a visual builder without sacrificing output quality or control.

For existing classic Oxygen customers, Oxygen 6 is included in their lifetime license, making it a logical upgrade path. New users benefit from a 60‑day money‑back guarantee, providing a risk‑free window to assess whether the builder fits their workflows and performance expectations.