One Page Nav

Before setting up the Animated Title Widget for your one-page navigation, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll gain access to all free Elementor widgets, including the Animated Title Widget, at no cost! You can easily explore both free and pro widgets by using the filter options for efficient navigation within your one-page layout.

Introduction

The One Page Nav Widget provides smooth, customizable navigation for single-page websites.

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 the One Page Nav Widget?

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Find the One Page Nav Widget in the list.
3. Toggle it on to enable the widget.

Now, the One Page Nav Widget is ready to use!

How to Add the One Page Nav Widget in Elementor

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

How to Configure the One Page Nav Widget in Animation Addons:

• In the Elementor panel, search for the “One Page Nav Widget.”
• Drag and drop the widget into the desired section.
• Customize the navigation settings using the available options in the Elementor panel.

Your One Page Nav Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the navigation links for a seamless one-page website experience.

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 

• From the Content section, you’ll find two subsections: Navigation and Settings.
• Under the Navigation subsection, you can set up your one-page navigation menu with items like Home, About, and FAQ.

Settings

From the Settings subsection, you’ll find the following options:

• Navigation Position: Choose where the navigation appears—left or right side of the screen.
• Vertical Position: Adjust the vertical alignment of the navigation—top, middle, or bottom.
  Show Tooltip: Toggle this on to display tooltips when hovering over navigation items.

Style Settings

Now, it’s time to enhance the look of your navigation using the Style section. Here’s what you can explore:

• Navigation Wrapper: Customize the background, border, padding, and spacing to match your site’s design.
  
• Navigation Item: Style the individual items with color, size, spacing, hover effects, and more for a clean and modern look.

These styling options help you create a visually appealing and user-friendly one-page navigation setup.

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!