One Page Navigator

Isn’t it interesting if you navigate your page just by clicking instead of scrolling and still having the complete view of the page. This can be done by One Page Navigator plugin. This helps to navigate your page with the help of navigation bar. It allows you to access various sections of page (e.g bottom-top) without scrolling and just by making few clicks on the navigation bar.

Top Features

  • Give Unique ID to the Rows
  • Link From Any Visual Composer Element
  • Link From WordPress Menu
  • Smooth Scroll
  • Navigator UI Element

Using One Page Navigator involves two phases

Phase I: Installing your plugin & configure your OPN VC element.

Phase II: Associating one page navigator element with VC Row.

Phase I

Step 1: Installing your plugin

Follow similar steps and install One Page Navigator.

Step 2: Finding One Page Navigator Element in your Editor.

1. Click on the One Page Navigator tab.

2. We can see a new element as One Page Navigator (Parent element).

two

Step 3: Adding One Page Navigator Item (Child element) in parent element.

three

Step 4: Assign ID to One Page Navigator Item

Every One Page Navigator Item is assigned a unique ID, and these ID’s are predefined in VC Rows that will associate particular row with One Page Navigator Item.

six

 
note: one must use unique ID to connect various VC Elements with One PAge Navigator. ID acts as a connector between VC Element and One Page Navigator.

As a result One Page Navigator identifies your VC Element on click and takes you to that section.

Demo: Phase I

Demo 1: VC Row Configuration 

Phase II

Step 1: Assign ID to Row

Assigning ID through One Page tab

This method will take effect only if Row ID (Row Settings> General -> Row ID) is empty.

six
Row Settings

Demo: Phase II

Demo 2: One Page Navigator Configuration

Alright, we are now ready to scroll…