How to Use the Pristine Page Builder to Create Gorgeous Page Layouts using Pre-Built "Blocks" of Content

The Pristine Page Builder lets you create professional gorgeous page layouts by dragging and dropping aesthetic sections and modules. You can then install your layout into your Weebly website running on Pristine, and add in your own text + images.

With the Pristine Page Builder, you can create page layouts with your own desired configuration of features, sections, and modules. For example, you can create a page that includes a PureSlider header slideshow, followed by a few parallax sections, and some other custom sections. Page Builder is an online app that is accessed by clicking on the red "Page Builder" button in the upper right-hand corner. We highly recommend watching the video tutorial below to learn how to use it.

How to Use Page Builder, Step-By-Step:

1. Click the red button in the upper right-hand corner to access Page Builder.
2. Design your ideal Page Layout.
3. Follow the video below to import the layout into Weebly.
4. Once the layout is in Weebly, add your own text and images.

Please watch the video below for an overview of how to use Page Builder. While the video features the Oxygen theme, the procedure is identical for Pristine.

Transcript of Video:

1. To get started, drag and drop the modules in the editor into your desired configuration.
2. When you're satisfied with your design, press the black "publish" button.
3. You will be shown a popup with all the generated code. Double click inside the code box to select all the code, and then copy the selection to your clipboard by pressing CTRL + C if on Windows, or Command + C if on MacOS.
4. Now go to your Weebly website builder. Click on the "theme" tab. Then click on "edit HTML/CSS" in the lower lefthand corner. You'll be taken to a code editor.
5. Locate in the upper left the "header types" section. Next to the text is a "+" plus icon. Click on it, and click on "Create a New Header Type."
6. Name this header type whatever you want. This is where your layout will live. Select your newly created header type, and take a look at the code. You'll see a few lines of auto-generated code. Delete all that.
7. After you deleted the auto-generated code, paste in your previously-copied code from the Page Builder right into the code box.
8. Press the blue "save" button!
9. Give the editor a few seconds to catch up. Then, create a new standard page, or click on an existing page in the "pages tab" (depending on whether you want the layout on a new page or one of your current pages). In the page settings, locate the "header type" dropdown. From the dropdown, find your newly-created header type where you pasted all your layout code. The page should refresh and then load with your layout. It will look weird at first, don't worry, because it doesn't have any images yet.
10. ‍Simply begin uploading images in the image placeholders and start replacing text with your own. Soon, your webpage will look amazing. Keep doing this process, creating new header types and pasting your layout code in for each new layout you'd like.Be very careful not to accidentally tamper with any existing code in the theme, in any header types that you did not create.