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 <span> 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="<video url goes here>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
You can also control the Video Aspect Ratio or manually paste in iframe code to embed a video from another provider.
Icon
The Icon element displays an SVG icon and provides various styling options.
To choose an icon, type text in the Icon field in the Basic Styles tab to search the available icons.
Related: Uploading Custom SVG Icon Sets
Other
Code Block
The Code Block element allows you to embed custom HTML, PHP, CSS, and JavaScript code within your page.
