How to Create One Page Navigation in Elementor [Single Page Website]

Looking to design a website with one page navigation? We have you covered.

In a world where information is just a click away, minimal design interfaces reign supreme.

Look at modern operating systems and their apps. They all have simple UI that is easy to navigate and looks stunning.

What if you could also provide your website visitors with an intuitive and seamless experience? It’s not that difficult. All you need is a single page website with one page navigation.

Join us as we explain what one page navigation is and how you can add it to your website.

What is One Page Navigation?

One page navigation, or single-page navigation, is a website design that developers use to present all of the website’s content on a single page. Users can scroll through the website to navigate to different sections.

Unlike your usual multi-page websites, where each page has its own unique URL and content, a one-page website consolidates all of its content and sections into a single, continuous page.

Single page navigation doesn’t overwhelm visitors with tons of information at once.

Instead, it allows you to create a linear design that effectively presents bits of information in each passing section and guides users to the CTA at the end of the page.

Here is an example of what a single page website with one page navigation Elementor looks like:

The one-page navigation above was created using The Plus Addons for Elementor. As you can see, the webpage has multiple sections and a one-page menu on the left side.

The menu shows icons for different sections on the page, which show the section’s name upon hover.

Users can either click on the desired icon in the menu or scroll through the sections to navigate the webpage.

Looking to add a scroll back to top function to your website? Here’s how you can create scroll back to top button in Elementor [No Plugin Required].

When to Use One Page Navigation for Your Website?

Single page navigation looks simple and elegant, but you must carefully consider the nature of your business, your website’s content, and user behavior and preferences before adding it to your website.

Here are some instances where one page navigation works best on a website:

1. Small Business

One page navigation website works well for small businesses offering only a few products or services. You do not need a complex website with multiple pages if you own a salon, restaurant, or photography studio.

You can fit all vital information on a single page, including contact details, testimonials, product/service descriptions, etc. In such cases, you can use one page navigation to make your website look classier and easier to navigate.

2. Promotional Website

Brands often create temporary websites called microsites to run an ad campaign or promote an upcoming product.

In such cases, you can arrange all your promotional material into different sections and use one page navigation menu.

3. Creative Portfolios

One page navigation compliments particularly the website that hosts visual content.

If you have to showcase your portfolio of pictures, paintings, or any other media, you can use a single page website with one page navigation.

4. Fast Loading Website

Another case where you may want to use a one page navigation is when you want to prioritize fast loading speed.

As mentioned earlier, a single page website houses all your content in different sections on a single webpage instead of using multiple web pages.

It reduces the number of HTTP requests your server has to process, boosting your website’s loading speed.

5. Mobile-First Website

Vertically scrolling or swiping gestures, for that matter, come naturally to smartphone users.

If your visitors mostly use their mobiles to access your website, you can design it with a single page layout and one page navigation to create a seamless scrolling interface.

How to Create Single Page Website using One Page Navigation in Elementor [Step-by-Step]

Now, let’s go over the steps to create a single page website using Elementor one page navigation:

Step 1. Install Elementor Page Builder

First and foremost, you must install the Elementor plugin to WordPress. If you already have installed Elementor, move to the next step.

To install Elementor, head to the WordPress dashboard and click Plugins > Add New.

In the search bar, look up Elementor, select the plugin named Elementor Website Builder, and click Install.

Then, click Activate. This will install and enable the free version of Elementor.

Looking for extra widgets to boost your Elementor editor? Check out 8 Best Elementor Addons for WordPress.

Step 2. Install The Plus Addons for Elementor

Elementor allows you to install and use amazing addons to add advanced functionalities to your website, including the one page navigation widget.

For this guide, we are using The Plus Addons for Elementor by POSIMYTH Innovations, which comes with one page navigation and an additional 120+ Elementor widgets.

The Plus Addons is a freemium plugin, so first, you must install the base version from the WordPress repository before you can install the pro version.

From the WordPress dashboard, click Plugins > Add New.

Search for The Plus Addons for Elementor, install it, and activate it. This will add the free version of The Plus Addons with over 35 free Elementor widgets.

For the premium version of the addon, choose a plan as per your requirement.

Next, go to the POSIMYTH Store and log in to your account. It will give you access to 120+ Elementor widgets and 300 UI blocks.

Head over to your POSIMYTH account’s dashboard and click Download. Now download the zip file for The Plus Addons for Elementor Pro.

Again, head back to the WordPress dashboard and click Plugins > Add New.

Then click Upload Plugin and upload the downloaded zip file. Click Install Now.

Click Activate Plugin to activate The Plus Addons for Elementor Pro plugin.

To activate The Plus Addons Pro license, log in to your POSIMYTH Store account and copy the activation key for The Plus Addons from the dashboard.

Now, head back to WordPress and open The Plus Addons settings from the dashboard. Paste your license key in the License Activation field and click on Activate.

Step 3. Enable One Page Navigation Scroll

To get the Elementor one page scroll navigation, now, from the WordPress dashboard, go to The Plus Settings. Head over to the Plus Widgets tab and search for Scroll Navigation.

Toggle the switch for the scroll navigation widget, click Save, and move to the next step.

Step 4. Design a Web Page

Once you’ve enabled the Scroll Navigation widget from The Plus Addons settings, you can use it on your website.

Add a new page by clicking Pages > Add New. To edit an existing page, click Pages > All Pages > Select your desired page.

Adding a new page will open the default Gutenberg editor.

But we will click Edit with Elementor to design our page using Elementor page builder.

For this guide, we’ll use an Elementor template with sections like Pricing, FAQs, Reviews, Call-to-Action, etc.

Depending on your needs, you can design a completely custom web page and add as many sections as you want.

Select a section to open its settings in the Elementor’s side menu. Head to the Advanced tab, look for CSS ID and give your section a CSS ID.

CSS ID should only be one word and shouldn’t contain whitespaces or special characters.

Enter the CSS ID for every section on your page, and remember the IDs, as you’ll need them to create a functional one page navigation menu.

Step 5. Add One Page Navigation Widget

Now that our web page is ready, we can add one page navigation widget, which is available by the name of the Scroll Navigation widget in The Plus Addons for Elementor.

So, look for the Scroll Navigation widget in the Elementor Side menu. Drag and drop the widget to your page.

Select the Scroll Navigation widget to open its settings in the Elementor menu.

In the Content tab, look for the Add Item button and add items equivalent to the total number of sections on your web page.

This will add a navigation menu with buttons to your page.

Click Item #1 and look for Section ID. Write the CSS ID for the first section in the Section ID text field.

This will link the navigation button for Item #1 with the corresponding section.

Similarly, select other items and link them with other sections using CSS ID. Once done, the navigation buttons will become clickable.

You can now use a mouse click to navigate to the section linked to those buttons. Also, they can now highlight the section the users are currently at.

Elementor is a popular builder, but is it hindering your site performance? Check our detailed analysis of the burning question – Does Elementor Slow Down Your Website?

Step 6. Customize Your Design

Now that we’ve added a scroll navigation menu, we can stylize it to match our website’s design.

Select the Scroll Navigation widget and tweak settings and toggle options per your preferences.

A. Pick the Style of Your Navigation Menu

The Plus Addons for Elementor comes with five distinct styles for scroll navigation. Simply pick one from the Style drop-down menu in the Content tab.

B. Align Your Scroll Menu

You can also align to all sides and corners of your webpage. Pick a desired option from the Direction drop-down menu.

Here are some menu styles and alignments you can explore with The Plus Addons for Elementor.

C. Add Tooltip Text

The tooltip text is a label that appears when you hover your mouse over or click an icon in the navigation menu.

You can also set the tooltip to display continuously, on hover, or when the user is on a specific section.

You can specify the tooltip margin and padding in the Style tab of the widget’s settings. You can also customize the typography and add background to your tooltips.

Searching for unique fonts for your website? Here’s a list of 20 best Elementor fonts you should try.

D. Add Icons

The Plus Addon allows you to add a custom icon for each item in the scroll navigation menu.

Enable the Icon option, select an icon library, and pick your desired icon. You can also upload icons from your library.

You can also customize icon color, size, and spacing in the Style tab of Elementor settings.

E. Menu Offset

The offset setting is another customization you can make to your one page menu. Enabling this option in the Style tab keeps the menu hidden.

The menu only appears once the user starts scrolling.

Step 7. Publish

Once you have customized the look and feel of your single page website and one page navigation menu, preview your design and publish it.

Here is the final version of our single page website with one page navigation.v

Wrapping Up

That wraps this guide on how to create one page website with Elementor. Wasn’t it quick and easy?

One page navigation compliments a single page website very well. But as a designer, you know that the possibilities are endless.

You can experiment with Elementor page navigation menu for different sections of your website, like product listing, landing pages, promotional campaigns, etc.

However, you must carefully consider visitors’ behavior, preferences, the device they use to surf the web, and the nature of your content.

And if you decide that single page navigation is what your website needs, The Plus Addons for Elementor is all you need.

For just $39/year, The Plus Addons gives you access to 120+ Elementor widgets, including the one page navigation widget, dark mode, pop-ups, and many more advanced styling widgets and UI blocks.

FAQs about One Page Navigation