OnePage Website


In this section I will explain you how to build famous OnePage Websites. Actually it’s very simple and easy to understand. Below I will describe how it works generally, but you can skip this paragraph and go to step by step illustrated tutorial. Also it will be helpful if you leave a comment about what you don’t like in this article.

The logic how it works is: we create a single page (ex: Home), which will be divided by Sections (Blog, Portfolio, Contact, About…) and each section will have an unique ID which will be linked from Navigation Menu to a Sections on the homepage, it means, when you click ex: Portfolio in the navigation menu it will scroll down to Portfolio Section on the page. As on this picture below or you can check our demo One Page Example Here.


For examle: we create a Menu Item – Blog, which will have custom link – #blog (with hashtag and lowercase) and then we’ll create a section via Visual Composer plugin and give it an ID – blog (no hashtag, but lowercase). Now we have A menu item – Blog which is linked to Blog section on the page and when we click on menu item Blog, it will scroll down to Blog Section. Thats it, so simple, but now let me explain you step by step.

Step 1.
Go to your Dashboard -> Pages -> Add New and create a new page called Home.

Step 2.
Now add a Visual Composer Row element to this page and give a specific ID which is very important. After this you can insert any kind of content in this section.

Step 3.
Go to your Dashboard -> Appearance -> Menus and create a custom link Blog and add to main menu with Custom Url #blog. And don’t forget that to get all this working you should give the same ID to a Visual Composer section, but without hashtag (#) as in Step 3.

Step 4.
You can repeat Step 2 and Step 3 for other sections (#portfolio, #about, #contact …) as much as you want.

Step 5.
Go to your Dashboard -> Settings -> Reading and setup a Home as a Front Page.

Step 6.
And finally, go to your Dashboard -> Appearance -> Customize and Enable Onepage Future option.

Congratulations! Now you have a working example of a OnePage Website.


Was this article helpful?

Related Articles