Templates allow you to use the same design in multiple places.

To create a template, go to the Oxygen > Templates screen in the WP admin and make a new template.

Choose where the template applies, or choose Other Template to apply the template to pages manually.

Creating a basic template

Create a template that applies to all Pages by choosing Single and then checking the Pages box.

Open the template in Oxygen. Add in a header and footer.

Between the header and footer, add the Inner Content component from Add+ -> Fundamentals.

To create a page that uses this template, go to Pages -> Add New to create and save new page.

By default, the Inner Content component will display the standard WordPress post content field. To design the inner content with Oxygen, choose Design inner content with Oxygen and save the page. Then click the Edit the inner content for this page to design the inner content with Oxygen.

By default, a Code Block will appear to render the WordPress post content. You can delete this and design the inner content yourself.

Creating a template to display dynamic content from the WordPress database

To design singles, archives, custom post types, or custom plugin pages with Oxygen, create a new template and choose where you want to apply it.

Using the Add+ -> Fundamentals -> Code Block component, you can write the PHP code necessary to display your dynamic content. This PHP code could contain the WordPress loop, calls to get_post_meta, or any other WordPress API functions. This code will behave just as it would if you wrote it in a standard WordPress template file.

Using the Add+ > WordPress -> Shortcode component, you can input any shortcode. For example, many custom field plugins provide shortcodes to output the values of the fields they store.

Using Add+ -> Design Sets -> WP Basics, you can find pre-written code blocks to display common dynamic content like blog posts, comments, and WooCommerce products.

Use the Preview dropdown to see a list of all content your template could apply to and preview your template with that content inside of Oxygen.

Creating Custom Fields & Post Types

Oxygen lets you create your Custom Fields and Custom Post Types using any method you like - Advanced Custom Fields, CPT UI, Toolset/Types, Pods, WCK, etc. The choice is yours.

Once you've created your post types and fields, create templates that apply to those post types with Oxygen.

Then insert code blocks or use the shortcodes provided by the plugin to display the post fields.

You can use Oxygen with any WordPress plugin. In general, they will behave just like the do when using them with a “normal” WordPress theme. The one exception is that Oxygen does not store its designs in the WordPress post content field, so plugin functionality that expects this will not behave as expected.

Inserting Plugin Output

Some plugins generate output that you'd like to insert into your page.

Use a shortcode, widget, or Code Block to display this output.

Add a shortcode from Add+ > WordPress > Shortcode.

Add widgets from Add+ > WordPress > Widgets.

Add a Code Block from Add+ > Fundamentals.

Styling Plugin Output

When the Oxygen Selector Detector add-on is installed, you can point and click on plugin output to style it.

Clicking on plugin output will detect a CSS selector that applies to the elements you clicked on. You can adjust the selector to apply it to the exact elements you wish, and then create styles for it just like you'd style any other element in Oxygen.

Menus / Dropdown Menus

With Oxygen, you design your menu visually, like you would design any other part of your site.

Oxygen does not have native support for WordPress menus.

If you wish to use a native WordPress menu, you can use a menu plugin like Max Mega Menu. Create your menu using your menu plugin and Appearance -> Menus. Then add the menu to your page design by by pasting in the menu shortcode provided by the menu plugin to Oxygen's Add+ > WordPress > Shortcode component

Using a menu plugin is also the recommended way to create dropdowns and other complex, multilevel menus.

Sliders

You can use any slider plugin like Revolution Slider, Layer Slider, or Soliloquy with Oxygen.

Create your slider using the slider plugin, then insert the slider shortcode into your page where you want the slider to appear by using the Add+ > WordPress > Shortcode component.

Video Backgrounds

We recommend using the Video Background plugin to insert video backgrounds.

Downloading Oxygen

After purchasing Oxygen, you can download it from the customer portal.

You can also set up free, fully-featured testing installations of Oxygen at https://oxygenapp.com/try.

Installing Oxygen

Install Oxygen just like a normal WordPress plugin.

In your WordPress dashboard, go to Plugins -> Add New -> Upload, and upload the .zip files for Oxygen and our add-ons.

Entering Your License Keys

To enable access to our pre-built components and design sets, and to enable access to software updates, enter in your license keys on the Oxygen -> License screen.

What theme do I use with Oxygen?

It doesn’t matter what theme you use, because Oxygen disables your theme entirely.

Oxygen controls the design of every part of your site - headers, content, footers, and everything else.

Opening Oxygen

To open Oxygen and design a page, either:

• create and save a new Page from the Pages > Add New screen of the WordPress admin panel, or,
• go to the Edit screen for the page you'd like to design.

After saving, the Oxygen metabox will appear.

Click the Edit in Visual Editor button to open the page in Oxygen.

Designing from Scratch

In Oxygen, all designs are constructed from fundamental HTML elements like sections, divs, headings, links, and images.

Click Add+ to choose elements to add to your page.

You can create any design by using the elements in the Fundamentals tab of the Add+ section.

Once you add an element to your page, you can visually edit its CSS properties in the toolbar and by clicking the More… tab.

Re-ordering elements

To re-order elements on your page, click the hamburger menu icon on the right side of the toolbar. This will open the DOM Tree, which will show you the entire structure of your page. Click and drag elements to re-order them and to nest them inside other elements.

Responsive

To edit styles for smaller screens, click the screen icon on the left side of the control under Currently Editing [Your Element].

Choose your device width from the dropdown. Then create styles that only apply to that device width and below.

Classes

Create styles that apply to multiple elements using classes.

Click the element ID in the control under Currently Editing [Your Element] to add or choose a class.

Further Learning

If you already know how to layout and design web pages with HTML and CSS, using Oxygen's fundamental elements to create page designs will be very intuitive for you.

If not, watch our video tutorial series on using the fundamental elements of Oxygen to construct the components needed to build a modern website. You’ll learn to create headers, footers, icon boxes, call to actions, testimonial blocks, and other components of modern websites.

Following along with the tutorials will illustrate the principles of CSS layout and how to position elements on your pages the way you wish.

Oxygen Video Series: Essential Building Blocks for Modern Webistes

Designing with Pre-Built Components

Click Add+ and then choose either the Components or Design Sets tab to choose from our library of pre-built components.

You can choose from hundreds of components including headers, footers, content blocks, call to actions, feature blocks, pricing tables, testimonials, and more.

Mix and match these components to create complete page designs.

These components are built using Oxygen's fundamental elements and can be customized just as if you built them from scratch yourself.

Using pre-built components to rapidly construct a web page

Re-Usable Parts Like Headers & Footers

You'll want to re-use some parts of your page designs many times across multiple pages.

For example, you probably want to use the same header and footer on every page your site.

To make anything re-usable, open the DOM Tree by clicking the hamburger menu icon on the right side of the toolbar.

Mouse over the element you wish to make re-usable, click the small hamburger menu icon that appears, and click Make Re-Usable.

You can now re-use this component on any page of your site by clicking Add+ and clicking the Re-Usable tab and adding it as a single.

You can edit the re-usable component on the Oxygen -> Templates screen of the WordPress admin. Changes you make will automatically take effect everywhere the Re-Usable is used as a single.