There’s a common misconception among website owners that having a single page website doesn’t require any navigation. But the truth is, it is a key to boost your website design & traffic. So, this is why using a single page navigation is a must. If you are wondering about how to do this, you no longer have to worry. Because we are going to give you a quick tutorial on how you can easily create beautiful one-page websites using Essential Addons One Page Navigation for Elementor.
Why Do You Need One Page Navigatithe on?
To enhance user experience, you should use one page navigation system on your WordPress website. Having a well-structured navigation on your site helps improving it massively. Otherwise it leads to increase of bounce rates.
It allows your users to simply go from one section to another with just a click of the button. The navigation panel with clear icons and titles helps your visitors to comfortably go through your whole page.
Right off the bat, your visitors can choose which section they want to visit. As a result, they can easily access your company information, products and more.
Moreover, to make everything to the point, you must focus on designing your one page navigation and making it fast & attractive to the outside world.
Key Features
- Simple Configuration
- Concise & To the Point
- Smooth Navigation
- Tons of Icons
- Easily Customizable
Activate One Page Navigation
First of all, you will need to activate the “EA One Page Navigation” element from the Elementor Dashboard. Simply just drag and drop the element in the “Drag widget here” section.
That’s simply it. The EA One Page Navigation element would then be activated.
Configure the Content Settings
Like all the other elements, EA One Page Navigation also consists of three tabs. The Content tab has two sections: Navigation Dots & Settings.
Below the “Navigation Dots” section, you can add your Section Title, Section ID & Navigation Dot.
Section titles should be relevant names to represent each section of your page. Besides, you can use the drop-down menu to choose a suitable icon for Navigation Dot.
Keep that in mind that the number of items must be the same number as the sections you have on your page.
Moreover, the “Settings” section gives you the option to either turn on or off Tooltip, Tooltip Arrow, Scroll Wheel and few other options.
To fasten your navigation, you can increase the Scrolling limit as well and vice versa.
Just to make things clear, if you disable the Tooltip Arrow, this is how your navigation is going to look like:
Assign Section ID to Each Section
We have already created our navigation panel with Section ID & Title. Now, you have to assign Section ID to each of the sections of your page. This creates a connection between the navigation dots and the sections. It will allow you to easily navigate through the sections.
Note that, this step is very crucial so you have to carefully input the correct section ID for the respective section. Initially, click over a section and select the “Edit Section” option.
Afterward, you will view the “Edit Heading” section popping up in the Elementor dashboard. Then switch to “Advanced” tab and insert the relevant Section ID in the CSS ID field.
Consequently, do the same for the rest of the sections as well. As a result, once you click each of the navigation dots, you would be redirected to the respective section.
Style all the Features
From the “Style” tab, you can easily modify Alignment, Color, Size, Spacing, Tooltip and many more options of the navigation. The Styling section is pretty neatly done. So, you can comfortably play around with the styling settings and get your desired output.
Final Result
If you have been able to configure the settings correctly, the final output would be something like the picture below. Feel free to customize the settings or styling as per your preference, to get unique and desired result.
Summary
To wrap this up, we hope that this article will help you to set up “One Page Navigation” on your website easily & quickly. Always remember that user experience gets better with the easier navigation panel.
To get the feel of our one page navigation element, you can try out our Demo here. Let us know in the comments section if you have any questions.
1 thought on “Create Beautiful One Page Websites Using One Page Navigation for Elementor”
Awesome blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog jump out. Please let me know where you got your theme. Thanks