Last update: March 1, 2021

Tips for the Composite Elements

Some simple tips to customize the Composite Elements that were added as an Add-on for Oxygen Builder 3.7.

The Flip Box element

Just add this CSS if you want to have some perspective:

.oxel_flipbox {
    perspective: 1000px
}

Default settings

Not bad but could be better

Flip Box Back

Click me!

With perspective

How cool it is

Flip Box Back

Click me!

The Dynamic Slider element

The dynamic slider use the Swiper library and it's loaded from a CDN :

You can copy these files and load them locally if you prefer (with My Custom Functionality plugin or Advanced Scripts ).

And to easily add some custom animations, you can also check my other tutorial about how to use GSAP with Swiper.

 

Project #21

Project #20

Project #19

Project #18

Project #17

Project #16

Project #15

Project #14

Project #13

Project #12

Project #11

Project #10

Project #9

Project #8

Project #7

Project #6

Project #5

Project #4

Project #3

Project #2

Project #1

The Horizontal Divider element

By default, the icon is centered. If you want to change the position of the icon, you have to edit the Left Line or Right Line element, select the ID, and set a width.
For example : calc(100% - 200px)

There is also another method, that uses only one Div instead of three : Nice and easy way to create a text divider

 

TITLE

TITLE

Image Comparison element

By default, you have to click on the icon if you want to move the handle to the right or left.

Usually, in most Image Comparision , we can click anywhere on the image and the handle will directly go to that position.

Here is how to do it :

Select the Image Comparison Code element, and replace this function :

by this code :

// Setup variables
var mouseX = 0;
var moveIcon;

jQuery('.oxel_image_comparison').on('mousedown', function(e) {
  
  if( !window.angular ) {
    
  mouseX = e.pageX;

  jQuery('.oxel_image_comparison__icon').addClass('oxel_image_comparison__icon--dragging');
  
  if( jQuery('.oxel_image_comparison__icon--dragging').length > 0 ) {
   
    moveIcon = setInterval(move_icon_function, 10);
    
  }
    
  }
  
});
Brizy
Oxygen

The Hover Scrolling Image element

Check this tutorial if you want to learn more about how it is made, so you can easily customize the effect.

 

closealign-justifychevron-downretweetarrows-hcaret-upangle-double-down