Vertical Navigation Scrolling with ScrolliPage

ScrolliPage is a feature in Pristine that lets you create a vertical navigation bar, letting users smoothly scroll to different sections on your website.

How ScrolliPage Works

ScrolliPage works with the Weebly sections element. If you set your header type to ScrolliPage, you'll see a series of vertical navigation dots on the right side of the screen. As you drag in Weebly Section elements, each vertical nav dot will automatically link to each section in corresponding order.

Only Works on the Live Website

ScrolliPage won't work in the Weebly editor. You need to publish your site and view it live to see the linking work.

Excess ScrolliPage Navigation Dots Will Disappear

While you'll see a series of dots in the editor, any dot that isn't linked will disappear on the live site.

Works with the Built-In Weebly "Sections" Element

Every "Section" element you drag into your page will automatically link to each vertical nav dot in ScrolliPage, in order. The first dot will link to the first section. The second dot will link to the second section.

Note: ScrolliPage is Not Currently Compatible with Page Builder Created Layouts. We are adding this feature soon. If you require this, please contact our support and we can send you a beta-version.

How to Add ScrolliPage to Your Website

Step 1: Set Your Website Page to the "ScrolliPage" Header Type

To apply the ScrolliPage One-Page Vertical Navigation to a page, you'll need to set its Header Type to the ScrolliPage option, as illustrated above.

1. From the Weebly editor, click on the "Pages" tab.
2. Either create a new page, or click on an existing page.
3. In the left-hand column, you should see the "Header Type" dropdown. Click on it, and browse until you find ScrolliPage. If you don't want a header image, select "ScrolliPage-No-Header."
4. You should now have ScrolliPage installed on your page. Read the instructions below on how to configure ScrolliPage.

Note: We recommend refreshing your browser after adding ScrolliPage

Step 2: Configure ScrolliPage

The vertical navigation dots will take the user to a specific section. It's great for dividing longer pages.

Each dot automatically links to a Weebly Section, in corresponding order. In the Weebly builder, you'll see many of these vertical navigation dots. In the live published version of your website, you will only see the number of dots that correspond to the number of Weebly sections you have on that page. If you have five Weebly sections, you'll see five vertical navigation dots, each linking to the corresponding section in order.

Add Weebly Section Elements. These Will Link to the Circle Dot Links.

Add Weebly Section elements to the body of your website. Each green (you can change their color) vertical navigation dot is automatically linked to a Weebly Section you drag and drop, in order. ​For example, if you drag in three Weebly sections, Dot #1 will link to section #1 (the first section), then dot #2 will link to section #2, and dot #3 will link to section #3. The other dots will be unused and unlinked. While they will still show up in the Weebly builder, they will not show up on your live, published website.

Add Navigation Text to Each Vertical Navigation Dot

You'll want to "label" each ScrolliPage dot so that the user knows which dot takes them to which section.

You can do this by hovering over each dot, and clicking on the "Click here to edit text." placeholder. Give the dot any name you want. Note: any dot that does not have text assigned to it (i.e if it says "Click here to edit text." with no text added) will not show up on the published website. Any dot that has text assigned to it (i.e doesn't say "Click here to edit text.") will show up in the live published website.

A Few Things to Note

1. In the Weebly builder, ScrolliPage will not function. It functions when the website is published, on the live actual website. In the Weebly builder, linking won't work, and excess dots will not disappear.
2. Occasionally, the side vertical navigation dots may interfere with adding or removing content from the website body in the Weebly builder. In this case, you can click on the "Toggle ScrolliPage Nav" button in the lower lefthand corner to temporarily hide these dots.

Unable to Edit the Text on Some Dots? Unable to "Reach" The Label?

On some desktop resolutions, you may find that you are unable to edit the text on the dots located at the very top (or very bottom). The fix for this is to temporarily decrease the zoom level on your desktop browser from 100% to 50% or lower. Lowering the zoom level will cause all the elements to shrink, letting you edit the top-most vertical navigation dot with ease. In Google Chrome, you can do this by clicking on the three-dot settings menu button in the upper righthand side of the toolbar, then reducing the "Zoom" setting from 100% to something lower. After you've successfully edited the dot content, you can go back and reset the zoom to a normal setting.

‍
Sample Workflow #1 - An Example of Setting ScrolliPage Up

Let's say you want four Weebly Sections (the ones you dragged and dropped) linked with four dots.

The first dot takes the user to the first section, the second dot takes the user to the second section, etc.

To do this, drag 'n drop four Weebly Section elements and drag them into the body of your website. The moment you drop these sections, the first four vertical navigation dots will link to the first four sections you just dropped. Dot #1 will link to the first section on your site, dot #2 will link to the second section, dot #3 will link to the third section, and dot #4 will link to the fourth section.

The same is true if you add six sections, or eight sections, or ten sections.​

After you add the sections, you'll want to give your dots a label so that when the user hovers over them, they see a little description appear. To do so, hover over the dot you want to edit, and (while still hovering), click on the "click to edit" text and add a name. Make sure the vertical navigation dot you click on corresponds directly to the section you want to describe.

‍Any dot that does not have a description (i.e says "Click here to edit" when it is hovered upon) will NOT show up on your live website.

Sample Workflow #2 - Another Example of Setting ScrolliPage Up

For this example, we will be trying to create a page in ScrolliPage. Our goal is to have five sections.

Section 1 is "about us", section 2 is "our team", section 3 is "features", section 4 is "testimonials" and section 5 is "contact us."

Therefore, we want five dots, each linking to each one of the five sections.

Below is what you should do to accomplish this task.

1. Drag and drop five sections into the body of your Weebly website page (make sure you have the header type set to ScrolliPage).

2. Add content to your five sections.

3. Now it's time to "activate" the vertical navigation dots by giving them a name. Hover over the first dot, click on it (while still hovering) and call it "about us" or something similar, since it's linked to your first "about us" section. Do the same for the next four dots. After you name the five dots, don't give any more dots their names because you don't want them to show up (since they're not linking to anything, you only have five sections).

4. Project finished. Publish your website, and view the live version to see ScrolliPage functioning on the live website.