Elementor One Page Navigation: Step by Step (Easy)

Creating a One-Page website with Navigation Menu is easier than you think. In this short article, I will show you Elementor One Page Navigation. We are going to create a One-Page Navigation Menu as well.

As usual, I’m going to cover some basic topics related to Elementor and page builders.

What is Elementor?

Elementor one page Navigation
Image : WordPress

Elementor is a Drag & Drop page builder for WordPress. Elementor is one of the best free Website builders for WordPress.Elementor is fast and relatively easy to use. It comes with some amazing features such as Responsive Editing, Background Gradients & Videos,90+ Widgets, CSS Filters, Free Templates, etc. With 5+ million active installations, Elementor is one of the most popular Website builders for WordPress.

What is One Page Navigation?

One Page Navigation is a single webpage that has different sections (instead of different pages) and all pages are merged together in one single page. The nav items don’t redirect to a different page but they got scrolled to that specific section upon click. 

Difference Between Page Builders and Website Builders

Although both Page builders and Website builders help us to build websites. However, there are certain differences between page builders and website builders.

What is a Page Builder?

Page Builder is a type of software tool that helps us to build web pages without coding. Page builder makes it very easy and quick to make professional-looking page layouts. Most page builders can be used by almost anyone as they don’t require any coding knowledge.

Example of Page Builders: Brizy, Oxygen, Elementor, WPBakery, Visual Composer, Page Builder by SiteOrigin, etc.

What is a Website Builder?

Website Builder is a type of software tool or platform that helps build a whole website without coding. You can easily build a website (including the header and footer) using a website builder.

Example of Website Builders: Wix, WordPress, strikingly,zyro, etc.

1.Page builders are tools to make page layouts.1. Website builders are tools or all-in-one platforms to build full-fledged websites.
2.Most page builders are easier to use.2.Website Builders are relatively complex than page builders.
3.Page builders don’t include features of a Website Builder.3.Generally, Website Builders include the features of page builders.
4.4. Many page builders are platform-dependent. They are not compatible with different platforms.  

Example: We can Elementor with WordPress (Website builder). However, we cannot use Elementor with another Website builder such as Squarespace or Weebly.
4. Most website builders are platforms themselves where you can use different page builders.

Example: With WordPress, you can use many page builders such as 
ElementorBeaver Builder, WP Page Builder, Visual Composer Page Builder Sandwich, etc. 
Difference Between Page Builders and Website Builders

Elementor One Page Navigation 

Before Creating a One Page Navigation or One-page website with Elementor, You must know the basics about Elementor and Some basics of HTML (optional). In case you don’t know how to use Elementor, you can find free tutorials on youtube.

So let us know how to create a One Page Navigation with Elementor.

Step 1 

Elementor One Page Navigation With GeneratePress
Image : WordPress

Install and activate the Elementor plugin. Install a Theme, Here I’m using Generate Press. You can use any theme compatible with Elementor.’

Also Read : Best Themes for Elementor Pro in 2021 (Free & Premium)

Step 2 

Elementor one page Navigation

Import a template or start from scratch. Now Open a page and click on edit with Elementor. This one page website will have four sections (You can add as many as you want).

Step 3

Elementor One Page Navigation

Create the hero section. Once you have created the first section, now comes the important part. Now click on the edit section or the six dots. Go to the “Advanced” Tab as shown above.

How to Make Any WordPress Theme Compatible With Elementor (Free)

Step 4 

One Page Website with Navigation Menu

Give the section a CSS ID. here, I’m giving it an ID namehero“. This id will act as a link for our Navigation menu. Let us create three more sections and give unique ID attributes respectively. Remember you cannot use the same ID twice.

Step 5

Creating three more sections and assign ids to each of them. Now we have assigned id to each section, we can move to the next step.

The ID for Each Section:  

Section One: hero (Shown above),

Elementor One Page Navigation

Section Two: about,

One Page website with Navigation Menu

Section Three: info,

Elementor One Page Navigation

Section Four: features

How to Create a One Page Navigation Menu in Elementor

Now we can create the One Page Navigation Menu. To do that let us create a new menu.

Go to your WP dashboard > Appearance > Menus.

How to Create a One Page Navigation Menu in Elementor

Now create a custom link (as shown above). If you know a little bit of HTML and CSS, you probably know we indicate ID attribute with #name (if you name an ID “myID”, you have to use #myID to target it). 

We can easily target an ID as a link (internal link) or anchor with #.

Step 1

Target the first section ID attribute (#hero) by providing the id as a custom link as shown above.

Add the item to the menu.

One Page Website Using Elementor

Follow the same step for each of them. Save the menu.

How to Create a One Page Navigation Menu in Elementor

Step 2

Set that one page webpage as your homepage and try clicking on a navigation menu link. 

One Page Website Using Elementor

The link should look like this. The URL/#yourid.Click on and the page should scroll down to that section. You have a one page website.

Now you know about the basics of Elementor one page Navigation.

Conclusion: You can easily make a one page navigation without any extra plugin if you know how to use the HTML ID attribute as an anchor.

Leave a Comment