Composite ElementsThe 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.
