ScrolliPage is a feature in Oxygen that lets you create a vertical navigation bar, letting users smoothly scroll to different sections on your website.
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.
ScrolliPage won't work in the Weebly editor. You need to publish your site and view it live to see the linking work.
While you'll see a series of dots in the editor, any dot that isn't linked will disappear on the live site.
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.
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.
Note: We recommend refreshing your browser after adding 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 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.
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.
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.
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.
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.