One Page Nav

Introduction

The One Page Nav Widget enables smooth, customizable navigation between sections on single-page websites, enhancing user experience and engagement.

Note: Before using the One Page Nav Widget, ensure that you have the Animation Addons plugin installed and activated on your WordPress site.

Key Use Cases for the One Page Nav Widget in Elementor:

• Use the One Page Nav widget to create seamless, easy navigation between sections on a single-page website. 
• Customize the design and links to enhance user experience and improve site interaction.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate a One Page Nav widget ?

To activate the Progress Bar widget, navigate to:
Animation Addons → Elements from your WordPress dashboard.
Then, find the One Page Nav Widget in the list of available widgets and toggle it on to enable the widget. Once enabled, click Save Settings to finalize the activation.

How to Add the One Page Nav Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “One Page Nav” .
4. Drag the One Page Nav widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the One Page Nav Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

In the Elementor Editor, click the ‘+’ icon to add a section. Search for the “Progress Bar”, then drag and drop it into the desired section of the page. Configure the widget settings under the available tabs to customize it as needed.

Here’s the interface where you can configure the settings and customize the One Page Nav Widget across various tabs. 

Configuring One Page Nav Widget : A Step-by-Step Guide

Once the One Page Nav widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Navigation and Settings.

Navigation

I have set the text, section ID, and faq for the Home section. The differences are highlighted in the screenshot below for easy reference.

Similarly, I have customized the remaining sections, such as About and FAQ, with all necessary adjustments. You can implement the same changes to see the difference.

Settings

I have adjusted all the settings according to my design preferences to achieve the desired look and feel.

I’ve configured everything based on my design preferences, but feel free to adjust them according to your own style and design requirements.

—————————————————————————————————————————-

Style Settings

Now, it’s time to enhance your navigation wrapper and navigation item by styling them, using the progress bar and percentage options to give them a polished look.

Navigation Wrapper

• I made some adjustments to the navigation. Please review the customizations, and feel free to apply them to your design to see the changes.

Navigation Item

• Since I haven’t added any icons to my design, there’s no need to adjust them for mine. However, you should definitely consider adding them and customize your design accordingly.
  
  

Here is the final output after completing all the customizations. Feel free to adjust any settings according to your preferences to further enhance your design-

—————————————————————————————————————————-

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

—————————————————————————————————————————-

Final Outcome

That’s it! You’ve successfully learned how to configure the One Page Nav widget in Elementor to create customizable, clickable buttons on your website.

For any further assistance or inquiries, feel free to contact our support team!