诗语，作者 Oxygen Builder 文档

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.

CSS

Oxygen's visual interface provides controls for many CSS properties, but sometimes you may want to add additional, custom CSS that can't be created with Oxygen's visual controls.
When writing custom CSS, Oxygen displays the result right inside the editor.
Adding CSS Properties to an Element or Class
When editing an element or class, you may specify any additional CSS properties that Oxygen doesn't provide visual controls for. Click Advanced > Custom CSS and add CSS properties you need.
Adding Custom CSS to a Page or Template
Additional CSS can be added to a page or template using the Code Block element, which can be added from +Add -> Basics -> Code Block
Adding Sitewide CSS
Stylesheets that will be loaded on every page of your site can be added from Manage -> Stylesheets.

Tabs

The Tabs element allows you to add tabbed content to your designs. Clicking a tab will show the content associated with that tab. The content associated with the other tabs will be hidden.
Add a Tabs element to your page from Add+ > Helpers > Tabs.
Structure Of Tabs
There are two parts to a Tabs element: Tabs and Tabs Contents.
The Tabs element contains multiple Tab elements. The Tabs Contents contains a Tab Content for each Tab.
Clicking a Tab will show its corresponding Tab Content element.
For example, clicking the first Tab will show the first Tab Content element. Clicking the fifth Tab will show the fifth Tab Content element.
Any elements can be placed inside a Tab or Tab Content. By default, text elements are placed inside each Tab and Tab Content, but these can be deleted.
Adding & Deleting a Tab or a Tab Content
To add another Tab or Tab Content, simply click an existing Tab or Tab Content element and duplicate it.
You can also select the Tabs element and use the Add Tab button to add another Tab. This will also automatically add another Tab Content element.
Deleting a Tab will not delete its associated Tab Content.
Styling Tabs
Oxygen automatically creates a class and adds it to all the Tab elements, and an active class that will only be applied to the last clicked tab.

To style all Tab elements at the same time, click a Tab, then choose the tabs-****-tab class. Styles applied to this class will be applied to all of the Tab elements.
To style just the active Tab, click a Tab, then choose the tabs-****-tab-active class. Styles applied to this class will only be applied to the currently active class.
To layout your list of Tabs, elements inside a Tab, or elements inside a Tab Content, you can use Oxygen's standard layout controls.

Design Library

Shortcode Wrapper

The Shortcode Wrapper element wraps everything nested inside it between the opening and closing tags of the specified shortcode.
Add a Shortcode Wrapper element to your page from Add+ > WordPress > Shortcode Wrapper.
The Shortcode Wrapper element is most commonly used with content restriction type shortcodes. You would add the restriction shortcode to the Shortcode Wrapper and then drag all of the elements that you want to restrict access to inside of the Shortcode Wrapper.
The Shortcode Wrapper element isn't intended to be used with contact form shortcodes. If you want to add a contact form shortcode to your site (or any other non-nestable shortcode), please see the Shortcode element.

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.

Testimonial

The Testimonial element displays a customizable testimonial on the page, with various options for layout, typography, spacing, and image settings.
Add a Testimonial element to your page from Add+ > Helpers > Testimonial.
Image

Image URL - set the URL of the testimonial photo
Image Size - control the size of the photo
Image Spacing - control the spacing between the photo and the testimonial text.
Image Position - position the image before or after the testimonial text.

Layout

Layout - choose horizontal or vertical.
Vertical Layout Below - set a screen width below which the image and testimonial text become vertically stacked. You can choose a horizontal layout as the default, while setting the Vertical Layout Below to a smaller screen width.
Content Alignment - select left, center, or right to align the elements within the testimonial.
Mobile Content Alignment - select left, center, or right to override the Content Alignment setting at widths below the width set in Vertical Layout Below.

Typography
In this tab you can control the typography for three sets of text within the Testimonial element: Author, Author Info, and Text.
Each of these three tabs have identical typography settings, which are the same as those found at Advanced > Typography.
Spacing
In this tab, you can control the amount of spacing underneath each text element in the testimonial.

Text Space Below - set the spacing below the testimonial text.
Author Space Below - set the spacing below the testimonial author.
Author Info Space Below - set the spacing below the testimonial author info.

Shortcode

The Shortcode element can be used to add shortcodes from other plugins to the builder.
Add a Shortcode element to your page from Add+ > WordPress > Shortcode.
The Shortcode element is commonly used with contact form shortcodes, but can be used with most non-nestable shortcodes. If you want to add a nestable shortcode to your site (such as a content restriction type shortcode where you need to wrap it around the elements that you want to restrict access to), please see the Shortcode Wrapper element.

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.

Toggle

The Toggle element displays an clickable toggle that will show or hide the element that follows it.
Add a Toggle element to your page from Add+ > Helpers > Toggle.
Toggle Structure
By default, a Heading element will be placed inside the Toggle element, but this can be deleted and replaced with any other elements.
The element placed immediately after the Toggle will be shown or hidden when the Toggle is clicked.
In the below example, a Heading is placed inside the Toggle. When it is clicked, the Text element that immediately follows the Toggle will be shown or hidden.

Toggle Settings

Icon Color - set the color of the Toggle element』s icon.
Icon Size - set the size of the Toggle element』s icon.
Toggle Initial State - whether the toggle is open or closed when the page is first loaded
Toggle Target (optional) - by default, this is left blank and the next element under Toggle will be used as the target. If, however, you want to toggle a specific element elsewhere on the page by clicking the Toggle element, you can specify the ID of the element to show/hide.