Getting Started with Oxygen 6.0 Beta 2 – Full Beginner’s Guide

Oxygen Builder has long been one of the most powerful website builders for WordPress, giving developers and designers complete control over every aspect of their websites. With the release of Oxygen 6.0 Beta 2, the builder introduces a range of new features and improvements that make building faster, smoother, and more flexible. This guide will walk you through everything you need to know to get started with Oxygen 6.0 Beta 2, step by step. By the end, you’ll have a strong foundation to start building modern, responsive websites.

This tutorial is written in a way that’s easy to follow, even if you’re new to Oxygen. We’ll cover the interface, adding elements, styling them, and exploring new Beta 2 features like Type-to-Add and Inline Component Editing.

1. Introduction to Oxygen 6.0 Beta 2

Oxygen Builder replaces the standard WordPress editor with a powerful visual editor where you design your site using Sections, Elements, and Styles. Unlike block-based editors, Oxygen gives you near-complete freedom to design layouts exactly as you want.

In Oxygen 6.0 Beta 2, several exciting improvements have been introduced:

• Type-to-Add Elements – quickly insert elements by typing their names.
• Inline Component Editing – edit components directly on the page without switching context.
• Element Studio – create fully custom elements with your own controls, HTML, and CSS.

Before we dive in, make sure you have:

• Installed Oxygen 6.0 Beta 2.
• Activated your license in the Oxygen settings panel.
• A fresh page or template ready to edit.

2. Understanding the Oxygen Builder Interface

When you first launch Oxygen by clicking Edit with Oxygen on a page, you’ll see a clean and organized interface. In Beta 2, the interface layout is:

• Left Sidebar – This is where you’ll find the Add Panel (for adding new elements), the Structure Panel (which shows the DOM tree of your layout), and global settings like selectors and components.
• Canvas – The central area where you see and build your page. You drag and drop elements here, edit text inline, and see your changes live.
• Right Sidebar – This is the Properties and Styles Panel. Here, you’ll adjust typography, spacing, backgrounds, borders, and other styling options for the selected element.
• Top Toolbar – A strip across the top that includes save, undo, redo, responsive breakpoints, preview, and other builder tools.

Visualizing the Interface

• Imagine the left side as your toolbox (elements and structure).
• The right side as your painter’s palette (styling and properties).
• The middle canvas as your workspace (your actual website).

3. Creating Your First Page Section

Oxygen builds websites using Sections as the main building blocks. Each Section can contain rows, columns, and elements.

Steps:

1. Click the + Add button in the top-left of the left sidebar.
2. Select Basics → Section.
3. A new full-width Section will appear on your Canvas.

Visually, a Section stretches across the page. It’s a container for the content you want to display.

4. Adding Content Inside the Section

Now that you have a Section, let’s add some text.

Steps:

1. With the Section selected, click + Add again.
2. Choose Basics → Heading.
3. A Heading appears inside your Section.
4. Click the text on the Canvas and type in your own words, like “Welcome to My Website.”

The new heading shows up in both the Canvas (center) and the Structure Panel (left sidebar), so you can see exactly where it sits in your page hierarchy.

5. Styling the Heading

Now let’s style the heading to make it stand out.

Steps:

1. Select the Heading on the Canvas.
2. Look at the right sidebar (Styles Panel).
3. Under the Primary Tab, you can:
   • Increase the font size.
   • Change the text color.
   • Adjust alignment (left, center, right).

Your changes appear instantly in the Canvas.

Tip: Always use classes when styling. Instead of applying styles directly to one heading, create a class (like .main-heading) so you can reuse it across multiple pages.

6. Adding More Content

Let’s add a button and a text block under the heading.

Steps:

1. Click + Add → Basics → Text.
2. Type in a short paragraph, like “This is the start of my new website built with Oxygen 6 Beta 2.”
3. Click + Add → Basics → Button.
4. A button appears below the text.
5. In the right sidebar, change the button color, adjust the padding, and add a link.

Now your section has a heading, text, and a button — the basic components of a hero section.

7. Layout Basics with Columns

Oxygen makes it easy to create multi-column layouts.

Steps:

1. Click + Add → Layout → Columns.
2. A two-column layout appears.
3. In the left column, add an Image.
4. In the right column, add a Text element and a Button.
5. Adjust column widths in the right sidebar under Layout options.

Responsive Design:

• Switch to the tablet or mobile view using the top toolbar.
• By default, columns stack vertically on smaller screens.
• You can adjust spacing, alignment, and stacking behavior in the right sidebar.

8. New Feature: Type-to-Add Elements

One of the fastest new features in Oxygen 6.0 Beta 2 is Type-to-Add.

Steps:

1. Press Command+A (Mac) or Ctrl+A (Windows) to open the Add Panel instantly.
2. Start typing the element name, like “h1” or “div.”
3. Press Enter, and Oxygen adds the element directly to the page.

This eliminates the need to scroll through menus — a huge time-saver.

9. Working with Reusable Components

Components allow you to reuse elements across multiple pages.

Steps:

1. Select a Section you want to reuse (like your hero section).
2. Convert it into a Component.
3. Now you can insert it into other pages.

New in Beta 2: Inline Component Editing

• You can edit components directly on the page without leaving the builder.
• Changes update across all instances of that component.

10. Global Styles & Consistency

Global styles keep your design consistent.

Steps:

1. In the left sidebar, open the Global Settings panel.
2. Set up Global Colors for your brand.
3. Set Global Fonts for headings and body text.

Now, whenever you add new text or elements, they follow your global design system.

11. Saving & Previewing Your Work

Steps:

1. Click the Save button in the top toolbar.
2. Click the Eye icon to preview your site in a new tab.
3. Test the design at different screen sizes using the responsive toggle in the top toolbar.

12. Next Steps

You now know the basics of Oxygen 6.0 Beta 2:

• Adding sections and elements.
• Styling them in the right sidebar.
• Using Type-to-Add.
• Working with components.
• Setting global styles.

From here, you can:

• Experiment with Element Studio to create custom elements.
• Explore Design Sets for pre-made layouts.
• Build a complete homepage using Sections, Columns, and Components.

Final Thoughts

Oxygen 6.0 Beta 2 introduces exciting workflow improvements that make web design faster and more efficient. With Type-to-Add, Inline Component Editing, and Element Studio, Oxygen continues to give developers professional-grade tools for building WordPress websites.

This guide has covered the full “Getting Started” journey — from understanding the interface, to adding and styling elements, to working with the new Beta 2 features. By following these steps, you can confidently begin building modern, responsive websites with Oxygen 6.0 Beta 2.