Oxygen Builder 文档

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.

Superbox

The Superbox element allows you to create animated hover effects between two slides of content.
Add a Superbox element to your page from Add+ > Helpers > Superbox.
Superbox Structure
The Superbox element consists of two slides of content - Primary, and Secondary.
The Superbox (and the Secondary slide) will take on the size of the content in the Primary slide.
Any elements can be placed inside the Primary and Secondary slides.
By default, there is an Image in the Primary slide, and text in the Secondary slide. You can delete the Image and Text and place your own elements in the slides.

Placing & Editing Elements In Slides
Depending on your Superbox settings, a slide may fade out when you mouse over it, making it impossible to click its contents for editing purposes.
To work around this, use the Superbox Editing Mode to force the display of the primary or secondary slide.
Set the Superbox Editing Mode back to Live when you are done editing.
Creating Hover Effects
Animation Speed (in seconds) is the speed of the transition effects on each slide.
Control the display of the Primary and Secondary slides and what happens when the mouse is hovered over the Superbox in the Primary and Secondary sections.

Slide Direction - select in or out, and then select left, right, top, or bottom.
Initial Opacity - control the initial opacity of the slide.
Opacity on Hover - control the opacity of the slide on mouse hover.
Initial Scale - control the initial size of the slide relative to its original size.
Scale on Hover - control the size of the slide relative to original size on hover.

SoundCloud

The SoundCloud element displays an embedded SoundCloud module to play an audio file hosted on SoundCloud.
Add a SoundCloud element to your page from Add+ -> Helpers -> SoundCloud.
SoundCloud URL
Enter the URL in the SoundCloud URL field to embed the audio in the page.
Example URL: https://soundcloud.com/frankzappa/it-must-be-a-camel
Width
Control the width of the SoundCloud element.
Height
Control the height of the SoundCloud element.
Color
Sets the accent color of the SoundCloud element.
Auto Play
If you wish the audio to start playing automatically as the user lands on this page, check the Auto Play checkbox.
Show Comments
If you wish to show other people』s comments on this SoundCloud element, check the Show Comments checkbox.
Hide Related
To hide related tracks on this SoundCloud element, check the Hide Related checkbox.

Social Icons

The Social Icons element displays social icons with links to your social media pages.
Add a Social Icons element to your page from Add+ > Helpers > Social Icons.
URLs
To display your social icons, add your social media URLs to the appropriate fields. The following fields are available:

Facebook
Instagram
Twitter
RSS
LinkedIn
YouTube

If an URL field is blank, that icon will not be displayed.
Link Target

New Tab - Opens the link in a new browser tab.
Current Tab - Opens the link in the current browser tab.

Layout

Row - display the icons horizontally in a row.
Column - display the icons vertically in a column.

Icon Size
Control the size, in pixels, of all icons in the set. For best results, use multiples of 4, like 16, 20, 40, 48, 52, 64, etc.
Space Between Icons
Control the spacing, in pixels, between each icon in the list.
Use Brand Colors
To use the default brand colors for each icon, check the Use Brand Colors checkbox.
Icon Style
Control the icon style with these three options:

Blank - no style (default)
Circle - places each icon inside a circle
Square - places each icon inside a square

Additional Styling Options If Not Using Brand Colors
If you do not wish to use brand colors, but to set your own colors for all of your icons, uncheck the Use Brand Colors checkbox. The following color options will display:

Background Color - Changes the background color of the circle or square encompassing each icon.
Background Hover Color - Apply a different background color on hover.
Icon Color - The color of the icon.
Icon Hover Color - Change the color of the icon on hover.

Note: Background Color and Background Hover Color only apply when when Icon Style is set to circle or square.

Slider

The Slider element is used to add slides to your page. You can place any content inside the Slider.
Add a Slider to your page from +Add > Helpers > Slider.
Adding Elements To A Slide
By default, the Slider contains three Slide elements. You can see each Slide on the Structure panel or just by clicking the arrows on the left and right side of the Slider.

To place elements in a Slide, you can either:

use the arrows to scroll to the Slide, then click the Slide to activate it, then add the element from +Add
drag it into the Slide in the Structure panel
drag it into the Slide on the page itself

Adding & Removing Slides
To add additional slides, either duplicate an existing Slide, or add a blank Slide from +Add -> Basics -> Other -> Slide. The Slide element will only show when the Slider is active.
To delete slides, use the trash icon or delete the slide from the Structure panel - same as for any other element.
Slider Styling & Configuration
Select Basic Styles > Styling tab to set the color of the dots and to select the arrow lightness.

To disable arrows or dots, select Basic Styles > Configuration tab.
You also have full control of slider animation. It is possible to set up animation speed as well as to choose animation type. If Autoplay option is enabled, you may also set the delay.

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.

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.

Shape Dividers

Shape Dividers are a special type of element that allow you to insert inline SVG shapes along the top and bottom edges of Sections.
Inserting A Shape Divider
Shape Dividers can be inserted by selecting a Section, and clicking Add Shape Divider at the bottom of the Primary tab of the Properties Pane.

Manipulating Shape Dividers
Shape Dividers are inserted as individual elements, but cannot be selected for editing in the builder preview like other elements. This is because of the special CSS required to position them in the proper locations within their parent Section. Instead, to edit a Shape Divider, you must navigate to the Section in the Structure Pane and select the Shape Divider as you would any other element. The Properties Pane will then be populated with the styling options available for Shape Dividers.

Divider Shape - Choose from 33 built-in SVG shapes.
Custom Shape - Paste in an SVG from an external source, see Using Custom SVG Shapes below.
Color - Set the color of the Shape Divider.
Position - Set the Shape Divider to be along the top or bottom edge of the Section.
Flip Horizontally - Flip the entire Shape Divider horizontally.
Height - Set the height of the Shape Divider.
Width - Set the width of the Shape Divider. Cannot be less than 100%.
Center Horizontally - Normally the Shape Divider starts at the left edge of the viewport and stretches to the right. You can change the way your Shape Divider looks by setting it to a large width, like 200%, and then centering it horizontally to maintain symmetry.
Z-Index - Set the z-index of the Shape Divider. Used when layering other elements on top of or behind Shape Dividers.

Because of the way Oxygen's Shape Dividers are engineered, you can insert an unlimited number of Shape Dividers and layer them in interesting ways by manipulating the dimensions, opacity, color, and z-index for each one.
Using Custom SVG Shapes
The Custom Shape field allows you to paste in SVGs from other sources. There are a few requirements in order for external SVGs to work as expected as an Oxygen Shape Divider:

The element must have preserveAspectRatio="none" as an attribute.
Any fill attributes in the code must have the value of "currentColor" - this allows them to inherit the color set for the Shape Divider in the Properties Pane.

This is an example of an external SVG that will work perfectly as an Oxygen Shape Divider:

Search Form

The Search Form element displays the WordPress search form.
Add a Search Form element to your page from Add+ > WordPress > Search Form.
Form Fields

Border Color - set the color of the field borders.
Text Color - set the color of text typed into the fields.
Border Radius - set the border radius of the fields.

Submit Button

Background Color - set the color of the submit button.
Text Color - set the color of text within the submit button.

Style Output 
If Selector Detector is enabled, the Style Output button will appear, allowing for further customization of the styles of the Search Form.

Repeater

The Repeater element allows you to visually build loops in Oxygen using a post query or an ACF repeater as your data source.
Add a Repeater to your page from +Add -> Helpers -> Repeater.
QUERY
The query selects which posts will be displayed by the Repeater element.
Default
The default query is generated by WordPress based on the URL you visit. Visiting the URL for your blog post archive will make WordPress generate a query that will return your blog posts. Visiting the URL for a real estate listing will make WordPress generate a query that will return that real estate listing.
This is all done automatically by WordPress.
You can override the default query by choosing custom or manual.
Custom

Post Type - choose the post types returned by the query, or manually specify post IDs from the Posts post type (if you want to select posts from another post type via their ID, you will need to use a Manual query)
Filtering - exclude posts that don't match the specified author or taxonomies
Order - the order the posts are displayed in - alphabetical, by date, etc.
Count - the number of posts to return

Manual
For complete control over the posts returned by query, you can manually specify WP_Query parameters.

WP_Query

Manual Query tutorial: https://wpdevdesign.com/how-to-generate-the-query-string-for-easy-posts-in-oxygen/.
Use ACF Repeater
If your post type is using an ACF repeater, select the "ACF Repeater" box which will then show the available ACF field groups.
LAYOUT
Select "Stack Child Elements Vertically" for a vertical layout and "Stack Child Elements Horizontally" to have the repeated fields on the same row.
PAGINATION

Alignment - choose where the pagination is positioned
Gap - define the number of pages shown before a gap is replaced with ellipsis (...)
Range - define the number of pages to show before and after the current page
Previous Link Text - set the text to be used instead of "Previous"
Next Link Text - set the text to be used instead of "Next"
Link Hover Transition Duration - set the number of seconds you want to use for the hover transition (for example, 1s would be one second)
Font Size - set the pagination font size
Text Color - set the active page color
Link Color - set the link color
Link Hover Color - set the link hover color

Container Style

Size & Spacing - set the size, padding & margin
Children Layout - change the orientation of the pagination
Borders - add a border around the pagination
Background - control the pagination background

Links Style

Link Size & Spacing - control the size, padding & margin of the links
Active Link Size & Spacing - control the size, padding & margin of the active item
Link Background - add a background to the links
Active Link Background - add a background to the active link
Link Borders - add borders to the individual links
Active Link Borders - add a border to the active link

Links Hover Style

Link Hover Size & Spacing - control the size, padding & margin of the links on hover
Active Link Hover Size & Spacing - control the size, padding & margin of the active item on hover
Link Hover Background - add a background to the links on hover
Active Link Hover Background - add a background to the active link on hover
Link Hover Borders - add borders to the individual links on hover
Active Link Hover Borders - add a border to the active link on hover

PREVIEW RENDER

Normal Mode - Shows all the posts in the builder that are fetched by the query
Single Mode - Shows a single post in the builder

USING THE REPEATER
The Repeater contains a div element, which can be styled to create both horizontal and vertical layouts. You can add elements to the Repeater div to build your layout. These elements will be repeated for each post returned by your query.
To create a 3 column layout, add the Columns element to your Repeater div by clicking +Add -> Basics -> Columns and set the number of columns required. Add the post title by clicking one of the column divs and adding a Heading element by clicking +Add > Basics > Heading. Double click the heading and select Insert Data -> Post > Title. This will dynamically insert the post title for every row in your repeater. You can repeat this process for other elements (such as Images and Content) to build your repeater.