标签： builder-elements

Easy Posts

Easy Posts makes it easy to display customizable lists of posts, pages, or any custom post type.
Add an Easy Posts to your page from +Add -> Helpers -> Easy Posts.
Presets
Various presets to display posts in list, grid, or masonry layouts are included with Oxygen.
Choose a preset from Load Settings From Preset to load a preset. The current settings for the Easy Posts will be overwritten by the preset.
To add your own presets to this list, simply adjust the settings in the Query, Styles, and Templates sections as you wish. Then enter a preset name in the Save current settings as preset box and click Save.
Query
The query determines which posts will be displayed by Easy Posts.
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 IDs
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.
https://codex.wordpress.org/Class_Reference/WP_Query#Parameters
Styles
Customize the styles for the title, meta, content, read more, and responsive behavior of the displayed posts.
Note: some styles are not applicable or not supported by certain preset templates.

Templates
Template PHP
This code is used to render a single item in the list of posts output by the Easy Posts.
This code behaves as if it was running inside the WordPress loop and the_post() has already been called.
Customization of this code allows you to add any data you want, such as Custom Field values, to the Easy Posts output.
Template CSS
This code works in conjunction with the settings specified in the Styles section to control the way the list of posts is displayed.
%%EPID%% is replaced with the ID of the current Easy Posts element, which prevents different Easy Posts styles from conflicting with each other if multiple Easy Posts are used on the same page.
Pagination
Pagination of an Easy Posts element is controlled by Reading Settings specified at Settings -> Reading in your WordPress admin panel.

Pro Menu

The Pro Menu element displays menus created via Appearance > Menus in the WordPress admin area. The Pro Menu element provides advanced styling options for dropdowns and mobile menus.
Add the Pro Menu to your page via +Add > WordPress > Pro Menu.
Desktop Menu
Desktop Dropdowns
Mobile Menu
Mobile Dropdowns
Pro Menu Styling Options
The Pro Menu can be styled via the Primary tab in the Properties Pane.

Menu

Choose the WordPress menu to display. Menus can be created via Appearance > Menus in the WordPress admin area.
Mobile Menu / Toggle Below

Choose the break point at which you would like to see the mobile menu (hamburger menu) displayed.
Desktop Menu

Orientation
Select whether you want a horizontal or vertical menu.
Typography
Full typographical controls over the Pro Menu's desktop menu items.
Spacing, Align, Border
Set the spacing between the menu items, alignment of the menu items and border radius of the menu items.
Hover & Active
Set the color and borders of hovered and active menu items. You can also control the transition duration for the hover state of menu items here.
Desktop Dropdowns

Enable Dropdown
Enable or disable child menu items.
Dropdown Border Radius
Set the border radius of the dropdown menu.
Animation Type
Select the type of animation applied when the dropdown menu enters the viewport. Animated dropdowns inherit their settings (aside from animation type) from the global Animate On Scroll settings at Manage > Settings > Global Styles > Animate On Scroll.
Box Shadow
Add a box shadow to the dropdown menu.
Dropdown Icon
Set and style the dropdown icon.
Dropdown Colors
Set the background, hover background, link and link hover colors.
Dropdown Child Links
Style the typography of menu links within the dropdown.
Mobile Menu

Open Icon Layout
Set the icon and text that will be shown when the mobile menu is closed. Change the icon size, text, colour, padding colour, border radius and transition duration.
Open Icon Typography
If you have set Icon Text in the Open Icon Layout tab then you can style the typography here.
Close Icon Layout
Set the icon and text that will be shown when the mobile menu is open. Change the icon size, text, position, colour, padding colour, border radius and transition duration.
Close Icon Typography
If you have set Icon Text in the Close Icon Layout tab then you can style the typography here.
Menu Styles
Off Canvas: Select if you want the mobile menu to animate in from off-canvas. Set the animation type and duration.
Style the mobile menu background colour, link colour, link padding, container padding and text alignment.
Typography
Style the mobile menu typography.
Mobile Dropdowns

Include Dropdown Links In Responsive Menu

Hide: Dropdown links will not be shown when the Pro Menu is in mobile mode.
Show in line: Dropdown links will be shown as regular menu items, listed in line with top-level menu items, when the Pro Menu is in mobile mode.
Toggle: Clicking the dropdown icon on a top-level menu item that has a child dropdown will cause the dropdown to expand or "toggle" open.

When Toggle is selected, you'll also have the  ability to set the toggle animation duration, the dropdown icon size, the dropdown background color, and the top border of the dropdown container.
Presets

Select a preset to use a pre-styled menu.
Export and import menus using their JSON code.
To save your existing menu as a preset so that it can be used elsewhere on your site, enter a name in the box and click "Save".
Use the "Clear Current Styles" button to clear the styles assigned to the current selector for the Pro Menu element.

Gallery

The Gallery element displays a customizable image gallery with options for captions, hover effects, and a lightbox.
Add a Gallery element to your page from Add+ > Helpers > Gallery.
Adding Images to the Gallery
Gallery Source
The Gallery Source is where you populate your Gallery with images. You have three options:

Media Library - specify Image IDs that exist in your WordPress media library. Click Browse to select images from your WordPress media library.
ACF - use a Gallery field from the Advanced Custom Fields plugin
WooCommerce - display the images product gallery for the specified WooCommerce product

Link Images
Choose yes to link the image to its full size image file, or no to disable the link.
Add Lightbox
This option appears when Link Images is set to yes. Instead of linking to the image file itself, the image will be displayed in a lightbox.
Gallery Styling
Layout
This controls the layout of the gallery, including the image aspect ratio, number of images per row, and spacing between images.

Layout - choose either flex or masonry. Flex keeps all images in orderly rows, while masonry arranges images based on their own sizes and the number of images per row.
Image Aspect Ratio - if flex is chosen for the Layout, specify an image aspect ratio like 16:9 (widescreen), 21:9 (cinematic), 1:1 (square), etc.
Images Per Row - set the maximum number of images displayed in each row.
Space Around Image - control the spacing between each image.
Image Min Width - Use this property to make the gallery responsive. Images will not be displayed narrower than this width.

Captions

Show Captions - choose yes or no.
Caption Color - set the text color of the captions.
Caption Background Color - set the background color where captions are displayed.
Show Captions Only On Hover - choose yes or no.
Hide Captions Below - set a screen size below which captions will not be displayed.

Hover

Image Opacity - the image opacity when not hovered.
Hover Image Opacity - the image opacity when hovering over it with the mouse.
Transition Duration - set the duration of the transition for the image hover opacity, and the display of the caption if it is present.

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.

Builder Elements

Google Maps

The Google Maps element displays a map embedded from Google Maps.
Add this element to your page by clicking +Add -> Helpers -> Google Maps.
Google Maps Settings
Address
Enter the address of the location you want to display.
Zoom
Adjust the zoom with your location centered in the map.
Height
Control the height of the Google Maps element as displayed on the page.
Entering Your API Key
Google requires you to have an API key to display a Google Map. They have instructions on creating a Maps Embed API key here: https://developers.google.com/maps/documentation/embed/get-api-key.
Enter the API key on the Oxygen -> Settings page in your WordPress admin panel.

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.

Basic Elements

Oxygen's basic elements can be found at +Add -> Basics.
All possible web page designs can be created by combining these elements together.
Containers
Container elements allow you to create the structure and layout of your design. In general, all the content on your page will reside within container elements.
Deleting a container element will also delete the elements nested inside of it
Section
The Section element constrains the content within to the Page Width.
In Oxygen 3.4 and newer, you may insert Shape Dividers in to Sections.
Columns
The Columns element makes it easy to create responsive column-based layouts.
Div
The Div element is a generic container. In general, it has no effect on the layout of your page until specific styling options are set for it.
Read Layout & Spacing for more details on using the container elements to create your page layout.
Text
Oxygen provides four types of text elements.
To edit the text within any text element, double-click the text.
Heading
The Heading element is a text element that uses the HTML heading tags (h1, h2, h3, h4, h5, and h6). They are commonly used for titles, headings, and subheadings that help organize the content on a web page. Not only do they make it easier for users to scan through the web page, but also can help search engine robots understand the structure of content on your page.
Text
The Text element is a Div element that only contains text.
Basic formatting can be applied to this text with the formatting toolbar that appears at the top of the screen when the text is being edited.

Rich Text
The Rich Text element allows for extended formatting to be applied to text, using the WordPress TinyMCE editor.
Span
The Span element allows for creating special styles that only apply to the portion of your text wrapped with the Span.
To create a Span element, double click a Heading or Text element to edit its text. Then highlight the portion of the text you wish to wrap with the Span and click  in the formatting toolbar.
Links
Oxygen provides three types of link elements. These elements create hyperlinks to other web pages, files, locations within the same page, email addresses, or any other URL.
The link URL can be set in the URL field at the top of the Basic Styles tab for all link elements.
You can type in any URL, or click the set button to browse and set the link URL to existing content on your site.
Text Link
A Text Link element is just like a Text element with a hyperlink to another URL.
Default link colors can be changed at Manage -> Settings -> Global Styles -> Links.
Link Wrapper
A Link Wrapper element allows you to create a single link for a group of elements.
All elements placed in a Link Wrapper will be clickable as part of the link.
Button
A Button element is similar to a Text Link element, except it is displayed as a button rather than plain text.
Simple styling options for the button are available in the Basic Styles tab.
Visual
Visual elements are used to add graphical elements to your page.
Image
Specify the URL to your image in the Image URL field in the Basic Styles tab.
Click Browse next to the Image URL field to upload or choose images from the WordPress Media Library. This will cause the full size image to be loaded in your design, regardless of the display size of the image.
Alternatively, you can use the Media Library option to make sure only the largest necessary version of your image is loaded in your design:

Select the Image element.
In the Properties Pane, choose Media Library.
In the ID field, click the browse button.
Upload or choose the image you』d like to use and click Select Image.
Next, use the Size dropdown to choose the size of your image that you』d like to use.

By loading the image in this way, as long as you haven't chosen the smallest size in the Size dropdown, the image will use the srcset attribute to determine which version to load depending on the viewport size, thus improving page load times.
Further reading: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Video
The video element is a way to embed videos in your pages and ensure they are responsive and keep their aspect ratio - i.e. as the browser window shrinks, the video will shrink as well, while maintaining its proportions.
To embed a YouTube or Vimeo video, paste the URL to the video into the YouTube / Vimeo URL field in the Basic Styles tab. This must not be used for self-hosted videos.
To add a self-hosted video, click the "Manually Paste Iframe Code" checkbox. You can then paste in the below code and replace {your-video-url} with the URL of your video:
<iframe src="

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.

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.