Oxygen Builder 文档

Responsive Controls

Responsive means that your design looks good on a variety of screen sizes and devices - all the way from wide screens found on desktops and laptops to small screens found on tablets and phones.
Responsive design is achieved by setting different styles for elements depending on the width of the browser viewport - e.g. stacking columns vertically or using a smaller font size below a certain width.
Previewing At Different Widths
To preview your design at various screen widths, click any element, then click the device icon at the left to open the device dropdown.
Then choose a width from the device dropdown to preview your design at that width.

By default, Oxygen displays your responsive preview at one pixel wider than the next smallest width from the width you have chosen.
To adjust the preview width, click the responsive ruler at the bottom of the screen, then drag it left or right.

Creating Responsive Styles
In Oxygen, most properties can have different values for each browser viewport width.
To customize the value of a property for a particular width, select the screen width you wish to create styles for from the device dropdown.
All edits made to the property at this width will only take effect at this width and below.
Hiding Or Showing Elements Based On Screen Width
To hide an element below a certain screen width, choose the screen width you wish to hide the element below from the device dropdown. From Advanced > Layout, set the display property to none.

To show an element below a certain screen width, choose All devices from the device dropdown and set the display property to none. Then choose the screen width below which you want the item to be visible, and set the display property back to block, flex, etc. as appropriate.
Responsive Columns
Oxygen's Columns element is responsive by default, and has special responsive settings to customize and control the layout and order of your columns on narrower screens.

Stack Vertically Below – Below the chosen screen width, columns will stack vertically.
Reverse Column Order Below – Below the chosen screen width, the columns will be displayed in reverse order. This is useful for achieving a consistent layout when columns are stacked vertically for alternating column layouts.
50% Width Below – This is useful for multiple-column layouts with four or more columns, when the columns should be 50% width on medium width screens and stack vertically on narrow screens.

Responsive Menus
Oxygen's Menu element is responsive by default and will collapse into a toggle at 992px.
This can be customized at Primary > Mobile Responsive for the menu element.
Other settings are also available to adjust the menu styles, adjust the icon style, and to show or hide dropdown links in the responsive menu.

Deleting Responsive Styles
To delete the responsive styles created for a particular width, click the device icon to open the device dropdown. Then click the red X next to the screen width to delete all styles set for that width.

Further Reading
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Layout & Spacing

Oxygen's flexbox-powered layout engine makes it easy to create any layout you can imagine.
You define the structure of your page using Sections, Columns, and Divs.
Then, you place your content like headings, text, videos, and more inside of these elements, and control their layout and alignment using Oxygen's layout controls.

Sections
In general, your pages will be constructed from multiple Section elements. All other elements on your pages will be placed inside these sections.
The Section element automatically constrains the content inside of it to be no wider than the Page Width. You can specify a custom width for the section at Advanced > Size & Spacing > Container Width.
Columns
The Columns element is for column-based content. You can choose from preset column layouts, or specify the widths of the individual columns manually.
The Columns element has responsive controls, so that below a specified screen width, you can:

stack the columns vertically
reverse the order of the columns
force the column widths to 50%

Divs
The Div element is most commonly used for grouping elements inside of a Section or Column to control the layout of only those elements, without affecting the layout of other elements inside the Section or Column.
For example, you may place a horizontally stacked Div inside a vertically stacked Section to create a horizontal layout inside a vertical layout.
Layout & Alignment Controls
Sections, Columns, and Divs have settings to control the layout and alignment of the elements placed inside of them.
Child Element Layout
The child elements of a section, column, or div can be stacked horizontally or vertically.

You can change the Child Element Layout setting based on screen width to make your layout responsive.
Item Alignment
Once you choose how to stack your child elements within a container, you will see additional settings for aligning your elements within this container. These settings enable you to align your elements to one side or the other, center them in the middle, or place them near the top or bottom of the container.

Spacing
Mouse over the edge of the element to reveal the spacing drag bar. Click and drag this bar to adjust the element spacing.
There are two types of spacing:

Padding - space inside an element
Margin - space outside an element

Instead of using the drag bar, you can manually specify these values at Advanced > Size & Spacing.
 
CSS Grid is available as a layout option in Section, Div, Gallery, Easy Posts and Repeater elements.
You can learn more about Grid here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid and here: https://css-tricks.com/snippets/css/complete-guide-grid/.
Grid Layout
Enable Grid checkbox: Toggle to enable/disable CSS Grid.

Columns
Column Count: Select how many columns you want in your grid.
Auto-Fit Columns: This overrides the column count and will fit as many children on one row as possible based on the Min Width value.
Min Width: Set the minimum width of each child. If you are having problems making your grid responsive, you likely need to decrease this width if you have multiple children on one row.
Max Width: Set the maximum width of each child. The default 「1fr」 unit means that each column will take up one equal fraction of the available space based on the number of columns. If you have specified 4 columns, 1fr is equal to 25%..
Gap: Set the gap between your Grid columns.
Horizontal Item Alignment (Left, Center, Right, Stretch): If the Grid child isn』t taking up the full width of the available space, this setting will align the child within its Grid cell based on the Horizontal Item Alignment selection.

Rows
Row Behaviour
Auto: The correct number of rows will be used based on the amount of children in your grid.
Explicit: Set the row count, min and max heights.
Row Count: Set how many rows you want in your Grid. This can be useful when using the Child Span Override (see below).
Min Height: Set the minimum row height.
Max Height: Set the maximum row height.
Match Height of Tallest Child checkbox: This option makes all rows the same height, based on the tallest child in the Grid. .
Gap: Set the gap between your Grid rows.
Vertical Item Alignment (Start, Center, End, Stretch): If the Grid child isn』t taking up the full height of the available space, this setting will align the child within its grid cell based on the Vertical Item Alignment selection.

Default Child Span
Column Span: Set how many columns you want each child to span by default.
Row Span: Set how many rows you want each child to span by default.

Child Span Override
This control will reflect the number of items in the Grid. Click on one of them to explicitly set the number of rows or columns they will span.
Column Span: The number of columns that will be spanned by the selected child.
Row Span: The number of rows that will be spanned by the selected child.
Reset Grid Children: Reset everything set in the Child Span Override section.

Editor Overview

Oxygen's visual editor is a what-you-see-is-what-you-get interface for creating and editing page designs.
Adding Elements To Your Page
Click the +Add button to open the element browser.
Click on the element you wish to add to add it to your page.
Editing Element Properties & Styles
Properties for the currently active element are shown in the Primary and Advanced tabs in the left sidebar.
Common properties and properties specific to the element you are editing will appear in the Primary tab.
The Advanced tab provides options for extensive customization of the element.
Choosing An Element To Edit
To activate an element, simply click on it in the page preview or in the Structure panel.
Navigating to Parent Elements
Sometimes an element is not clickable because all of its space is taken up by other elements nested inside of it. To activate an element that can't be clicked directly, click an element nested inside of it, and then click on either:

the pink title bar for the parent element
the element you wish to edit in the breadcrumb path near the top of the left sidebar
the up arrow to the right of the element name in the purple title bar

Editing An Element's Text
To edit text on your page, double click on the text in the page preview.
A toolbar for basic text formatting will appear at the top of the screen.
When you are done editing, click anywhere outside of the text, or click the Done button in the top bar.
Re-ordering Elements
There are two ways to reorder elements.
The first way is to simply drag and drop an element to a different position as shown below. To start the drag, you can click on the element itself, or the drag icon on the left side of the element's title bar.

When dragging very large elements, dragging elements a very long way, or when creating complicated nesting, the Structure panel is often an easier way to position the element where you want it.
Click the Structure toggle near the top right corner of the screen to open the Structure panel. Then click and drag an element to reposition it.
Adjusting Element Spacing
Space around and inside the active element can be adjusted by dragging the purple spacing bars around the boundary of the element.
First, activate the element you wish to adjust spacing for by clicking it.
Then, hover the mouse pointer over the inside or outside edge of the element until a purple drag bar appears.
Click and drag the bar to adjust spacing.
Undo
In Oxygen versions prior to 3.4, a one-step Undo is available if you needed to reverse a delete. After deleting an element, the red undo bar will appear in the to left corner of the design preview as shown below. Click the Undo link to reverse the delete.

In Oxygen version 3.4 or newer, full undo/redo functionality is available via the top bar in the Oxygen builder.

Click the circular back arrow to revert a change, or the circular forward arrow to reinstate a change. To view a complete history of all available undo points in your current session, click the History button to launch the History Pane.

In the History Pane, click any undo point to navigate to that point in your session's history. Click Clear All if you'd like to clear all undo nodes (Warning: This cannot be undone.)
Oxygen's undo history persists on a per-session basis. This means that reloading the builder, or exiting and re-entering the builder, will clear the undo history.

Visual Editing