Role Manager

Role Manager

By default, access to Oxygen is only available to administrators. Access to Oxygen can be granted to other user roles at Oxygen -> Settings -> Role Manager in the WordPress admin.
Oxygen's role manager works with the WordPress default user roles, any additional user roles added by custom code, and any additional user roles added by 3rd party plugins such as User Role Editor.
Important Security Information
Access to Oxygen should only be granted to trusted users. Because Oxygen provides the ability to execute PHP code, any user granted access to Oxygen could run PHP code to make themselves an administrator.

Page Width

Page Width

Default Page Width For Entire Site
When Oxygen is first installed, the default page width is set to 1120px.
This can be changed from Manage > Settings > Global Styles > Width & Breakpoints.
All pages on your website will use this width, unless a custom width is specified for that specific page or the template used to render it.
Custom Page Width On a Specific Page or Template
To override the global page width on a specific page or template, go to Manage > Settings > Page Settings and specify the Page Width.
This page width will only affect the page or template you are currently editing.
How Page Width Works
Your page width setting controls the container width of Sections and Header Builder. Any content placed inside Sections and Header Builders will be contained in a rectangle no wider than the page width.
When a Section or Header Builder is rendered, Oxygen determines the width to use as follows:

Is a custom container width set for the specific element being rendered? If so, use this custom width.
If not, is a custom width set at Manage > Settings > Page Settings for the template or specific page rendering the content? If so, use this width.
If not, use the global page width set at Manage > Settings > Global Settings > Page Width.

Embedding Plugins

Embedding Plugins

You can use Oxygen with most WordPress plugins. In general, they will behave just as they do when using them with a normal WordPress theme.
Some plugins generate output that you would like to insert into your page. You may display this output using a Shortcode, Widget, or Code Block.
Shortcode
Many plugins can be embedded into a page using a shortcode.
Shortcodes are commonly used to embed contact forms, event calendars, elaborate sliders, pricing grids, and more.
To display some content via shortcode, click +Add > WordPress > Shortcode.
The copy and paste the plugin's shortcode into the the Full shortcode field in Oxygen.
To wrap elements designed in Oxygen with a shortcode, use the Shortcode Wrapper element.
WordPress Widgets
To add a widget to the page created with Oxygen, click +Add > WordPress > Widget and choose the one you need from the list. Though they are usually used in sidebars, in Oxygen you may add these elements anywhere on the page.
In general, you can edit widgets settings inside Oxygen. However, some widgets make use of elaborate JavaScript and other functionality which will not run inside the Oxygen editor. These widgets must be edited in the WordPress admin panel.
Code Block
Using a Code Block element, you can write the PHP/HTML/CSS/JavaScript code necessary to display your dynamic content. This code could contain the WordPress loop, calls to get_post_meta, or any other WordPress API functions. The code added with Code Block element behaves just as if you wrote it in a standard WordPress template file.
To add a Code Block, click +Add > Basics > Code Block.

Security Considerations

Security Considerations

Shortcode Signing
At Oxygen -> Settings -> Security you can choose to prevent Oxygen from executing its shortcodes if they lack a valid signature by selecting "Check Oxygen's shortcodes for a valid signature before executing". As of Oxygen v3.2, an invalid signature warning will only be shown in the WordPress admin area and not on the front-end of the site.
To harden Oxygen against potential attacks, it is highly recommend you enable this option. It is enabled by default for new installs of Oxygen 2.1 and up.
If you wish to show the invalid signature warning on the front-end of the site, you can enable "Show invalid shortcode signature warnings on the front end" via Oxygen -> Settings -> Security.
Shortcode Signing Explained
Oxygen stores the elements on your page as WordPress shortcodes. At runtime, those shortcodes are compiled into PHP, HTML, CSS, and JavaScript.
If another plugin on your site has a security hole which lets unauthorized users execute shortcodes, they could execute Oxygen's shortcodes. Since Oxygen's shortcodes allow for the execution of PHP, they could run any arbitrary PHP code they want on your site - in other words, change your admin password, steal all your user data, or do literally anything else.
Of course, this attack would require another plugin to be present on your site with a security flaw that allows unauthorized users to execute shortcodes. But since it is likely many of these plugins are floating around, it is highly recommended you enable this option.
The only way to generate a valid signature is to have access to the signing keys, which are unique and randomly generated when you install Oxygen. These are stored in your wp_options table, so only a site admin or an attacker who could otherwise read data from your database could get the keys and sign a shortcode.
Further reading: http://www.pritect.net/blog/wordpress-shortcode-injection-attack-vector
WordPress Multisite
By giving users on a multisite network access to Oxygen, you』re giving them the ability to write PHP code from within Oxygen using elements like Code Block or Easy Posts.
Obviously, this means they could they could execute any arbitrary PHP code - just like if you gave them the privilege to install plugins or edit theme PHP files.

Styling Plugins

Styling Plugins

To style plugin output, Selector Detector must be enabled from the Oxygen > Settings page in the WordPress admin panel.
Selector Detector allows Oxygen to style content that is coming from outside of Oxygen, for example:

WooCommerce Products
bbPress Forum Topics
WooCommerce Shop, Cart, and Checkout pages
Easy Digital Downloads download history pages

Plugin Pages Rendered With Inner Content or Dynamic Data
When a plugin page is rendered with an Inner Content or Dynamic Data, it generally means a Template is applied to that plugin page, and that Template has an Inner Content or Dynamic Data element that is displaying the plugin's output.
To customize the styles for the plugin's output, open the Template that is applied to the plugin page.

Select Oxygen > Templates, then click Edit next to the template title.
Click Edit with Oxygen to open the template in Oxygen.
Preview the plugin page by choosing it from the Preview dropdown
Click anywhere on the plugin's output, or click the Inner Content or Dynamic Data element that is outputting the plugin's content.
Click the Style Output button to style the plugin output.

Plugins Embedded With Shortcodes, Widgets, or Code Blocks
When a plugin is embedded on a page using a shortcode, widget, or Code Block element, click the Style Output button at the bottom of the Primary tab for that element to style the plugin out.
If no Style Output button is available, Selector Detector must be enabled from the Oxygen > Settings page in the WordPress admin panel.

Selector Detector

Selector Detector

Selector Detector is an advanced utility tool that helps you to detect CSS selectors for HTML output displayed inside Oxygen. It is most commonly used to create styles for plugin output like contact forms inside of Oxygen.
Selector Detector is available for Widgets, Shortcodes, Code Blocks, and some other Oxygen elements that output nested HTML.
Enabling Selector Detector
Selector Detector must be enabled before it can be used. To enable it, from the WordPress admin panel, go to Oxygen -> Settings and check the Enable Selector Detector checkbox.
Detecting CSS Selectors
To find a selector using the Selector Detector, click the Widget, Shortcode, Code Block or other element you wish to detect selectors for. If Selector Detector is available for this element, a Style Output button will appear at the bottom of the left panel.
Click Style Output, then click any content inside of the active element to detect selectors for it.

Backgrounds

Backgrounds

Control background color, video, image, and more with the settings inside Advanced > Background.
Background Color
Set the background color of the element.
Background Image
Set an image for the background. If the image is unable to load, the color will be used.
You can set the image in three ways:

Specify the URL to the image
Upload or use an existing image in WordPress Media Library by clicking Browse
Set the background image to Dynamic Data, such as the post's featured image, by clicking Data

Image Overlay Color
If the background image is set, you can darken, lighten, and colorize the image.
Use this option to ensure text placed on background images has enough contrast to be easily readable.
Use the opacity slider at the bottom of the color picker to adjust the transparency of the overlay color, ensuring the background image shows through.
Background Size

auto - Uses the image』s original height and width.
cover - Scales the image so that it completely covers the element』s background.
contain - Scales the image so that it is completely contained inside the element.
manual - Manually set the width and height of the image.

Background Repeat

repeat - The background image is repeated both vertically and horizontally.
repeat-x - The background image is repeated only horizontally.
repeat-y - The background image is repeated only vertically.
no-repeat - The background image is not repeated. The image is only shown once. This is the default.

Background Attachment (Parallax)

scroll - the position of the background image will be fixed to the element and will scroll along with the element and page.
fixed - the position of the background image will be fixed to the page and will not scroll up and down with the element

Use fixed for a parallax scrolling effect.
Background Position (Left and Top)
Entering Top and Left values positions the image at these respective distances from the upper left corner of the element.
Background Clip

border-box - the background extends to the outer edge of the element's border
padding-box - the background extends to the inner edge of the element's border
content-box - the background extends to the beginning of the element's padding

Background Blend Mode
Background blend modes allow you to set how an element』s background image should blend with the element』s background color or gradient.

Normal - No blending is applied.
Multiply - Background color and background image are multiplied, typically resulting in a hued image that is darker than the original.
Screen  - Both background image and color are inverted, multiplied, and then inverted again.
Overlay - The background color is mixed with the image.
Darken - Replaces parts of the image that are lighter than the background color with the background color.
Lighten - Replaces parts of the image that are darker than the background color with the background color.
Color-dodge - The background color is divided by the inverse of the background image.
Color-burn - The background color is inverted, divided by the background image and then inverted again.
Hard-light - Parts of the background image that are lighter than the background color are treated as having the 「multiply」 blend mode, and parts of the image that are darker than the background color are treated as having the 「screen」 blend mode.
Soft-light - Similar to hard-light but more diffused in appearance.
Difference - The darkest colors of the background image and background color are subtracted from the lightest ones. Results in a high contrast image.
Exclusion - Similar to difference, but with lower contrast.
Hue - The hue of the background image is combined with the luminosity and saturation of the background color.
Saturation - The saturation of the background image is retained while mixing the luminosity and hue of the background color.
Color - Mixes the hue and saturation of the background image with the luminosity of the background color.
Luminosity - The luminosity of the background image is preserved while using the hue and saturation of the background color.

Setting a Video Background
Oxygen allows setting a video as the background for section elements only. To set video backgrounds for other elements, use the Video Background plugin.
Video Background URL
The video needs to be in an .mp4 or .webm file format.
You can set the video in two ways:

Specify the URL to the video
Upload or use an existing video in the WordPress Media Library by clicking Browse

Tip: store your video background on a service like Cloudinary for fast loading.
Hide Video Below
To hide a video background below a certain screen width, select the screen width in the list.
Video backgrounds work best on large screens, which are commonly found on desktop and laptop devices with fast internet connections. Mobile users often have slower connections and therefore using a video background is not recommended.
Video Overlay
If the background video is set, you can darken, lighten, and colorize the video.
Use this option to ensure text placed over the background video has enough contrast to be easily readable.
Use the opacity slider at the bottom of the color picker to adjust the transparency of the overlay color, ensuring the background video shows through.
Gradient Backgrounds

Performance Optimization Options

Performance Optimization Options

Bloat Eliminator
Oxygen』s Bloat Eliminator settings are located at Oxygen -> Settings under the Bloat Eliminator tab.
These settings allow you to disable some third party scripts and functionalities that are not necessary on every site, allowing you to further optimize your Oxygen site.

Disable WP Emojis - Disables built-in WordPress JavaScript for rendering Emojis.
Disable jQuery Migrate - Disables the ability to run deprecated jQuery code on the current jQuery version.
Disable Embeds - Disables the automatic embedding of some content such as YouTube videos, Tweets, etc., when pasting the URL into your blog posts.
Disable Google Fonts - Completely disables Google Fonts for your site.
Disable Webfont.js - Forces Google Fonts to be included using a pure CSS method rather than relying on Webfont.js.

Image Srcset
Srcset is an attribute of image elements that allows the browser to intelligently load the most appropriate size of the image for display based on viewport size. To use srcset, you must use an Image element from +Add -> Basics.

Select the Image element.
In the Properties Pane, choose Media Library.
In the ID field, click the browse button.
Upload or choose the image you』d like to use and click Select Image.
Next, use the Size dropdown to choose the size of your image that you』d like to use.

By loading the image in this way, as long as you haven't chosen the smallest size in the Size dropdown, the image will use the srcset attribute to determine which version to load depending on the viewport size, thus improving page load times.
Further reading: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Google Fonts Weight/Italic Picker
By default, if you use a Google Font in Oxygen, all font weights are available and are loaded as long as they are used somewhere on the page or post that you're currently viewing.
The new Google Fonts Weight/Italic Picker allows you to specify the exact weights (and whether to load Italics) you'd like to use, and only ever load those weights regardless of the weights chosen for text elements on your site. To use the Google Fonts Weight/Italic Picker:

Go to Manage -> Settings -> Global Styles -> Fonts.
Choose a Google Font for one of the existing font options or add a new one.
Once you』ve chosen a Google Font, click the weights » link under the dropdown.
Tick the checkboxes for each weight/italic that you』d like to load on your site.

By ticking these checkboxes, you're telling Oxygen to only ever load the weights selected. In this way, if a text element has been set to 400 weight, but you've only chosen 300 and 700 weights in the Google Fonts Weight/Italic Picker, the browser will load the nearest available weight (in this example, 300) when rendering that text element.
Additionally, by choosing italics in the Google Fonts Weight/Italic Picker, your site will load true italics from Google. If italics are not chosen, the browser will render text set to Italic (under Advanced -> Typography) with faux italics by skewing the font.