You've Installed Pristine. Now What?

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

Pristine's Modular Design

Pristine is a modular theme. This means that sections and features, such as TrueParallax, exist as modules that can be moved around and re-arranged.

You can create your own custom header/page types with their own arrangement of these feature modules by using the Pristine Page Builder (more on that below).

Pristine's Specialty Features Like Header Sliders and Parallax

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

Pristine includes a variety of powerful features designed to take your Weebly website to new heights. Among them include:

• PureSlider - A responsive, mobile-friendly header slider running on fast modern code.
• TrueParallax - Parallax sections with 3D "Depth" backgrounds. These are also mobile-friendly, unlike the default Weebly parallax.
• ScrolliPage - Vertical "one-page" scrolling navigation letting your visitors access specific sections on your webpages by clicking a fixed navigation dot link on the right of the page.
• Pre-Built Designer Sections - These are professionally designed content sections that you can add to Pristine via the Pristine Page Builder.

How Do I Add These Pristine Features to My Weebly Website?

We've gone over the features included in Pristine, but how do you add them?  In short, there are two different ways of adding these Pristine features into the pages you build.

Option #1 (More Limited): Add Pristine Features to a Page by Changing the Header Type

"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.

Pristine 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:

1. In the Weebly builder, click on the "Pages" tab.
2. Click on the page you wish to edit (or create a new one).
3. Change the Header Type via the dropdown as illustrated below.

This option is great if you don't want to mix-and-match the Pristine 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.

Here's a quick rundown of the built-in header types that Pristine comes with. You can create your own header/page types by using Page Builder (more on that below).

As such, an easy way to change the page type is by clicking on “pages”, creating a new page (or selecting an existing one), and then setting the “header type."

Pristine comes with a wide variety of header types built-in. Here is a quick rundown of each one:

• Header → Default Weebly header. It is adjustable height wise, and can accommodate a wide variety of backgrounds including image, video, and color. Includes a Weebly Sections content area where you can drag and drop an unlimited number of sections.
• No Header → No header, just the navigation bar. Includes a Weebly Sections content area where you can drag and drop an unlimited number of sections.
• 40/60 Header → A header with a 40/60 layout. Includes a Weebly Sections content area where you can drag and drop an unlimited number of sections.‍
• 50/50 Header → A header with a 50/50 layout. Includes a Weebly Sections content area where you can drag and drop an unlimited number of sections.
• Parallax-2 → Page type with a default header followed by 2 parallax sections
• Parallax-3 → Page type with a default header followed by 3 parallax sections
• Parallax-4 → Page type with a default header followed by 4 parallax sections
• Parallax-5 → Page type with a default header followed by 5 parallax sections
• PureSlider-2 → Page type with a PureSlider with 2 slides.
• PureSlider-3 → Page type with a PureSlider with 3 slides.
• PureSlider-4 → Page type with a PureSlider with 4 slides.
• PureSlider-5 → Page type with a PureSlider with 5 slides.
• PureSlider-6 → Page type with a PureSlider with 6 slides.
• PureSlider-7 → Page type with a PureSlider with 7 slides.
• PureSlider-8 → Page type with a PureSlider with 8 slides.
• ScrolliPage → Page type with Weebly header and Weebly Content Area, where each section you add is linked to the vertical navigation dots.
• Text-Header → Just a regular text header.

Note that these are the header types / page types (both terms are used interchangeably) that come with the theme by default. You can generate your own layouts by using the Page Builder.  

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.

Option 2: Create Your Own Beautiful Custom Header Types / Page Layouts with Pacific's Drag and Drop Page Builder

To add various features and pre-built designer sections to your pages in Pristine, you can use our drag and drop Pristine Page Builder.

This is an online tool that lets you assemble your ideal page layouts by choosing your ideal arrangement of headers, modules, body sections, and features such as PureSlider or parallax.

After you finish dragging and dropping your desired sections, you can import the page layout into Weebly.

Then in Weebly, you can add content such as text, images, and Weebly elements into the sections.

Please see the "Page Builder tutorial" to learn more about how to use Page Builder.

The general workflow for using Page Builder is the following:

1. Create your desired Page Layout in Page Builder, by dragging and dropping pre-built Blocks.
2. Export this Page Layout from Page Builder, and import it into Weebly as a New Header Type.
3. Create a new page in Weebly, and use the imported Page Builder design as its Header Type.

Page Builder is great for those who want to mix-and-match Pristine 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.

Benefits of Using the Pristine page Builder

• Unlimited Flexibility: The Pristine Page Builder gives you unlimited flexibility in how you want your pages to look. You can add an unlimited number of sections, such as parallax, with no pre-defined restrictive structure.
• Native Code Means Faster Performance: Unlike Weebly Apps (which slow down websites tremendously), Page Builder generates native code tailored to your website. This approach means quicker response times and better search engine optimization.
• Unique Designs: The pages you create with Page Builder and its designer pre-made content areas will look extremely professional and polished. It is impossible to achieve such designs in Weebly alone. Your websites will look professionally crafted.

‍