诗语，作者 Oxygen Builder 文档

Custom Attributes

Oxygen allows you to add custom HTML attributes to elements. You can find this option in the Advanced Tab of the Properties Pane, in the Attributes control section.

To add an attribute to an element, click the Add Attribute button. You can add multiple attributes to each element.
You can use the Dynamic Data buttons in the name and value fields to insert dynamic data.
To remove an attribute, click the x icon to the right of the attribute you'd like to remove.
Custom HTML attributes allow you to add data-attributes that are used by third-party JavaScript libraries, ARIA attributes & roles, and much more.

Header & Footer Code

Use the plugin Insert Headers and Footers to add code to your or before the tag.
Once the plugin has been installed, go to Settings > Insert Headers and Footers and you will see where you can insert your tracking and integration code, either in or before the tags. Simply copy and paste the code into one of the two text areas.

Once you insert your code, click Save.

JavaScript

You can write JavaScript and jQuery in Oxygen and see the results live.
Adding JavaScript to an element
Each element can have its own JavaScript. Click the Advanced > JavaScript tab to access the JavaScript editor.
%%ELEMENT_ID%% will be replaced with the actual ID of the element.
Example:
jQuery('#%%ELEMENT_ID%%').click(...)
Adding JavaScript to your page or template
Do you want to add custom JavaScript to your page or template? Add a Code Block (+Add > Basics > Code Block). Then click JavaScript to open the JavaScript editor.
Using jQuery
As is default with WordPress, jQuery is loaded automatically. To use jQuery, write jQuery('...'), not $('...').
Loading External JavaScript Libraries
You may load external JavaScript libraries in one of two ways:

create a plugin to enqueue them with wp_enqueue_script
upload them somewhere and insert the necessary tags

If you have code that looks like from your typography, analytics, or other 3rd party cloud provider, read this article on adding code to or before .

PHP & HTML

Custom PHP and HTML can be added to your page using the Code Block element. PHP behaves just like it does if you were coding it in a WordPress theme file. You can run the WordPress loop, make database queries, and use any other WordPress API functions.
To add a Code Block, click +Add > Basics > Code Block. Click PHP & HTML to access the editor.
Your code will be executed inside Oxygen, allowing you to see the results of your code live, without saving, uploading, and refreshing.

triage: comments list and comment form

Comments List
Comments List is used for displaying the user comments added to the specific post. Like other Oxygen elements, Comments List has a lot of settings which are used to customize the design. Select Advanced Styles tab to get access to the advanced settings like borders, custom CSS, Javascript, and more.

Using the presets
There is a number of comments list presets to choose from. Select the one that fits your site in the Load Preset Template list.

Once the preset is chosen, you may edit one or more settings manually. You may change borders, fonts, background, layout, etc.
Saving the presets
In Oxygen, you may also use your own presets for the comments list. To save the current settings as a preset, type its title in the Save Current as Preset and click Save.

The preset is now available in Load Preset Template list. To remove it from the list, click the cross button next to the preset title.

Using the templates
While designing comments list, it's possible to access the code and edit it. To see the template in CSS or PHP, select Basic Styles > Styles > Templates tab and click the one you want to modify. The code is displayed just like in the WordPress.

Click Apply Code to save the changes.
Click Collapse Editor to hide the code window.
Comment Form
With Oxygen, you may design the comment form the way you want. By selecting Basic Styles tab, you may quickly set up general settings like border color, text color, border radius, background color and text color of a submit button. Select Advanced Styles tab to get access to the advanced settings like borders, custom CSS, Javascript, and more.

Composite Elements Licensing

The Composite Elements library is a paid add-on for Oxygen that introduces new helper elements.
Why did some people get Composite Elements for free?
We announced on December 7th, 2020, that anyone who held an Agency License prior to the release date of 3.7 Release Candidate 1 would get Composite Elements for free. Those announcements can be found in our alpha blog post and our alpha release video.
Why didn't you let everyone know they needed to buy Oxygen before February 12th, 2021 to get Composite Elements for free?
Giving this add-on for free to existing users is a way to thank our long-time customers. We did not intend this as a marketing tactic to encourage new users to buy Oxygen, which is why the "cutoff date" was not announced more publicly or more visibly.
In addition to that, we don't have release dates. When we announced the cutoff in the alpha blog post & video, we didn't know the Release Candidate would go out on February 12th, so it would have been impossible to announce that as a cutoff date.
I missed the cutoff. Can I get a free Composite Elements license?
No.
I owned an Agency equivalent license prior to February 12th, 2021, but I still don't see Composite Elements in Oxygen.
This is usually because the license check is cached.

Make sure you're using your normal Oxygen license in the normal Oxygen license field. You can ignore the Composite Elements license field - you don't need to put anything there.

If you are putting the license in the correct field and it returns valid, try this:

Remove your license from the field and submit it while it's empty.
Re-enter your license and submit it again. Once the key has been saved, click Submit once more.
Check if Composite Elements now appear in the +Add Pane.

If the above steps do not resolve your problem, please contact us via https://oxygenbuilder.com/support and we'll investigate further.

Design Library

Builder Elements

Basic Elements

Oxygen's basic elements can be found at +Add -> Basics.
All possible web page designs can be created by combining these elements together.
Containers
Container elements allow you to create the structure and layout of your design. In general, all the content on your page will reside within container elements.
Deleting a container element will also delete the elements nested inside of it
Section
The Section element constrains the content within to the Page Width.
In Oxygen 3.4 and newer, you may insert Shape Dividers in to Sections.
Columns
The Columns element makes it easy to create responsive column-based layouts.
Div
The Div element is a generic container. In general, it has no effect on the layout of your page until specific styling options are set for it.
Read Layout & Spacing for more details on using the container elements to create your page layout.
Text
Oxygen provides four types of text elements.
To edit the text within any text element, double-click the text.
Heading
The Heading element is a text element that uses the HTML heading tags (h1, h2, h3, h4, h5, and h6). They are commonly used for titles, headings, and subheadings that help organize the content on a web page. Not only do they make it easier for users to scan through the web page, but also can help search engine robots understand the structure of content on your page.
Text
The Text element is a Div element that only contains text.
Basic formatting can be applied to this text with the formatting toolbar that appears at the top of the screen when the text is being edited.

Rich Text
The Rich Text element allows for extended formatting to be applied to text, using the WordPress TinyMCE editor.
Span
The Span element allows for creating special styles that only apply to the portion of your text wrapped with the Span.
To create a Span element, double click a Heading or Text element to edit its text. Then highlight the portion of the text you wish to wrap with the Span and click in the formatting toolbar.
Links
Oxygen provides three types of link elements. These elements create hyperlinks to other web pages, files, locations within the same page, email addresses, or any other URL.
The link URL can be set in the URL field at the top of the Basic Styles tab for all link elements.
You can type in any URL, or click the set button to browse and set the link URL to existing content on your site.
Text Link
A Text Link element is just like a Text element with a hyperlink to another URL.
Default link colors can be changed at Manage -> Settings -> Global Styles -> Links.
Link Wrapper
A Link Wrapper element allows you to create a single link for a group of elements.
All elements placed in a Link Wrapper will be clickable as part of the link.
Button
A Button element is similar to a Text Link element, except it is displayed as a button rather than plain text.
Simple styling options for the button are available in the Basic Styles tab.
Visual
Visual elements are used to add graphical elements to your page.
Image
Specify the URL to your image in the Image URL field in the Basic Styles tab.
Click Browse next to the Image URL field to upload or choose images from the WordPress Media Library. This will cause the full size image to be loaded in your design, regardless of the display size of the image.
Alternatively, you can use the Media Library option to make sure only the largest necessary version of your image is loaded in your design:

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
Video
The video element is a way to embed videos in your pages and ensure they are responsive and keep their aspect ratio - i.e. as the browser window shrinks, the video will shrink as well, while maintaining its proportions.
To embed a YouTube or Vimeo video, paste the URL to the video into the YouTube / Vimeo URL field in the Basic Styles tab. This must not be used for self-hosted videos.
To add a self-hosted video, click the "Manually Paste Iframe Code" checkbox. You can then paste in the below code and replace {your-video-url} with the URL of your video:
<iframe src="

Comment Form

The Comment Form element displays the WordPress comment form.
Add a Comment Form element to your page from Add+ > WordPress > Comment Form.
Form Fields

Border Color - set the color of the field borders.
Text Color - set the color of text typed into the fields.
Border Radius - set the border radius of the fields.

Submit Button

Background Color - set the color of the submit button.
Text Color - set the color of text within the submit button.

Style Output
If Selector Detector is enabled, the Style Output button will appear, allowing for further customization of the styles of the Comment Form.