Author 诗语

Composite Elements

The Composite Elements library is a paid add-on that introduces an additional collection of elements that can be inserted from the +Add menu.
Composite Elements are different from normal elements in the following ways:

They are marked by an Oxygen logo in the top left corner of their button in the +Add menu
When inserted, they are pulled from our server, similar to the way Design Sets work
Because they are composites, each individual part of a Composite Element can be edited fully within Oxygen
They may include advanced functionality via Code Blocks

The library includes the following composite elements:

Accordion
Back To Top
Dashboard Tabs
Dynamic Slider
Flip Box
Horizontal Divider
Icon Button
Icon List
Image Comparison
Mega Menu
Number Counter
Circular Counter
Review Box
Hover Scroll Image
Section Indicator
Switcher
Table of Contents
Focus Section
Floating Icon Menu

Accordion
View Demo
The Accordion composite behaves like a traditional accordion element, with labels that can be clicked to expand a container and reveal some content.
Configuration Options
By default, only one Accordion content area can be expanded at a time. When a new one is expanded, the previously open Accordion content area is hidden. This behavior can be changed in the Code Block labeled "Accordion Code" within the Accordion container in the Structure Pane. Navigate to the JavaScript editor and find this code on line 4:
var closeOtherToggles = true;
Change "true" to "false" to allow multiple Accordion content areas to be expanded concurrently.
Notes
The accordion content is hidden in the builder by default. To edit the content, you must open the Structure pane and click the eye icon on the right of the Accordion Content.

Back To Top Button
View Demo
The Back To Top Button composite is a button that appears in a fixed location after scrolling a certain distance down the page. Clicking the button brings you back to the top of the page.
Configuration Options
By default, the Back To Top Button composite appears at the bottom right corner of the page after the viewport has scrolled down 300px. The scroll distance can be changed in the Code Block labeled "Back To Top Code" within the Back To Top Button container in the Structure Pane. Navigate to the JavaScript editor and find this code on line 4:
var scrollDistance = 300;
Change 300 to the desired scroll distance.

Dashboard Tabs
View Demo
The Dashboard Tabs composite is a styled Oxygen tabs element with a custom animation for the Tab Contents.
Configuration Options
The Dashboard Tabs composite has no special configuration options.

Dynamic Slider
View Demo
The Dynamic Slider composite is an Oxygen Repeater element that uses swiper.js to convert the Repeater into a slider.
Configuration Options
All elements inside of the Dynamic Slider are normal Oxygen elements using Dynamic Data. The default setup is ideal for displaying a number of posts as a slider, but the elements can be removed or changed to fit your use case.
You can edit the Repeater query by selecting the Repeater in the Structure Pane under Dynamic Slider > Slider Container. This is a normal Repeater element and can be configured in the ordinary way. To learn more about configuring a repeater, review the Repeater documentation.
To change the slider's delay and transition, navigate to the Code Block labeled "Dynamic Slider Code" within the Dynamic Slider container in the Structure Pane. Navigate to the JavaScript editor and find this code on lines 4 and 5:
var delay = 4000;
var transition = 'slide';
Change the delay value to adjust how quickly the slider plays automatically. To change the transition used, change 'slide' to another value supported by swiper.js. The available transitions are "slide", "flip", "cube", and "coverflow".
You can change any other swiper.js configuration by editing the options within the swiper variable in the JavaScript editor of the "Dynamic Slider Code" Code Block. You can learn more about swiper.js configuration options in the swiper.js documentation.

Flip Box
View Demo
The Flip Box composite has a front and back side. When the cursor is hovered over the Flip Box, it rotates with a 3D effect to reveal the back side of the Flip Box.
Configuration Options
The Flip Box composite has no special configuration options.

Horizontal Divider
View Demo
The Horizontal Divider is an icon flanked by two lines and can be used to divide vertical space.
Configuration Options
The Horizontal Divider composite has no special configuration options.

Icon Button
View Demo
The Icon Button composite is a styled link wrapper that contains an icon and a text element.
Configuration Options
The Icon Button composite has no special configuration options.

Icon List
View Demo
The Icon List composite displays a list of text elements and accompanying icons. The list rows alternate in color.
Configuration Options
The Icon List composite has no special configuration options.

Image Comparison
View Demo
The Image Comparison composite displays two images within a single container, and has a draggable icon in the center that allows you to reveal more or less of each image by sliding left and right.
Configuration Options
The Image Comparison composite has a left and right div that contain a background image. These background images are the images used for comparison. To change the images, select the appropriate div and navigate to Advanced > Background to change its background image.

Mega Menu
View Demo
The Mega Menu composite is comprised of a trigger (Mega Menu Link in the Structure Pane) and a wrapper. When the trigger is hovered, the wrapper is positioned beneath the trigger and revealed.
By default, the Mega Menu Wrapper contains a Columns element with 3 columns and some demo content. The Columns element and anything contained within it can all be replaced by any other Oxygen elements to fit your needs.
Configuration Options
In the Structure Pane you will find the Mega Menu Link and Mega Menu Wrapper elements within the Mega Menu container. The Mega Menu Link and Mega Menu Wrapper do not need to reside in the same container. The Mega Menu Wrapper can be moved to the bottom of your design, or anywhere else that you prefer.
To use more than one Mega Menu, start by inserting a second Mega Menu element. Next, select the new Mega Menu Link element and find the megamenu-link-id attribute in the Primary tab of the Properties Pane or under Advanced > Attributes. This attribute is set to 1 by default. Change it to 2 (or any other unique number that is unused by other Mega Menu elements in the page or template design.) Now, select the new Mega Menu Wrapper element and find its megamenu-link-id attribute in the Primary tab of the Properties Pane or under Advanced > Attributes. The value of this attribute needs to match the value of the attribute you just set on the new Mega Menu Link element.

Number Counter
View Demo
The Number Counter composite is comprised of a number and a label. The number counts up to the defined value when the Number Counter becomes visible in the viewport.
Configuration Options
To set the value that the Number Counter should count up to, find the Number element within the Number Counter container in Oxygen, and change the Number element's text to the desired final value. This value must be a number.
To change the speed at which the number increments, navigate to the Code Block labeled "Number Counter Code" within the Number Counter container in the Structure Pane. Next, and find this code on line 13:
var counterSpeed = 50;
To make the Number Counter count up more slowly, change 50 to a higher number. To make it faster, change 50 to a lower number.

Circular Counter
View Demo
The Circular Counter composite is comprised of a circular ring, a number, a unit, a label, and a sub-label. The number counts up and the ring fills with a color when the Circular Counter becomes visible in the viewport.
Configuration Options
The unit is a simple text element. To change the unit from the default % symbol, double click the symbol and replace it with the desired unit.
To set the value that the Circular Counter should count up to, find the Number element within the Circular Counter > Circular Counter Outer > Circular Counter Inner container in Oxygen, and change the Number element's text to the desired final value. This value must be a number.
The circular ring fill will fill to a percentage that corresponds to the Number defined.
To change the color of the ring fill, select the Circular Counter Outer element within the Circular Counter container in the Properties Pane. Next, navigate to Advanced > Typography in the Properties Pane. The typography color defined here is used for the ring's fill color.
To change the speed at which the number increments, navigate to the Code Block labeled "Circular Counter Code" within the Circular Counter container in the Structure Pane. Next, and find this code on line 13:
var counterSpeed = 50;
To make the Number Counter count up more slowly, change 50 to a higher number. To make it faster, change 50 to a lower number.

Review Box
View Demo
The Review Box composite displays a pre-styled review layout including an image, name, title, star rating, and review text.
Configuration Options
The Image Comparison composite has no special configuration options.

Hover Scrolling Image
View Demo
The Hover Scrolling Image composite displays a portion of an image with a large vertical height. When the element is hovered, the image scrolls down. This element is ideal for displaying images such as website screenshots.
Configuration Options
To change the image, select the Hover Scrolling Image Div, ensure you have the Div's ID selected in the Properties Pane, then navigate to Advanced > Background and change the background image there. This element works best with tall images that allow for ample vertical scrolling.
You can adjust the scroll speed of the image by selecting the Hover Scrolling Image element in the Properties Pane and navigating to Advanced > Effects > Transition. There, you can change the transition time to adjust the speed of the image scroll when hovered.

Section Indicator
View Demo
The Section Indicator composite is comprised of a circular div and a label. These elements will be cloned for each Section present on the page when the front-end is loaded.
Note: The Section Indicator element should be used with Sections that are set to 100vh height.
Configuration Options
To change the "active" color of Section Indicator dots, select the Section Indicator Dot element in the Structure Pane, then navigate to Advanced > Typography and change the typography color.
To set the label for Sections, give each Section a data-label attribute (under Advanced > Attributes in the Properties Pane). Set the value to whatever you want the label to be.
To skip indicators for specific Sections, give those sections a si-skip attribute (under Advanced > Attributes in the Properties Pane) with a value of 1. The Section Indicator will ignore these Sections when generating its output.
If you need to use the Section Indicator for Sections that are greater than 100vh, you'll need to adjust the threshold on line 64 in the Section Indicator Code Block's JavaScript editor. To make the Section Indicator work with Sections that are 200vh, for example, the threshold on line 64 must be set to 0.5.

Switcher
View Demo
The Switcher composite is a toggle switch that toggles the visibility of two containers when clicked. This is most commonly used to show different pricing options on pricing pages.
Configuration Options
There are two containers included with the Switcher: Switcher Container 1 and Switcher Container 2. Place any content you want to toggle between in these containers.

Table of Contents
View Demo
The Table of Contents composite generates an automatic, clickable Table of Contents based on the h2-h6 elements present on the page.
Configuration Options
To style the Table of Contents, style the placeholder elements in the builder. These styles will be used when dynamically generating the Table of Contents on the front end.
To make the Table of Contents skip a specific heading or container, add the toc-skip attribute with a value of 1 to the heading or container. If this attribute is added to a container, the Table of Contents will skip all headings within that container when generating its output.

Focus Section
View Demo
The Focus Section is a Section that increases in size and has a backdrop that becomes active when the Section is scrolled into view.
Configuration Options
The Focus Section composite has no special configuration options.

Floating Icon Menu
View Demo
The Floating Icon Menu is an icon-triggered menu that expands when clicked, showing icon-indicated options.
Configuration Options
The Floating Icon Menu composite has no special configuration options.

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:

Menu

Menu element displays menus created at Appearance > Menus in your WordPress admin panel and provides options for styling, dropdowns, and responsive.
Add a Menu to your page from +Add > WordPress > Menu.
Menu Styling Options
Many options for styling the menu links and controlling the menu layout are available in the Primary tab for the Menu.
Menu Layout

vertical - displays the menu links vertically. Dropdowns open to the side of the menu.
horizontal - displays the menu links horizontally. Dropdowns open below the menu.

Menu
Choose the WordPress menu (created at Appearance > Menus in your WordPress admin panel) to display.
Text
Control the text styles for the menu links. The Styling Options > Typography article explains these settings in more detail.
Spacing
Control the margin and padding around each menu link.
Hover & Active
Create special styles that only apply when the menu link is hovered or active.
Active means the page that the link links to is currently displayed.
Dropdowns
Choose whether or not to include dropdowns in your menu and control their styles.
Mobile Responsive
Choose the screen width at which the menu collapses into a responsive toggle.
Options are available to hide dropdowns in the responsive menu, create custom styles that only apply to the responsive menu, and customize the toggle icon.

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.

Builder Elements

Modal

A Modal is a popup or dialog that overlays a page's content and, typically, must be interacted with in some way in order to return to the page.
Add a Modal to your design from +Add > Helpers > Modal.
Adding Elements to a Modal
A Modal consists of a transparent overlay and a container div. Any element can be inserted into the container div.
To insert an element into a Modal, select the Modal and then choose any element from the +Add menu. You can also drag and drop elements into the Modal just like any other container.
Modal Styling & Configuration Options
In-editor behavior
This setting determines how the Modal is previewed in the builder.

Inline - The Modal will be displayed inline with the rest of the design's content.
Live preview - The Modal will appear as if it were live, overlaying the design's content.
Hidden - The Modal will be hidden completely in the Builder preview.

Trigger
This setting determines the condition that causes the Modal to appear.

After number of clicks - Specify a number of clicks after which the Modal will be shown.
After number of page views - Specify a number of page views after which the Modal will be shown.
On page scroll - Specify whether the Modal is shown after the user scrolls down a specific percentage of the page, or when the user scrolls up.
After specified time - Specify a number of seconds after which the Modal will be shown.
After time inactive - Specify a number of seconds of user inactivity after which the Modal will be shown.
On exit intent - Show the Modal when the user attempts to leave the page.
On scroll to element - Specify an element that will trigger the Modal when the element comes in to the viewport. Use the Choose button and then click on the element that should trigger the Modal, or type the element's ID in the field.
User clicks element - Specify an element that will trigger the Modal when the element is clicked. Use the Choose button and then click on the element that should trigger the Modal, or type the element's ID in the field.

You can also specify the frequency with which the Modal should be shown to a given user with the After Modal is Shown dropdown.

Show again on every page load - The Modal will be shown every time the page is reloaded and the given trigger occurs.
Never show again - The Modal will be shown once to a user, and then never shown to that user again.
Show again after - Specify a number of days after which the Modal will be shown to a user again.

Content Styles
The Content Styles area allows you to set the Modal's child element layout, horizontal item alignment, vertical item alignment, text color, and background color.
Modal Styles

Width - Set the overall width of the Modal container element. This defaults to %, but may be set to PX or VW by clicking the % symbol and choosing a different unit.
Backdrop Color - Set the color of the backdrop. If you want no backdrop, move the alpha slider to 0.
Modal Position - Set the position of the Modal container element.

Closing
This setting allows you to determine the closing behavior of a Modal.

Close Modal Automatically - If yes, allows you to specify a number of seconds after which the Modal will be closed automatically.
Close on ESC key - If yes, pressing the ESC key will close the Modal.
Close Modal On Backdrop Click - If yes, clicking the backdrop of the Modal will close it.
Insert Close Button - Inserts a button that, when clicked, will close the Modal.

Any element with the .oxy-close-modal class will act as a close button, allowing you to use Icons and other elements as close buttons for your Modal.
Additionally, you may use JavaScript to close the Modal via the oxyCloseModal() function. This option gives advanced users more flexibility in determining when and how a Modal is closed.

// Always use oxyCloseModal()
// after the full DOM is loaded
// ie. on the document ready event
jQuery( document ).ready( function() {
// check if the function is defined
// (we may be on a page without modals)
if( typeof oxyCloseModal !== 'undefined' ) {
// close the first open modal found
oxyCloseModal();
// close a specific modal, if found
oxyCloseModal( document.getElementById('myModal') );
}
} );

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.

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="

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.

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.