1. Home
  2. Docs
  3. Content Elements
  4. One Page Navigation

One Page Navigation EA Element

The One Page Navigation element allows you to give your WordPress websites unique navigation with Elementor page builder. You can add multiple dots or a single page and can link them to sections using the section IDs. You can even make numerous changes such as tooltip display, scroll speed, and icon settings, design changes and so on. Here in this tutorial, you’re going to learn how to use the One Page Navigation element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the One Page Navigation Element

 

 

»Content

 

Navigation Dots

⇒Section Title: Add the section title for the navigation.

⇒Sectio ID: Add section ID here.

⇒Navigation Dots: Use the dropdown menu to choose an for the navigation dot.

⇒Add Item: Use the ‘+Add Item’ button to add more navigation dots to the list.

 

Settings

⇒Tooltip: Enable the tooltip to show the tooltip on hover.

: Enable the tooltip arrow.

: Use mouse wheel to navigate from one row to another.

⇒Scroll Keys: Use UP and DOWN arrow keys to navigate from one row to another

⇒Row Top Offset: Customize the row top offset.

: Change the Scrolling speed of your page navigation from this section.

 


»Style

 

Navigation Box

⇒Alignment: Set the navigation box alignment

⇒Background Type: Set the background type either Classic or Gradient for the Navigation box. And then customize the style according to your preference.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the content for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content for different dimensions.

⇒Margin: Set the margin value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the Navigation box for different dimensions. You can link the values together or customize them individually.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Navigation Dots

⇒Size: Set the navigation dots size manually for different dimensions.

⇒Spacing: Customize the spacing of the dots for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the navigation dots for different dimensions. You can link the values together or customize them individually.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Color: Add a custom color to the navigation bar for normal, hover and active view.

⇒Background Color: Add a custom background color to the navigation bar for normal, hover and active view.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the content for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content for different dimensions.

 

Tooltip

⇒Background Color: Add a custom background color to the tooltip.

⇒Text Color: Add a custom color to the tooltip text.

⇒Typography: Set the typography options for the tooltip.

⇒Padding: Set the padding value for the top, right, bottom and left around the tooltip for different dimensions. You can link the values together or customize them individually.


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of One Page Navigation Element.


Was this article helpful to you? Yes No

How can we help?