A One Page website is simply a single page website that uses only one landing/home page. When clicking on navigation links, the user scrolls down the page or jumps to that particular content’s section.

Creating the One Page website structure

When creating content for your landing page website, you’ll need to organize your content into sections. This is so you can reference each section in your menu. Your menu will serve as a way for your viewers to quickly scroll to a section they’d like to view. For example, clicking the About menu item will automatically scroll the page to the About section.

1. Create a new page or edit an existing one.
2. Create your page content and layout using the WPBakery Page Builder as normal.
3. Once you’re finished laying out the page and creating your content, determine the different sections on your page. For example, the About section, the Contact section, and so on.
4. Once you’ve decided on the different sections of your page, it’s time to reference each section. There is an option to add ID to your Row which can be used as an anchor pointer when creating a link.

Important: When adding ID to row please make sure it is a unique value.

Continue adding row ID’s for all your One Page website sections. For example the About us section should use a about-us ID.

Creating the One Page scrolling menu items

Please read below for detailed instructions on how to set up a one page smooth scroll navigation menu.

1. Navigate to the Appearance > Menus tab on your WordPress admin panel.
2. Click the “Create A New Menu” link. Give it a name, then click the “Create Menu” button.
3. In the left sidebar, expand the “Custom Links” tab.
4. In the “URL” field, enter the section ID you’ve assigned to a section on your page. For example, if this menu item links to your About us section, then it would be #about-us. Please note that you have to enter it with a hashtag (#) in order to scroll to the section properly.
5. Once you’ve added the Anchor Name ID to the “URL” field, enter a name for the “Link Text” field. This is simply the menu item’s text. For example, About us.
6. When finished filling in those fields, click the “Add To Menu” button.
7. Under the “Menu Structure” section, you’ll find all the menu items you’ve just created. Expand each menu item and edit it’s settings.
8. Use the following CSS class with the “CSS Classes (optional)” field: scroll-section. This will add the One Page smooth scroll effect on your menu links. If the “CSS Classes” field is not visible you will need to enable it from the “Screen options” tab at the top of your admin page.
9. Once you’re done creating your custom menu items, click “Save Menu”.
10. You’re done. Refresh your page and check the results.