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 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?
A 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.
|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
Elementor, Beaver Builder, WP Page Builder, Visual Composer, Page Builder Sandwich, etc.
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.
Install and activate the Elementor plugin. Install a Theme, Here I’m using Generate Press. You can use any theme compatible with Elementor.’
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).
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.
Give the section a CSS ID. here, I’m giving it an ID name “hero“. 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.
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),
Section Two: about,
Section Three: info,
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.
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 #.
Target the first section ID attribute (#hero) by providing the id as a custom link as shown above.
Add the item to the menu.
Follow the same step for each of them. Save the menu.
Set that one page webpage as your homepage and try clicking on a navigation menu link.
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.