Slider

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.

JavaScript

JavaScript

You can write JavaScript and jQuery in Oxygen and see the results live.
Adding JavaScript to an element
Each element can have its own JavaScript. Click the Advanced > JavaScript tab to access the JavaScript editor.
%%ELEMENT_ID%% will be replaced with the actual ID of the element.
Example:
jQuery('#%%ELEMENT_ID%%').click(...)
Adding JavaScript to your page or template
Do you want to add custom JavaScript to your page or template? Add a Code Block (+Add > Basics > Code Block). Then click JavaScript to open the JavaScript editor.
Using jQuery
As is default with WordPress, jQuery is loaded automatically. To use jQuery, write jQuery('...'), not $('...').
Loading External JavaScript Libraries
You may load external JavaScript libraries in one of two ways:

create a plugin to enqueue them with wp_enqueue_script
upload them somewhere and insert the necessary tags

If you have code that looks like  from your typography, analytics, or other 3rd party cloud provider, read this article on adding code to or before .

WordPress Widgets

WordPress Widgets

Most WordPress widgets can be embedded in Oxygen from +Add > WordPress > Widgets.
For most widgets, the widget settings will appear in the Basic Styles tab.
After editing the widget settings, click Apply at the bottom of the panel to save the settings.
Some widgets have elaborate and complex JavaScript settings screens that are not fully compatible with Oxygen's interface. These widgets must be edited in the WordPress admin panel.
To add these widgets to your pages, follow these steps:

Install the plugin WooSidebars.
Create a widget area from Appearance -> Widget Areas.
Go to Appearance -> Widgets and add the widget to your newly created widget area.
Embed the widget area in Oxygen from Add+ -> WordPress -> Sidebars.

Social Icons

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.

PHP & HTML

PHP & HTML

Custom PHP and HTML can be added to your page using the Code Block element. PHP behaves just like it does if you were coding it in a WordPress theme file. You can run the WordPress loop, make database queries, and use any other WordPress API functions.
To add a Code Block, click +Add > Basics > Code Block. Click PHP & HTML to access the editor.
Your code will be executed inside Oxygen, allowing you to see the results of your code live, without saving, uploading, and refreshing.

SoundCloud

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.

Complete Element Reference

Complete Element Reference

Section, Columns, Div
+Add -> Basics -> Containers
Create page structure and layout.
Further Reading: Layout & Spacing, Basic Elements
Heading, Text, Rich Text
+Add -> Basics -> Text
Further Reading: Basic Elements
Text Link, Link Wrapper, Button
+Add -> Basics -> Links
Further Reading: Basic Elements
Image, Video, Icon
+Add -> Basics -> Visual
Further Reading: Basic Elements
Code Block
+Add -> Basics -> Other
Further Reading: Basic Elements, PHP & HTML, CSS, JavaScript
Inner Content
+Add -> Basics -> Other
Only available for templates; displays the content of the item the template is applied to.
Further Reading: Templating
Slider
+Add -> Helpers -> Slider
Further Reading: Slider
Google Maps
+Add -> Helpers -> Google Maps
Further Reading: Google Maps
Social Icons
+Add -> Helpers -> Social Icons
Further Reading: Social Icons
SoundCloud
+Add -> Helpers -> SoundCloud
Further Reading: SoundCloud
Easy Posts
+Add -> Helpers -> Easy Posts
Simple and flexible way to display posts, pages, or any custom post type in a list, grid, and masonry.
Further Reading: Easy Posts, Templating
Gallery
+Add -> Helpers -> Gallery
Further Reading: Gallery
Testimonial
+Add -> Helpers -> Testimonial
Further Reading: Testimonial
Icon Box
+Add -> Helpers -> Icon Box
Further Reading: Icon Box
Progress Bar
+Add -> Helpers -> Progress Bar
Further Reading: Progress Bar
Pricing Box
+Add -> Helpers -> Pricing Box
Further Reading: Pricing Box
Tabs
+Add -> Helpers -> Tabs
Associate content with multiple tabs, hiding all content but that associated with the active tab.
Further Reading: Tabs
Toggle
+Add -> Helpers -> Toggle
Hide and show any content with a clickable toggle.
Further Reading: Toggle
Superbox
+Add -> Helpers -> Superbox
Two slides of content, with animation options on hover.
Further Reading: Superbox
Header Builder
+Add -> Helpers -> Header Builder
Easily create responsive, sticky, multi-row headers.
Further Reading: Header Builder
Shortcode
+Add -> WordPress -> Shortcode
Display the output of a shortcode in Oxygen.
Further Reading: Embedding Plugins
Shortcode Wrapper
+Add -> WordPress -> Shortcode Wrapper
Place Oxygen elements between the opening and closing tags of a shortcode.
Further Reading: Shortcode Wrapper
Menu
+Add -> WordPress -> Menu
Displays a responsive WordPress menu with various styling options.
Further Reading: Menu
Widgets
+Add -> WordPress -> Widgets
Embed WordPress widgets in Oxygen.
Further Reading: Widgets
Dynamic Data Elements
+Add -> WordPress -> Dynamic Data
Various elements for embedding dynamic data like post title, content, featured image, and more in your pages.
Further Reading: Dynamic Data
Sidebars
+Add -> WordPress -> Sidebars
Display the contents of a WordPress API sidebar in Oxygen.
Further Reading: Widgets
Comments List
+Add -> WordPress -> Comments List
Display the comments made on this post.
Further Reading: Comments List
Comment Form
+Add -> WordPress -> Comment Form
Display a form to leave a comment on this post.
Further Reading: Comment Form
Login Form
+Add -> WordPress -> Login Form
Display a login form.
Further Reading: Login Form
Search Form
+Add -> WordPress -> Search Form
Display a search form.
Further Reading: Search Form

Search Form

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.

Login Form

Login Form

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