Now that you've installed Oxygen, it's time to learn all about what this powerful theme offers. In this tutorial, we'll go over all the essential features you need to know about.
Header Slideshows. 3D Parallax. One-Page Scrolling. These are all features included in Oxygen that aren't available in default Weebly themes. We've given these features our own names. For example, Oxygen's Header Slideshows are called PureSlider. Oxygen's 3D parallax are called TrueDepth Parallax. The OnePage scrolling feature is called ScrolliPage.
These are proprietary solutions developed by Luminous specifically for use in Weebly. While these features seem simple, the code that we've written is very sophisticated, using techniques such as hardware acceleration to deliver an exceptionally smooth performance.
What's the difference between Oxygen's Parallax and the default Weebly parallax? There are many differences. For starters, the default Weebly parallax isn't really parallax at all. Parallax is defined as the background image moving at a slower pace relative to the rest of the page, when scrolling. This is what creates the immersive "depth" experience. Weebly's parallax implementation is just a fixed background image that doesn't move. Oxygen's parallax, however, actually modulates background images that move at a slower pace. Furthermore, Weebly's parallax does not work on mobile. On mobile devices, the Weebly parallax sections are just...a blurred static image. Our TrueDepth parallax, however, work flawlessly on both mobile and desktop. Given that 70% of internet users today are on mobile, this is an important thing to keep in mind!
We've gone over the features included in Oxygen, but how do you add them? In short, there are two different ways of adding these Oxygen features into the pages you build.
"Header Types" used to be called "Page Types" so we'll be using them interchangeably. Header Types let you apply a pre-built page layout onto a page you create.
Oxygen has a bunch of Header Types included. You'll see Header Types like "PureSlider-3" and "Parallax-3." The number indicates the quantity of each. For example, if you select "Parallax-3" you'll be given 3 Parallax sections to use. If you select "PureSlider-3" you'll be given three Header Slideshow slides. Want five header slideshows instead? Choose "PureSlider-5." Same applies with Parallax.
You can access the header type panel by doing the following:
This option is great if you don't want to mix-and-match the Oxygen features. For example, perhaps you just want a page with a Header Slideshow, and you'll just add your own drag and drop content below. Or maybe you just want two Parallax sections without Header Sliders.
But what if you do want a page with a Header Slideshow and a series of Parallax sections? That's where option 2 comes in.
Page Builder isn't required if you're building a website with Oxygen (you can use Weebly's drag and drop instead) but Page Builder takes your websites to a whole new level. Page Builder is Oxygen's signature feature. This is a tool that lets you assemble your own gorgeous page layouts, by dragging in a series of pre-built blocks. Among these blocks, you'll find the aforementioned Oxygen features such as PureSlider Header Sliders and TrueDepth Parallax.
The general workflow for using Page Builder is the following:
Page Builder is great for those who want to mix-and-match Oxygen features on the same page. If you want a header slider, followed by ten Parallax sections, Page Builder lets you do just that.
Page Builder also contains a series of pre-built content blocks that let you showcase your content in a gorgeous professionally styled way.
We highly encourage you to view the dedicated tutorial on how to use Page Builder, available by clicking here.
Note: you cannot edit the content directly in Page Builder. First you must assemble your ideal page layout in Page Builder. Then you must import this layout into Weebly. Once your layout is in Weebly, you can edit the text and images.
At the moment, ScrolliPage is not offered in the Page Builder. To use ScrolliPage, you'll have to apply the header type of a page to ScrolliPage as outlined in Option 1.