--- title: "How to Create One Page Navigation in Elementor [Single Page Website]" url: https://theplusaddons.com/blog/create-one-page-navigation-in-elementor/ date: 2023-12-21 modified: 2026-04-07 author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/09/Create-One-Page-Navigation-in-WordPress-1024x536.png word_count: 2179 --- # How to Create One Page Navigation in Elementor [Single Page Website] ## Key Takeaways - One page navigation consolidates all website content into a single, continuous page. - The Plus Addons for Elementor includes over 120 widgets and a one page navigation widget. - One page navigation is ideal for small businesses with limited products or services. - Single page websites prioritize fast loading speed by reducing HTTP requests. - The Plus Addons for Elementor offers five distinct styles for scroll navigation customization. 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. Table Of Contents ## 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](https://theplusaddons.com/). 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]](https://theplusaddons.com/blog/create-scroll-back-to-top-button-in-elementor/).*** ### 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](https://theplusaddons.com/blog/speedup-elementor-website-performance/). 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](https://go.posimyth.com/recommends/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**. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Plugins.png) 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/intsall.png) *Looking for extra widgets to boost your Elementor editor? Check out** [Best Elementor Addons for WordPress](https://theplusaddons.com/blog/best-elementor-addons/).*** ### 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](https://theplusaddons.com/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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/The-Plus-Addons-for-Elementor-2.png) For the premium version of the addon, choose a [plan](https://theplusaddons.com/pricing/) as per your requirement. Next, go to the [POSIMYTH Store](https://store.posimyth.com/) 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/posimyth-store-download-the-plus-addons-elementor-pro-1536x592-1.jpg) 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**. ![](https://theplusaddons.com/wp-content/uploads/2023/09/upload-old-version.jpg) Click **Activate Plugin** to activate The Plus Addons for Elementor Pro plugin. ![](https://theplusaddons.com/wp-content/uploads/2023/09/the-plus-addons-elementor-pro-activate.jpg) 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**. ![](https://theplusaddons.com/wp-content/uploads/2023/09/the-plus-addons-elementor-licence-activation.jpg) ### 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Enable-One-Page-Navigation-Scroll.png) ### 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**. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Design-a-Web-Page.png) 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Edit-with-Elementor.png) 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Elements-1.png) 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?](https://theplusaddons.com/blog/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**. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Pick-the-Style-of-Your-Navigation-Menu.png) #### 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**. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Align-Your-Scroll-Menu.png) Here are some menu styles and alignments you can explore with The Plus Addons for Elementor. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Best-Elementor-Addons-1024x575.png) #### 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Add-Tooltip-Text.png) 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Edit-scroll-navigaton-365x1024.png) *Searching for unique fonts for your website? Here's a list of**[ 20 best Elementor fonts you should try](https://theplusaddons.com/blog/best-elementor-fonts/).*** #### 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/Add-Icons.png) You can also customize icon color, size, and spacing in the Style tab of Elementor settings. ![](https://theplusaddons.com/wp-content/uploads/2023/09/style.png) #### 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. ![](https://theplusaddons.com/wp-content/uploads/2023/09/E-Menu-Offset.png) ### 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: ![](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg) ##### Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​ [contact-form-7] Field LabelSend Me the eBook ## 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](https://theplusaddons.com/elementor-widgets/), including the one page navigation widget, dark mode, pop-ups, and many more advanced styling widgets and UI blocks. Check out the [**Complete List of 120+ Widgets and Extensions**](https://theplusaddons.com/elementor-widgets/) here. Start building your dream website without coding! ## FAQs about One Page Navigation ### What is single page navigation? Single page navigation or one page scroll navigation allows users to use mouse click or scroll to navigate different website sections. Unlike the regular websites where each page has a unique URL and content, a one page website consolidates all content and sections into a single, continuous page. ### What is the one page navigation menu? One page navigation menu is used to add scroll navigation or single page navigation to a website. The menu houses navigation buttons that users can click to navigate to a specific section on a website. It also shows labels for sections the user is currently viewing. ### What are the benefits of using one page navigation? The primary benefit of using one page navigation is that you can house all your content on one page. It makes it easier for visitors to find the information they seek. Also, one page navigation reduces the number of HTTP requests your website sends to the server, improving the loading speed. ### How do I create smooth scrolling with one page navigation? You can add smooth scrolling to your website using The Plus Addons for Elementor. The Plus Addons come with 120+ widgets, including smooth scroll. Simply drag and drop the smooth scroll widget to your page and tweak options like animation time, frame rate, step size, etc. ## Frequently Asked Questions **Q: What is one page navigation?** A: One page navigation, or single-page navigation, is a design that presents all content on a single page. Users can scroll through the website to access different sections, providing a linear design that guides users to the call-to-action at the end of the page. **Q: How do I create a single page website using Elementor?** A: To create a single page website using Elementor, first install the Elementor plugin and The Plus Addons for Elementor. Enable the Scroll Navigation widget, design your page with sections, and add the Scroll Navigation widget to link the sections for smooth navigation. **Q: What are the benefits of one page navigation?** A: One page navigation allows all content to be housed on one page, making it easier for visitors to find information. It also reduces the number of HTTP requests, which can improve loading speed, making it a suitable choice for fast loading websites. **Q: When should I use one page navigation for my website?** A: One page navigation works best for small businesses with few products, promotional websites, creative portfolios, fast loading websites, and mobile-first designs. It offers a simple and elegant way to present content without overwhelming visitors. **Q: What is the one page navigation menu?** A: The one page navigation menu allows users to click buttons to navigate to specific sections on a website. It consolidates the navigation into a single menu, showing labels for the sections users are currently viewing. **Q: How can I customize my one page navigation menu?** A: You can customize your one page navigation menu using The Plus Addons for Elementor. It offers options to select styles, align the menu, add tooltip text, and customize icons for each navigation item, enhancing the overall design of your website.