Author 诗语

Comment Form

The Comment Form element displays the WordPress comment form.
Add a Comment Form element to your page from Add+ > WordPress > Comment 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 Comment Form.

Progress Bar

The Progress Bar element displays a progress bar. You can control its display, typography, and animation settings.
Add a Progress Bar element to your page from Add+ -> Helpers -> Progress Bar.
Progress Amount
To change the progress bar percentage, simply slide the circle along the sliding bar under Progress.
Progress Bar

Bar Color - sets the color of the progress bar covered by the Progress percentage.
Background Color - sets the color not covered by the Progress percentage.
Bar Padding - sets the padding on all sides within the progress bar.
Stripes - set this to true to display diagonal stripes within the Progress Bar element.

Animation
The Progress Bar animation settings can be controlled in this section. By default, all animation settings are set to false. The following parameters can be modified to animate the progress bar and its stripes, if displayed:

Animation Stripes - To animate stripes, set this to true.
Animation Width - To animate the growth of the progress bar up to the set percentage, set this to true.
Animation Stripes Duration - This parameter determines how long it takes for two stripes to move across the progress bar, in seconds.
Animation Width Duration - This parameter determines how long it takes the progress bar to reach the set percentage, in seconds.

Typography
In this tab you can control the typography for two sets of text within the Progress Bar element: Left Text and Right Text.
Each set has identical typography settings, which are the same as those found at Advanced > Typography.

Header Builder

Header Builder makes it easy to create responsive, sticky, multi-row headers.
Add a Header Builder to your page from +Add > Helpers > Header Builder.
Positioning Elements
Each Header Builder element is made up of multiple Header Row elements. Each Header Row element is divided into three subsections - left, center, and right.
You can position the elements inside each header row by dragging them with the mouse. You can also use the Structure panel for positioning.

Multiple Rows
To add another Header Row to a Header Builder, activate the Header Builder and then click Primary > Add Another Row in the Header Builder settings.
Sticky Headers
To stick a header to the top of the page so that it remains at the top of the browser viewport when the user scrolls down the page, follow these steps:

Select Header Builder in the Structure panel on the right-hand side.
Click Sticky in the left panel.
Check the Sticky checkbox.

Configuration Options for Sticky Header

scroll distance - how far the user must scroll before the sticky header is shown.
sticky background color - a background color that will be applied to the Header Builder only when it is sticky - useful for making transparent headers overlaid on a hero background image sticky.
sticky above - the header will only be sticky above this screen width - used to hide the sticky header on mobile devices.
sticky box shadow - CSS code to customize the shadow displayed below the header when it is sticky.
sticky header z-index - define a z-index for your sticky header - useful to prevent other elements on the page from appearing on top of the sticky header while scrolling.
fade in sticky - check this box to use a fade animation when the header becomes sticky.

fade in speed - the speed of the fade in animation.

Header Row Visibility Based On Sticky State
Each individual Header Row in a Header Builder element can be configured to display or not display depending on the Header Builder's sticky state. To change these settings, select a Header Row in the Structure panel on the right side. In the Properties Pane on the left, under the Primary tab, you'll see a section called Sticky Display. There, you can choose to only show in sticky or hide in sticky.
Overlay Headers
To make your header overlay the content below it on the page, follow these steps:

Select Header Builder in the Structure panel on the right-hand side.
Click Overlay in the left panel.
Use the Overlay Header drop down to choose a viewport width above which you'd like to have the header overlay the page content.

This will result in an overlay header on all pages and posts where this header is present. You can also determine the Header Builder's overlay state on a per-page basis by going to Manage -> Settings -> Page Settings while editing an individual page or post.
Header Row Visibility Based On Overlay State
Each individual Header Row in a Header Builder element can be configured to display or not display depending on the Header Builder's overlay state. To change these settings, select a Header Row in the Structure panel on the right side. In the Properties Pane on the left, under the Primary tab, you'll see a section called Overlay Display. There, you can choose to only show in overlay or hide in overlay.
Responsive Headers
Elements in a header are stacked horizontally by default. The left, right, and center elements of the Header Row will appear side by side in a single row. However, on smaller screens you may want your header's elements to stack vertically instead of horizontally.
To stack your entire Header Builder or an individual Header Row vertically, select the Header Builder or Header Row and go to Primary. Then choose a screen width in the Stack Vertically Below dropdown. When the screen width falls below the chosen value, the elements inside the Header Row or Header Builder will stack vertically.
To hide a specific Header Row below a certain screen width, just choose the width in the Hide Row Below dropdown.

Comments List

The Comments List element displays a list of WordPress comments for the currently viewed post.
Add a Comments List element to your post from Add+ > WordPress > Comments List.
Templates
The PHP code in Templates > Template PHP outputs the list of comments. The CSS code in Templates > Template CSS styles the Comments List element and everything within.
Load Preset Template
Load the Templates from the available presets.
Save Current as Preset
If you had made any changes to the template code in either Templates > Template PHP or Templates > Templates CSS and you want to save these changes for use in another Comments List element, enter the name of the new preset and click save.
Style Output
If Selector Detector is enabled, the Style Output button will appear, allowing for further customization of the styles of the Comments List.

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.

Icon Box

The Icon Box element displays an icon with a heading and text.
Add a Icon Box element to your page from Add+ > Helpers > Icon Box.
Layout & Spacing

Content Alignment - align all content within the element left, center, or right.
Icon Position - positions the icon relative to the text and link content: top, right, left, or bottom.
Icon Vertical Alignment - aligns the icon vertically within the Icon Box element top, middle, or bottom. This parameter is visible only when Icon Position is set to left or right.
Icon Space Before - sets the spacing before the icon. If Icon Position is set to either top or bottom, this controls the spacing on top of the icon. Otherwise, if Icon Position is set to either right or left, this controls the spacing to the left of the icon.
Icon Space After - sets the spacing after the icon. If Icon Position is set to either top or bottom, this controls the spacing on the bottom of the icon. Otherwise, if Icon Position is set to either right or left, this controls the spacing to the right of the icon.
Heading Space Above - sets the spacing above the heading.
Heading Space Below - sets the spacing below the heading.
Text Space Above - sets the spacing above the text.
Text Space Below - sets the spacing below the text.
Link Space Above - sets the spacing above the link area of the Icon Box.
Link Space Below - sets the spacing below the link area of the Icon Box.

Responsive
In this tab, you can control the responsiveness of the alignment of the elements within the Icon Box element.

Vertical Layout Below - set the screen width below which the Icon Box contents will be aligned based on the Content Alignment in this tab.
Content Alignment - the alignment set here will only applies to screen widths below the width set in Vertical Layout Below.

Typography
In this tab you can control the typography for the Heading and Text inside the Icon Box.
Each of these three tabs have identical typography settings, which are the same as those found at Advanced > Typography.
Link Area
Drag a button or link into the icon box to nest it inside of the icon box. It will be displayed below the Text.