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.

 

Demo

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.

one

Activate OPN from your plugin installer.


Create a page on which you want to use OPN.

Step 2: Finding OPN in your Editor.

two

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.

two

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.

three

 

Enter the Tooltip Text.

four

 

Select Icon under Select Icon Tab and Save Changes.

five

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

 

Sample OPN

six

 

OPN Element with its Items.

seven

 

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.

six

 

Step 2: Assign ID to Row

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

six
Demo 1: Row Settings

 

A popup with settings will occur as shown.

six
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.

six

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

 

Thank you!!! Hope this tutorial helped you.