Author 诗语

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.

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.

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.

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.

Testimonial

The Testimonial element displays a customizable testimonial on the page, with various options for layout, typography, spacing, and image settings.
Add a Testimonial element to your page from Add+ > Helpers > Testimonial.
Image

Image URL - set the URL of the testimonial photo
Image Size - control the size of the photo
Image Spacing - control the spacing between the photo and the testimonial text.
Image Position - position the image before or after the testimonial text.

Layout

Layout - choose horizontal or vertical.
Vertical Layout Below - set a screen width below which the image and testimonial text become vertically stacked. You can choose a horizontal layout as the default, while setting the Vertical Layout Below to a smaller screen width.
Content Alignment - select left, center, or right to align the elements within the testimonial.
Mobile Content Alignment - select left, center, or right to override the Content Alignment setting at widths below the width set in Vertical Layout Below.

Typography
In this tab you can control the typography for three sets of text within the Testimonial element: Author, Author Info, and Text.
Each of these three tabs have identical typography settings, which are the same as those found at Advanced > Typography.
Spacing
In this tab, you can control the amount of spacing underneath each text element in the testimonial.

Text Space Below - set the spacing below the testimonial text.
Author Space Below - set the spacing below the testimonial author.
Author Info Space Below - set the spacing below the testimonial author info.

Toggle

The Toggle element displays an clickable toggle that will show or hide the element that follows it.
Add a Toggle element to your page from Add+ > Helpers > Toggle.
Toggle Structure
By default, a Heading element will be placed inside the Toggle element, but this can be deleted and replaced with any other elements.
The element placed immediately after the Toggle will be shown or hidden when the Toggle is clicked.
In the below example, a Heading is placed inside the Toggle. When it is clicked, the Text element that immediately follows the Toggle will be shown or hidden.

Toggle Settings

Icon Color - set the color of the Toggle element』s icon.
Icon Size - set the size of the Toggle element』s icon.
Toggle Initial State - whether the toggle is open or closed when the page is first loaded
Toggle Target (optional) - by default, this is left blank and the next element under Toggle will be used as the target. If, however, you want to toggle a specific element elsewhere on the page by clicking the Toggle element, you can specify the ID of the element to show/hide.

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.