Oxygen 3.6 is now available - see what's newlimited time special pricing available

The Composite Elements library is 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:

  1. Accordion
  2. Back To Top
  3. Dashboard Tabs
  4. Dynamic Slider
  5. Flip Box
  6. Horizontal Divider
  7. Icon Button
  8. Icon List
  9. Image Comparison
  10. Mega Menu
  11. Number Counter
  12. Circular Counter
  13. Review Box
  14. Hover Scroll Image
  15. Section Indicator
  16. Switcher
  17. Table of Contents

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.


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

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 at least the full height of the viewport.

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) with a value equal to the label that should be displayed by the Section Indicator composite.

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.


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.

 

 

 

 

Last modified: December 28, 2020
Copyright © 2021 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram