Oxygen Builder 文档

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.

Global Fonts

Rather than setting your font on each individual element, you can set fonts globally from Settings > Global Styles > Fonts.
To set a font for the headings, select it from Display font list. To set a font for all other text, select it from Text font list.
By default, heading elements in Oxygen will use the Display font and text elements will use the Text font.
You can override this on a per element basis by explicitly choosing Display or Text from the Font Family dropdown.
Using Google Fonts
Google Fonts can be used with Oxygen with no special configuration. Every font on Google Fonts is available in all of Oxygen's Font Family lists. Because there are so many fonts on Google Fonts, displaying them all at once in the Font Family list would not be practical. To use a font from Google's library, just start typing the font』s name, and the font will then appear in the dropdown.
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.
Using Custom Web Fonts
Custom web fonts (.woff, etc.) can be uploaded using the Elegant Custom Fonts plugin.
Fonts added using this plugin will appear automatically in Oxygen's font dropdowns.
Elegant Custom Fonts is the best way to use custom fonts with WordPress, and was created by the same dev team that built Oxygen.
Using Adobe Fonts
You can connect Oxygen to your Adobe Fonts account from the Oxygen -> Settings -> Typekit page in your WordPress admin panel.
Using Web Fonts From A Hosted Service
To use web fonts hosted by a service other than Google Fonts or Typekit, follow the instructions for that service. To embed the fonts in your site, usually they'll give you some JavaScript code you paste in your HTML head.
To make the fonts appear in Oxygen's Font Family dropdowns, simply enter in the font family name in Elegant Custom Fonts, but don't specify any @font-face rules - since those are coming from the hosted service.
The fonts will then appear in all of Oxygen's Font Family dropdowns.
You can also use this trick to use system fonts with Oxygen.
Quirks with Reusable Parts
To use a font in a reusable part, it must be added to Settings -> Global Styles -> Fonts.
Simply choosing it from the Font Family dropdown will not work in a reusable part if the font is not also present at Settings > Global Styles > Fonts as the Display font, Text font, or another font.
Further Reading
https://practicaltypography.com/typography-in-ten-minutes.html

Global Colors

Global Colors allow you to edit a color in one place and have those changes take effect everywhere that color is used on your site.
Creating a Global Color
To save a color as a global color, click the globe icon on the right side of any color input box and then provide a friendly name for the color.

Alternatively, go to Manage -> Settings -> Global Styles -> Global Colors.
Note: the globe icon will not appear if no color is set.
Choosing a Global Color
Swatches for all the global colors will appear at the bottom of the color picker.

Click a swatch to choose it.
Editing a Global Color
When a global color is used, it can be edited by clicking on its name. For example, in the screenshot below, clicking on "Global Colors - Primary A" would open up a color picker to edit that global color.

Global Colors can also be managed from Manage -> Settings -> Global Styles -> Global Colors.
Color Sets
To keep things organized, all global colors exist in a color set. The default color set is named Global Colors.
When importing elements from the design library, a color set with the name of the design set you are importing will be automatically created, and global colors for the main colors used by that design will also be automatically created.

Settings

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.

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.

Plugins

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.

Using Custom Fonts

You can upload custom web fonts (.woff, etc.) to the Oxygen using the Elegant Custom Fonts plugin or the
Use Any Font plugin.
To add a font using Use Any Font, follow these steps:
Click Use Any Font in the WordPress admin menu
Click "Generate Free Lite / Test API Key" and then click "Verify" (or add your API key if you have one)
Go to the "Upload Font" tab and click "Add Fonts" on the right hand side
Give the font a name, select the font file from your computer and click "Upload"

The added font now automatically appears in all Oxygen's Font Family lists.
To add a font using Elegant Custom Fonts, follow these steps:

Once the plugin is installed and activated, click Manage Fonts
Click Add Font Family, type font family name, then click Add Font Family

Click add @font-face, then choose font-weight and font-style.
Specify .woff URL, then click Add Font Face.

The added font now automatically appears in all Oxygen's Font Family lists.

Using Adobe Fonts

Adobe Fonts (formerly Typekit) is an online library of fonts. To use Adobe Fonts with Oxygen, you'll need to have an Adobe Fonts account.
Choosing an Adobe Font

Login to fonts.adobe.com.
Click Browse Fonts at the top left corner of the page.
Find a font you like and click it.
On the next page, click Add to Web Project.

Add Font to Web Project

On the modal window that pops up, click the "Create or add to existing project" drop down to create a new web project or add the font to an existing project.
Click Create or Save.

Obtaining an API Key and Entering it in Oxygen
On the Adobe Fonts website, click your account avatar at the top right of the screen, then click API Tokens.

On the next screen, click "Make me a new API token" to generate an API token.
Once you have your API token, go to Oxygen -> Settings -> Typekit on your Oxygen site. There, enter the API token provided by Adobe Fonts and click Submit. Once the key is validated, you'll have a Kit to use with Oxygen dropdown populated with all of the available web projects from your Adobe Fonts account. Choose one and click Submit. Now, any Adobe Fonts included in the web project you selected will show up in all of Oxygen's font family dropdowns. If they don't show up in the list, simply search for them and they will appear.