One Page WordPress Site Style #
In this tutorial on the visualmodo knowledge base, we will show how to create a One-Page Site using our WordPress Theme in a simple and easy way and how to organize it with our themes.
This is an example of one page WordPress site layout https://theme.visualmodo.com/stream/
First of all you need to keep in mind that you need to have a page ready to use, for it you need to login to your WordPress dashboard, pages, add new, and using the theme page builder apply ‘row/section’ on your page to separate the areas, for more information about how to use rows and page builder sections please take a look on your theme documentation. With all the ready-made areas/sections the way you want we will start this tutorial. In short, We will explain how to connect areas of your page rows/section with pages on your menu.
Enable Extra Menus #
1 – To create your one page site system you need to go to your WordPress dashboard > Visualmodo > ‘Theme Options’ > ‘Header’ and found an option called ‘Do You Want Extra Menus?’ and type ‘2’ (we use only one on our theme demo http://theme.visualmodo.com/stream/) but you are free to use as much as you want. After selecting this info please click on ‘Save Changes’ button.
2 – Go to Appearance area of your WordPress and click on the ‘Menus’ tab. Create a new menu, to place pages on this navigation menu click on ‘Custom Links’ tab. Enter with your page name and on the URL type ‘#′ this will organize your page when you go create it, to add a page on the menu click on add menu’ button, Make sure to apply each page with their own name.
By opening the menu item toggle make sure you type the caller code for this section on your page. (To link the page section with the menu item. So when your site URL click on the menu link navigate to this area on the page) on Anchor area. For example #feature or any other name (without spaces and starting with “#”.
And after apply your information to finish it you will need to save it as ‘Extra Menu 1′ or extra menu 2, this will call your menu when you go to add it on a page navigation header area.
Apply The One Page WordPress Menu At The Page #
3 – Go to your WordPress pages area, click on ‘all pages’ button and select your front page, click on ‘edit page’ button, scroll the page down until you see an area of ‘Options’ and found an option called ‘Change Menu’ under ‘Settings’ tab In this option select the extra menu that you create, in our page case it’s ‘Extra Menu 1′
4 – You will need to link this menus buttons with your page sections to be the one-page site, remember the Anchor of your page sections on the menu (like ‘#features′) and put it on a section area on the page builder ‘row editor’ window. To do it click on ‘Edit the Row’ button of the page builder section. A window will open to you enter with your menu name. In this case, the menu name of this area is ‘features′ on the ‘Section ID or Row ID’. In the Section Settings or Row Settings area. You need to do it to link your page sections with your menu buttons after it is all done.
You also can build the scroll down / one-page navigation style using a free plugin called Page scroll to id all Visualmodo WordPress themes works perfectly with it.
How to create an one page WordPress site style using our WordPress themes – By Visualmodo
Jumping to a Target on Another Page or Post #
Once you have created a target, you can quickly access the URL which links to that target. Let’s say that you’ve created a target on a page with this URL. However, in this case, you need to add on the menu LINK. The entire Page URL. Not only the section.
All you have to do is add the
# symbol followed by the target ID to the end of the URL like this:
Now that you have the URL for the target. You can use it to link to that target from any other page or post on your site: