诗语，作者 Oxygen Builder 文档

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.

Post Type Manager

By default, Oxygen's metabox appears on the Edit screens for all post types.
You can hide the Oxygen metabox from post types where you do not need it at Oxygen -> Settings -> Post Type Manager in the WordPress admin.

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.

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.

Rebuilding Live Sites

Once Oxygen is activated, it disables the active theme on the site, which means that anything created or rendered by the theme will also be disabled. As such, it's not recommended to install Oxygen on live sites.
There are two methods that can be used to rebuild existing sites; the method you need to choose will depend on if the site is static or active.
Static Sites
If the site is static and doesn't have users logging in or purchasing products then you can create a fresh WordPress install, install Oxygen and rebuild the site from scratch. Once you're happy with it, you can follow these steps to make it live:

Take a full backup of the live site in case you need to revert your changes
Export the new site using All In One Migration and import it to the new site: https://en-gb.wordpress.org/plugins/all-in-one-wp-migration/

Once the site has imported, you will need to:

Save your permalinks twice via Settings > Permalinks
Resign your shortcodes via Oxygen > Settings > Security
Regenerate your CSS cache via Oxygen > Settings > CSS Cache

Live Sites
If the site is active and not static, you can do something like this:

Clone the site to a development/staging environment
Install Oxygen on the site clone
Create templates to display your content and rebuild your pages using Oxygen

Once you're happy with the design and that everything is functioning correctly, you need to merge the changes with your live site:

Put the live site into Maintenance mode
Take a full backup of the live site in case you need to revert your changes
Install Oxygen
Export Oxygen's settings from the development site and import them to the live site via Oxygen > Export & Import
Create all of your templates on the live site. Copy the shortcodes for the templates from the development site to the live site by clicking +Shortcodes below the Edit with Oxygen button
If you've added any pages or modified existing pages using Oxygen, you will also need to copy the shortcodes for those pages from the development site to the live site

Once everything is in place, you will need to:

Save your permalinks twice via Settings > Permalinks
Resign your shortcodes via Oxygen > Settings > Shortcodes
Regenerate your CSS cache via Oxygen > Settings > CSS Cache

If you have any caching plugins installed, you will also need to clear the caches.

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

Gutenberg Integration / Client Mode

Note: Oxygen's Gutenberg integration is only accessible if the Oxygen Gutenberg plugin is installed and activated.
Oxygen's Gutenberg integration allows you to design entire pages or individual blocks in Oxygen, and then use and edit them directly in the Gutenberg block editor. You will be able to edit the following field types directly in Gutenberg:

Text
Rich Text
Images
Icons
Link URLs
Section Background Images

By using Gutenberg, you or your clients can make content-only changes easily in the Gutenberg editor with no chance of making bigger changes or tampering with parts of the design that shouldn't be changed.
How to create a block
Oxygen blocks for Gutenberg can be created in three ways:

Go to Oxygen -> Block Library and create a new block
Click the hamburger icon on a Section or Div's label in the Structure pane, and click "Copy to Block"
After designing a page, check the "Make This Full Page Editable In Gutenberg" checkbox in the Oxygen meta box for that page

Once a block has been created in one of these ways, you can use and edit them directly in the Gutenberg editor on posts and pages.
USING A BLOCK IN THE GUTENBERG EDITOR
If you're adding a block created via the Block Library or the Structure pane in Oxygen, click the + button in Gutenberg and select the Oxygen Blocks category. Click the block name to add it to your page or post.

If you'd like to add an entire page that's been saved as a block via the Oxygen meta box, choose the Oxygen Full Page Blocks category and click the full page block name to add it to your page or post.

Once the blocks you've chosen are inserted into Gutenberg, you're ready to edit their content.
EDIT THE CONTENT IN THE GUTENBERG EDITOR
Text, images and link text can be edited by clicking on the relevant item within the builder. Icons, background images and URLs can be edited from the Block Sidebar menu to the right of the page content.

To identify which element a field in the Block Sidebar belongs to, hover over or click it. When you hover a field, the associated element is outlined in blue. When you click it, the element animates briefly.

CLIENT MODE
Once you've moved all of your Oxygen pages or designs into Gutenberg, you can effectively switch Oxygen to client mode by going to Oxygen -> Settings -> Post Type Manager and checking the box for all post types where you'd like to have the Oxygen meta box hidden. In cases where you're the only user with administrative access, you can go to Settings -> Role Manager and disable Oxygen access for all non-administrative users.
EDITING THE BLOCK IN OXYGEN
Editing an in-use block in Oxygen will change the design everywhere that the block has been used. Content changes that have been made in Gutenberg will remain unless the elements whose content has been changed are deleted from the block or page design in Oxygen.
Unsupported elements
Some elements, such as the Repeater and Dynamic Data elements are not supported in Gutenberg. They will work on the front end, but will not be displayed in the Gutenberg editor. Instead, you'll see a placeholder when an unsupported element is present in Gutenberg.

To change the placeholder labels (.e.g "Repeater Preview Unavailable"), simply rename the element in Oxygen by clicking its hamburger menu in the Structure Pane and clicking "Rename".

Websites

To install a complete website from Oxygen's design library, click Oxygen > Home in the WordPress admin panel and then click Install a website.

Click view demo to preview the website, then click Install to install it.
Confirm installation by clicking Confirm & Install. The website is now installed.

You can edit the installed pages from Pages -> All Pages and the templates from Oxygen -> Templates.

Importing & Exporting

To copy an entire WordPress install with all of your content, plugins, settings, and everything else, you can use a plugin like All-in-One WP Migration.
Once you've created a .wpress package with All-in-One WP Migration, import the package on the target site and do the following:

Save your permalinks twice via Settings > Permalinks
Resign your shortcodes via Oxygen > Settings > Security
Regenerate your CSS cache via Oxygen > Settings > CSS Cache
Check to verify that everything looks & works as you expect

You may also need to open each template in the admin area and click the Update button on the right-hand side, but this is rare if you have followed the above steps.
If you just want to copy Oxygen settings or some page designs, use the methods below.
Regardless of the migration method used, you may need to re-sign your site's shortcodes for all elements to render properly once it is moved. See "Re-Signing Oxygen Shortcodes" below for instructions.
Copying Oxygen Settings
You may easily copy Oxygen's settings (global styles, classes, custom selectors, and style sheets) from one install to another. Follow these steps:

On the original install, select Oxygen > Export & Import in the WordPress admin panel.
Copy the text from the Export box.
On the new install, select Oxygen > Export & Import in the WordPress admin panel.
Paste the text into the Import box.
If you want to import Global Colors, tick the Import Global Colors checkbox below the Import box. This will overwrite all currently present Global Colors on the target site.
Click Submit.

Copying Individual Page & Template Designs
To move a Template, Page, Post, or any custom post type, browse to the Edit screen for that post, then click [+] Shortcodes.

Copy the shortcodes.
Then, create a new Template or Page on the new website, and paste the shortcodes into the same [+] Shortcodes box.
Note that if your design relies on any of Oxygen's settings, you must also copy those to the new site, as per Copying Oxygen Settings above.
Moving All Templates & Other Site Content At One Time
To move all content and templates from one site to another, you should use the built-in WordPress import and export tools.
First, on the original install, select Tools > Export in the WordPress admin panel and follow the process.

Now, on the new install, select Tools > Import and follow the process.

Note that it is usually necessary to copy your Oxygen settings to the new install, otherwise your page designs will be missing your global styles, classes, etc.
Re-Signing Oxygen Shortcodes
If parts of your design are missing after migrating a site, you will need to re-sign your Oxygen shortcodes.
Before proceeding, perform a full backup of your site.
Once your site has been backed up, go to Oxygen > Settings > Security in the WordPress admin panel and ensure that the "Check Oxygen's shortcodes for a valid signature before executing" checkbox is checked. If it's not, check it and then click Save Changes.
Next, click the "Sign All Shortcodes" link just below the Save Changes button.
Now, check the "I have made a complete backup of my site" box and the boxes for each post type on which you'd like to re-sign the shortcodes. Usually, you'll want to re-sign shortcodes on ct_template, page, and post.
Click the Start shortcodes signing process. You'll be able to watch the progress and see when the re-signing of Oxygen shortcodes has been completed.
Once the process has finished, check the posts or templates that were missing elements and those elements should be visible and editable again.