About OPN

OPN (One Page Navigator) 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.



Setting up your OPN

Let’s get started.

Step 1: A demo of installing a plugin from codecanyon and installing zip is shown.

Follow similar steps and install OPN.


Activate OPN from your plugin installer.

Create a page on which you want to use OPN.

Step 2: Finding OPN in your Editor.


1. Click on the One Page Navigator tab.

2. We can see a new element as OPN.

Implementing OPN on your page.

Step 3: Select the OPN element as shown in Step 2.

On selecting, a window with settings will occur as shown below.


Setup your settings as per your requirement and save your changes.

You can make five major settings shown in tabs.

Adding OPN item.

Step 4: Follow the steps 1 & 2 as shown below.



Enter the Tooltip Text.



Select Icon under Select Icon Tab and Save Changes.


You can continue adding as many OPN Items in OPN Element as per your needs.


Sample OPN



OPN Element with its Items.



Steps to configure

Steps 1: Assign ID to OPN Item

Every OPN Item is assigned one particular ID, and this ID will be used in row to produce the navigation effect as shown.



Step 2: Assign ID to Row

a. Finding row settings in your editor: Click on edit Row Setting as shown.

Demo 1: Row Settings


A popup with settings will occur as shown.

Demo 2: Row Settings

Select the One Page Tab and make the necessary settings.


b. ID defined in OPN Item will be assigned to a particular row so that whenever a click is made it will navigate to that particular row on click event.


Row settings -> One Page Tab -> Assign  Row ID


Thank you!!! Hope this tutorial helped you.