In this guide & tutorial, you’ll learn how to create a one-page scroll navigation WordPress site and enable anchor menu item smooth scrolling to hash links in page sections.
One Page WordPress Site Style
In this tutorial on the Visualmodo knowledge base, we will show how to efficiently create a One-Page Site using our WordPress Theme and organize it with our themes.
These are examples of a one-page WordPress site layout usage:
First of all, you need to remember that you need to have a page ready to use. For it, you need to log in to your WordPress dashboard and pages, add new, and, using the theme page builder apply ‘row/section’ on your page to separate the areas. For more information about using rows and page builder sections, please look at your theme documentation.
We will start this tutorial with all the ready-made areas/sections the way you want. In short, We will explain how to connect areas of your page rows/sections with pages on your menu.
Enable Extra Menus to Start & Create One-Page Nav in WordPress Site
1 – To create your one-page site system, you need to go to your WordPress dashboard > Visualmodo > ‘Theme Options’ > ‘Header’ and find an option called ‘Do You Want Extra Menus?’ and type ‘2’ (we use only one on our theme demo here), but you are free to use as much as you want. After selecting this info, please click the ‘Save Changes’ button.
2 – Go to the Appearance area of your WordPress and click on the ‘Menus’ tab. Create a new menu. Click the Custom Links’ tab to place pages on this navigation menu. Enter your page name, and type ‘#′ on the URL. This will organize your page when you create it. To add a page to the menu, click on add menu’ button. Make sure to apply each page with its name.
By opening the menu item toggle, 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 applying 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 the ‘all pages’ button and select your front page, click on the ‘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 must link these menu 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 in a section area on the page builder ‘row editor’ window.
To do it, click on the page builder section’s ‘Edit the Row’ button. A window will open to you enter 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. It would help if you did 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 a one-page WordPress site style using our WordPress themes – By Visualmodo
Video Tutorial to Create One-Page in WordPress Site
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 you’ve made 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.
http://myblog.wordpress.com/example
All you have to do is add the # symbol followed by the target ID to the end of the URL like this:
http://myblog.wordpress.com/example/#unique-identifier
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:
How To Use One-Page Navigation on WordPress Blog Posts Using Block Editor?
I hope the guide and tutorial help you to learn how to create a one-page scroll navigation WordPress site and enable anchor menu items smooth scrolling to hash links in page sections.
What is a One-page WordPress Site?
A one-page WordPress website is a website that consists of only one page, where all of the content is presented on that single page. This type of website is also known as a single-page or one-page scroll website.
The content on a one-page WordPress website is typically organized into sections, separated by visually appealing design elements such as full-screen backgrounds, parallax scrolling effects, or animations. Each section can contain different types of content, including text, images, videos, forms, and call-to-action buttons.
One-page WordPress websites are often used for smaller projects, such as personal portfolios, event pages, or product landing pages. The main goal is to provide visitors with a quick and easy way to access all the necessary information in one place.
They can also be used as a standalone marketing tool or as part of a more prominent website. Follow this guide and tutorial to help you learn how to create a one-page scroll navigation WordPress site and enable anchor menu items smooth scrolling to hash links in page sections.