Documentation

Instructions

OXYGEN v3 : Use Hydrogen plugin
OXYGEN v4 : Just need to copy and paste the JSON code (no need to use Hydrogen anymore)

Step 1 (OXY3 only) : Install the plugin Hydrogen Paste (free) or Hydrogen Pack (not free)

Step 2 : Log in to your account

Step 3 : Go to the Unlimited Elements pages and under each element, you will see a new icon (only visible if you are logged and if you bought the set, obviously) :

Step 4 for OXY4 : Click on the COPY JSON button, go to your page and click in the Import link, then paste the code (CTRL V):

Step 4 for OXY3 : Click to Copy and paste it (CTRL V) in your page.

Customization

Always check for the Code Block. Not only it often contains some custom CSS, but in some complex elements (Sliders), there are also some Javascript.

Change Images

You must use your own images.

Images are NOT transferred into your server. They are still linked from Unsplash or directly from the DEZIGN4FUN server.

Good practice

Custom CSS

To avoid the FOUC effect, copy the custom CSS to a stylesheet.

External files

To be able to share some elements, some files (JS and CSS) are loaded via the Code Block :

It's better to load them with Advanced Scripts (aff link) or WPcodeBox :

Or you can add them manually, with the good old method :
https://oxygen4fun.supadezign.com/how-to/

Weird Behaviors

Some elements (especially the sliders) don't work well in the backend (in Oxygen). There is nothing we can do about it, so always check in the frontend to be sure everything is fine.

Sliders

Most of the sliders use the Swiper JS library.
It's highly customizable, there are a ton of options, so if you want to learn more about it, I recommend you to check their API.

Here are some features that might be useful for you.

Keyboard navigation

keyboard: {
    enabled: true,
    onlyInViewport: false,
},

Continuous loop mode

loop: true,

Mouse wheel navigation

mousewheel: true,

Autoplay

autoplay: {
    delay: 2000,
    pauseOnMouseEnter: true, // will pause on mouse enter
    disableOnInteraction: false // will restart on mouse leave
},

Duration of transition

speed: 1000,

Multiple sliders in the same page

Each slider must have an unique ID, so if you want to use the same slider, several time in the same page, you can add the ID of the container in the selector. For example the Section's ID :

var swiper = new Swiper('#section-11-5 .d4f-dynamic-slider1 .swiper', {
    navigation: {
        nextEl: '#section-11-5 .d4f-dynamic-slider1__arrows-next',
        prevEl: '#section-11-5 .d4f-dynamic-slider1__arrows-prev',
    }
});

var swiper = new Swiper('#section-16-5 .d4f-dynamic-slider1 .swiper', {
    navigation: {
        nextEl: '#section-16-5 .d4f-dynamic-slider1__arrows-next',
        prevEl: '#section-16-5 .d4f-dynamic-slider1__arrows-prev',
    }
});