诗语，作者 Oxygen Builder 文档

Visual Editing

Borders

Borders make items in a page stand out visually. Borders are commonly used for buttons, containers, and anywhere where divisions of content need to be clear.
Control element borders with the settings inside Advanced -> Borders.
Color
Set the border color.
Width
Set the thickness of the border.
Style
The default border style is none. Thus, there is no border.
To make the border visible, set this setting to one of the following:

dotted – Specifies a dotted border
dashed – Specifies a dashed border
solid – Specifies a solid border

Unset all borders
To reset all border settings, click unset all borders. Styles for all borders are cleared.
Individual side editing
By default, you are editing all borders simultaneously.
If you want to edit just one side, choose it from the Currently Editing dropdown.

Border Radius
The effect of setting the border radius results in rounded corners. In fact, buttons with circular right and left sides are in fact rectangles with rounded borders. Their rounding radius can be large enough to make them appear circular.
Enter the radius in pixels to round the borders at all corners.

Edit Individual Radii
If you only want to round some of the corners, you can click Edit individual radii link under the Border Radius setting.

Border Styling Tips

If you have a light element on a dark background, use a border color that is slightly darker than the background
If you have a dark element on a light background, use a border color which is slightly darker than the element
To darken the edge of an element, use a semi-transparent black border and set Background Clip to padding-box at Advanced > Background.

Singular & Archive Templates

Singular templates display one item at a time - for example one post, one page, or one instance of a custom post type.
For example, a Singular template would be used to display the following:

A blog post
A page
A WooCommerce product

Archive templates are used to display many items on the same page.
For example, an Archive template would be used to display the following:

A paginated list of all your blog posts
A paginated list of all your WooCommerce products
A paginated list of all your blog posts in a particular category

Singular Templates
On the Oxygen -> Templates -> Edit screen, the options for Singular templates are in the Singular subsection under Where Does This Template Apply?
You can apply the template to:

All Post Types
Posts
Pages
Any Custom Post Types present on your site

Filtering Options

only apply if taxonomized as all of the following - instead of applying the template to all instances of the checked post types, it will only be applied to instances taxonomized as specified
only apply if parent ID is one of the following - instead of applying the template to all instances of the checked post types, it will only be applied if the instance's parent ID matches one of the specified IDs

Archive Templates
On the Oxygen -> Templates -> Edit screen, the options for Archive templates are in the Archive subsection under Where Does This Template Apply?
You can apply the template to:

All archives
Taxonomy archives for the specified taxonomies
Post Type archives for the specified post types
Author archives for the specified authors
Date archives

Further Reading
What is a custom post type?
WordPress can store and display numerous types of content - blog posts, pages, products, and much more. The two main post types that are default with WordPress are Post, and Page. Additional post types can be added to your site by you and the plugins that you install. For example, the WooCommerce plugin adds a Product custom post type. Plugins for real estate listings often add a Property Listing custom post type.
https://codex.wordpress.org/Post_Types
What is a taxonomy?
Taxonomies are ways of categorizing or tagging content. For example, you may have a shoe store with multiple product categories, e.g. men's shoes, women's shoes, boys shoes, girls shoes. You may have a real estate website with multiple listing types, e.g. for rent, for sale, off market, foreclosure. You may have a car dealership website with cars categorized by their condition: new or used.
Product categories, list types, and car condition are all examples of taxonomies.
https://codex.wordpress.org/Taxonomies
Oxygen replaces the WordPress template hierarchy
Normal WordPress themes rely on template files placed in /wp-content/themes/ to display the content on your site. Oxygen simply provides a visual replacement for the normal WordPress template hierarchy, allowing you to design every part of your site visually, inside WordPress, without requiring a theme or any theme files.

Template Hierarchy

Templating

Classes

Classes are used to apply the same styles to multiple elements. All styles set for the class will be applied to all elements that are assigned that class.
To add a class to an element, click Choose selector... or the ID of the currently active element, and then type the class name and click Add Class. Oxygen will automatically suggest classes that match your input.

To switch between editing styles for the ID and class, simply click ID or Class to open the class dropdown and then click the Selector that you'd like to edit.
To remove a class from an element, click trash icon next to the class name.
To delete all styles assigned to a class or ID, click the eraser icon next to the Selector name.
To copy styles from one Selector to another, click the copy icon next to the Selector Name you'd like to copy the styles from, then click the Selector you'd like to copy the styles to.
A list of all classes present on your site can be found at Manage -> Selectors.

Templating Overview

Templates are designs created in Oxygen that are applied to multiple places on your website. They can be managed inside the WP admin from Oxygen > Templates.
You can create templates that apply to pages, blog posts, WooCommerce products, member portals, bbPress, search results, custom post type archives, and every other part of your site.
Creating a Template & Applying It To Content

Select Oxygen > Templates in the WordPress admin panel, then click Add New Template.
Enter a name for the template, and then click Publish.
Specify where the template applies using the options under WHERE DOES THIS TEMPLATE APPLY?, then click Update to save your changes.
Click Edit with Oxygen to design the template.

Inner Content
Display the content that your template applies to using the Inner Content element.
To add an Inner Content element to a template, click +Add > Basics > Other > Inner Content.
The area covered by the Inner Content will be editable with Oxygen for each item the template is applied to.
If no inner content is created with Oxygen, the WordPress content will be used instead - whether it is a post, page, WooCommerce product, bbPress forum topic, or anything else created within WordPress.
For example, when you apply a template containing a header, Inner Content, and a footer to all pages of your site, the Inner Content area is editable on all pages. You can then use Oxygen to design the Inner Content area for each page or post, while the header and footer will remain the same.
Dynamic Data
Dynamic Data is used to link the design elements within your template to live data from from your WordPress database.
For example, you can link a Heading element in your blog post template to the Post Title in the database. Each blog post displayed with the template will have its title placed in the Heading element. Similarly, you can link a Text element to your post content, link an image or section background to your post's featured image, and much more.
Inheritable Templates
Templates containing an Inner Content element can be inherited by other templates.
Select the template you wish to inherit from Inherit design from other template list. Then save the template.
The editable area of the inheriting template will be nested inside the Inner Content area of the template which is being inherited.
For example, you may have a "Main Template" with a header, Inner Content, and footer. You now want to create a "Blog Post Template" which uses the same header and footer.
Set the "Blog Post Template" to inherit the "Main Template", and it will pull in the header and footer from the "Main Template", and the area editable on the "Blog Post Template" will be the Inner Content area.
Template Priority
When your template settings mean multiple templates could apply to the same content, the template with the highest priority number is used.
To set the priority, specify the Template priority number.
Previewing Content The Template Is Applied To
When editing a template which has been applied to content at Oxygen -> Templates -> Edit, you can preview the content which the template is applied to directly inside Oxygen's visual editor.
Choose the content you wish to preview from the Previewing dropdown menu.
Note: this dropdown may be blank if you haven't yet applied the template to any available content.
Manually Applying Templates
You can manually apply a template to any individual post, page, or custom post type.
To apply the Oxygen template to a specific item on your site, follow these steps:

In the WordPress admin panel, go to the Edit screen for the post/page/CPT you wish to apply the template to.
Select the template from Render page using template list, then save the page.

Example Template Structure
Here is an example structure which could be found on a site with pages, blog posts, and WooCommerce products.

Main template - has header, footer, and Inner Content area. Applies everywhere using Other -> Catch All.
Page template - inherits Main template, has Inner Content area. Applies to all Pages using Singular -> Page.
Blog Post template - inherits Main template, applies to all Posts using Singular -> Post. Instead of an Inner Content area, this template uses Dynamic Data to display post title and content.
Generic Archive template - inherits Main template, applies to all archives using Archives -> All Archives. Instead of an Inner Content area, this template uses an Easy Posts element to list all the posts displayed by the archive.
WooCommerce Product template - inherits Main template, uses Inner Content area to display the WooCommerce product. Applies to all Products using Singular -> Products.
WooCommerce Shop/Archive template - inherits Main template, applies to the WooCommerce shop page which is an archive, and all WooCommerce categories, using Archive -> Post Types -> Products and Archive -> Taxonomies -> Product Categories. Because the Generic Archive template already applies to all archives, this template must have a higher priority number to override it.

Advanced Custom Fields

Oxygen integrates with Advanced Custom Fields / Advanced Custom Fields Pro.
If Advanced Custom Fields is installed and fields are present for the item being edited or previewed, fields created in ACF for that item will integrate with Oxygen's dynamic data functionality and automatically appear in the Insert Dynamic Data dialog.
Once the Insert Dynamic Data dialog is open, click Advanced Custom Fields to see the available fields.
Oxygen tries to keep the user interface clean by only showing fields present for the post type or item you are editing or previewing, but sometimes this may not show you fields you need to use. To to force the display of all fields, go to Oxygen -> Settings -> General in the WordPress admin area and enable the Show all ACF fields in the Dynamic Data Dialog setting.

Using Oxygen with Page Builders

Oxygen is compatible with page builders such as Elementor, Beaver Builder, Themify Builder, Thrive Architect, Visual Composer, and any other page builder that controls the output of the function the_content() in WordPress.
To use Oxygen with page builders, create a Template from Oxygen -> Templates.
Design the template as desired, typically with a header and a footer.
Where you want the content editable by the page builder to be placed, use the Inner Content element. Go to +Add+ -> Basics, scroll down to Other, and select Inner Content to add it to your template.

All items rendered with this template will now work with your page builder. You may use the page builder to create content inside the Inner Content container.
Do You Need a Page Builder with Oxygen?
No, of course not. You can design your entire site with Oxygen.
However, one reason you might want to use Oxygen with a page builder is that maybe you already have built a site using a page builder, and you don't want to redo it all in Oxygen yet, but you still want to install Oxygen to replace your theme and take more control over your headers, footers, and other site templates.

Revisions System

Note: It is very important to keep regular backups of your site. There are certain scenarios where the Oxygen revisions system cannot help you, and a backup will be the only way to recover your designs.
Oxygen's revisions system grants some redundancy and recoverability to your designs. You can access the revisions for any post or template by clicking the +Revisions link at the bottom of the Oxygen meta box.

Revisions are created every time you click Save in the Oxygen builder, as long as the design has been saved at least once.
To preview a revision, click the "Preview" link in the revision list. This will launch that version of your design in a new tab.
Once you have found the revision you'd like to restore, click the "Restore" link and that version of your design will be restored. The design that was active before you restored will also be saved as a new revision. You can now see which revision of your design you are using by looking for the (current) indicator in the revision list.

Global Styles

Global Styles allow you to set site-wide styles for the elements on your pages. This gives you an easy way to change the look and feel of your design for the entire website at once.
If an element doesn't have styles created specifically for it, the Global Styles will be used.
Global Styles can be edited from Manage > Settings > Global Styles.
Colors
Define sitewide color palettes. Editing a color here will update it everywhere it is used.
See Global Colors for details.
Fonts
Choose the fonts used on your website.
See Global Fonts for details.
Headings
You may specify global styles for the headings (h1, h2, h3, h4, h5, and h6).
For each heading tag, you can customize the following:

Font Size
Font Weight
Line Height
Color

Body Text
Body text is all text on your site. The settings set for headings override the body text styles.
For body text, you can configure the following:

Font Size
Font Weight
Line Height
Color

Links
In Oxygen, there are three link elements: Text Link, Link Wrapper, and Button.
Settings within All applies to all types of link elements, and also to links created outside of Oxygen - for example, links in blog post content.
Text Link & Link Wrapper Settings

Color
Font Weight
Text Decoration (underline)
Hover Color
Hover Text Decoration

Button Settings

Font Weight
Border Radius

Widths & Breakpoints
Page Width: Set the page width for the site. See Page Width for details.
Tablet: Set the tablet breakpoint.
Landscape: Set the landscape breakpoint.
Portrait: Set the portrait (mobile) breakpoint.
You must regenerate Oxygen's CSS cache via Oxygen > Settings > CSS Cache after changing these breakpoints.
Sections
Control the paddings for the containers for Section elements. The defaults are 75 pixels for the top and bottom edges, and 20 pixels for left and right edges.
Header Builder element will use the left and right paddings, but ignore the top and bottom.
Animate on Scroll
Configure animations that are triggered on scroll using the Animate on Scroll library. The settings chosen here will become the default animation settings for any element that has animations enabled. These global animation settings can be overridden on a per-element basis.

Animation Type - Determines the type of animation that will be used, such as flip, slide, or fade.
Animation Duration - Determines the number of milliseconds over which the animation takes place.
Animation Anchor - Defines which position of the element, in relation to the viewport, should trigger the animation.
Animation Easing - Defines the speed curve of the animation. Ease-in-out, for example, will cause the animation to be slower at the beginning and end and faster in the middle.
Animation Trigger Offset - Defines offset of animation trigger point (in relation to viewport scroll position) in px. A positive value can be used to ensure the entire element is in the viewport before the animation is triggered, whereas a negative value can be used to trigger the animation before the element enters the viewport.
Animation Delay - Determines the length of time between the animation being triggered and the animation beginning.
Animate Only Once - By default, an element leaving the viewport re-sets the animation and causes it to be re-triggered when the element re-enters the viewport. You can disable this behavior by choosing "Yes."
Disable On - This allows you to choose a viewport width below which animations will be disabled. It's a good idea to disable animations for mobile devices to improve performance.

Scripts
Enable extra functionality via scripts.
Smooth Scroll to Hash Links
The Smooth Scroll to Hash Links script causes hash links, which is a link where the URL references the ID of an element on your page, to smoothly scroll the viewport to the targeted element. To enable it, tick the "Smooth Scroll to Hash Links" check box.

Scroll Time - The number of miliseconds that it takes for the viewport to scroll to the targeted element.