The concept of One Page Website is, all of its content will be attached together on a single page. But only a specific part of it will be visible with each scroll.
Your visitors will need to scroll down or up to navigate through all of your website’s content. But, you can eliminate the need for scrolling by placing a navigation bar. In this blog, I am going to build a vertical scrolling website and that too without any coding knowledge.
Single Page Scrolling Website Tutorial
For building a single page scrolling website we will use Elementor and Essential Addons. Particularly we will be dealing with one element only-EA One Page Navigation.
First, head over to your Elementor Side Panel and pick the EA One Page Navigation Element.
Now head over to Content > Navigation Dots. You will see 3 Navigation Dot Cards by default and all of which will have a Section ID assigned to it. What’s the use of this Section ID?
Well, the Section ID goes into the CSS ID field of the elements/sections that you will be adding to your one-page website. You will see in the later parts of this blog how it is done!
Using Elementor Template
Let’s assume, you will pick an Elementor Template for your Single Page Website. To do so, you need to click on the Add Template Button sitting at the middle-right part of the Elementor Interface. It will bring up a pop-up listing all the readily available templates.
The Template that I have picked has 5 distinct parts. I am going to include all the 5 parts to the Navigation Dots bar. So if you have followed along, this means I need 5 Navigation Dots Cards.
However, you might want to pick a different template from the Library. But remember, that should not be an issue. While working with any Elementor template, you should always ask yourself how many sections should be treated as distinct parts. Once you have figured that out, head back to the One Page Navigation element and adjust the number of Navigation Dot Cards.
Let’s see what the template that I have picked includes. The first one is kind of an introductory page, the second part is a services part, the third is for the APP, the fourth is a video, and the last one is the footer part including all the social profile links.
So this means I have five distinct parts in the template. And I need to add 2 more Navigation Dot cards as by default the first three cards are already there.
So how do you add new cards?
- You can either click on the duplicate button at the right side of each card.
- You can use the Add Item Button at the bottom of the tab.
- Use the cross button in case you need to remove any cards.
This is how the Navigation Dots bar (Inside the rectangle) will look after you include the additional 2 cards.
Assigning The Section ID To Elements/Sections.
Now that you have identified sections for the One Page Website and also adjusted the Navigation Dot Cards, let’s move on to the next step.
Each Elementor Element has a CSS ID field to it as do all the Elementor sections and columns. You will find it by navigating to Advanced>CSS ID.
Okay, so now we know where the Section-ID will go. Let’s start by specifying the Section-ID for the first section.
- Click on the first icon ‘Edit Section.’
- Head over to Advanced Tab.
- Paste the Section ID inside the CSS ID field.
You will have to repeat this same process for the rest of the Four Sections of your One-Page Website.
- Click on the first icon ‘Edit Section.’
- Head over to Advanced Tab.
- Paste the Section ID inside the CSS ID field.
Time for a quick test!
Once you are done assigning the Section ID to all the Section hit the Preview button from the Elementor Footer Panel.
Works just fine! Good news for you, we are done with the Technical part. Now, let’s dig into the styling part.
Add Styling to Your Navigation
Head over to the Style Tab. Play around with all the customization options until you are happy with your creation.
If you want o to customize the Navigation Dots, you will have to do it from the individual Navigation Dot Cards.
You can also take inspiration for your design from the Navigation Dot Demos.
Wrapping Up!
The only technical part in the process of building Single Page Scrolling Website with Elementor and Essential Addons is- specifying the number of Navigation Dot Cards and copying the Section-ID to the CSS ID fields.
Once you have got the technical part done, the rest of the process is no big deal. The instructions illustrated above should give you enough material to work with for now.
Do let us know if you find any part difficult to understand. We love hearing from you, leave a comment below and we will get back to you. In the meantime here is a quick blog on how you can build Content Timeline using Elementor and Essential Addons.
