You've Installed Mocha. Now What?

Now that you've installed Mocha, 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.

Demo Video Tutorial

The following video tutorial will go over: 

1. How to use Page Builder to create gorgeous page layouts, which you can later import into Weebly.
2. How to add and edit the PureSlider Header Sliders to your Weebly website.
3. How to add and edit the Carousels feature.
4. How to add and edit the Parallax section.

Using Features And Header Types

Mocha comes with a series of header types, which are also called page types because they define the entire page layout, not just the header.

To Set The Header Type Of A Page, Do The Following:

1. In the Weebly Editor, click on the "Pages" tab.
2. Click on the page you wish to edit (or, create a new page).
3. In the "Header Type" dropdown, select the header type you wish to add.

List Of Pre-Built Header Types Included In Mocha.

• Homepage - This is the page layout similar to the one used to build the homepage Mocha demo. It comes with a fullscreen background image header, followed by the blocks and sections you saw in the demo.
• Header - This is a "default" page layout. It features an adjustable header (with drag 'n drop support + video, image, and color background options), followed by a blank white drag 'n drop area where you can add Weebly blocks.
• No Header - Just one drag and drop area section, no header.
• ScrolliPage - This is a page that automatically adds a vertical navigation "dot" for every Weebly Section element you add. Be sure to read the relevant instructions for ScrolliPage.
• ScrolliPage-Demo - This is the same ScrolliPage page layout, except with pre-built content blocks like the ones seen in the Mocha ScrolliPage demo.
• Video-Page-Demo - This is the exact header type page layout we used for building the Mocha homepage demo. Large fullscreen video header, followed by all the same sections and blocks as seen in the demo.
• VideoPageFull - A fullscreen version of the video header, except with no added pre-built blocks.
• Parallax (1-5) - Alternating Parallax sections. If you'd like more than 5 parallax sections per page, you'll need to use the Page Builder.
• PureSlider - This is the Header Slider. You can choose how many slides you'd like in the Header Slider. If you'd like to mix-and-match PureSlider with other features (such as Parallax or Carousels) you'll have to use the Page Builder.

These pages listed above are fixed, pre-built page layouts. However, you aren't forced to use them. You can create your own header types and page layouts by using Page Builder in Mocha (be sure to read instructions on how to use Page Builder).

Pristine's Specialty Features Like Header Sliders and Parallax

Header Slideshows. 3D Parallax. One-Page Scrolling. These are all features included in Mocha that aren't available in default Weebly themes. We've given these features our own names. For example, Mocha's Header Slideshows are called PureSlider. Mocha's 3D parallax are called TrueDepth Parallax. The Mocha 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 Mocha'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. Mocha'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!

How to Add These Specialty Features

Please see the video above for a tutorial on how to use these specialty features with Mocha.