标签： settings

Settings

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.

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 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.

Page Width

Default Page Width For Entire Site
When Oxygen is first installed, the default page width is set to 1120px.
This can be changed from Manage > Settings > Global Styles > Width & Breakpoints.
All pages on your website will use this width, unless a custom width is specified for that specific page or the template used to render it.
Custom Page Width On a Specific Page or Template
To override the global page width on a specific page or template, go to Manage > Settings > Page Settings and specify the Page Width.
This page width will only affect the page or template you are currently editing.
How Page Width Works
Your page width setting controls the container width of Sections and Header Builder. Any content placed inside Sections and Header Builders will be contained in a rectangle no wider than the page width.
When a Section or Header Builder is rendered, Oxygen determines the width to use as follows:

Is a custom container width set for the specific element being rendered? If so, use this custom width.
If not, is a custom width set at Manage > Settings > Page Settings for the template or specific page rendering the content? If so, use this width.
If not, use the global page width set at Manage > Settings > Global Settings > Page Width.