One Page Site

Single page designs can be an excellent technique for tackling smaller websites, even those that you might not think could ever be done without multiple pages. To create a menu able to make your page scroll to menu tab sections please check how to proceed below.

Setting up the one-page template

Before creating the menu, you have to create your page organized by rows with WPBakery Visual Composer where each row is a section that corresponds to a tab of the navigation menu. We will see below how to create a page that is scrollable through the menu.

Navigate to Pages in your admin sidebar and click Add New.

1. Input a new name for your page, then find the Page Attributes box on the right side.
2. Page Attributes: 
   1. Set your Parent page. It’s usually set to No Parent.
   2. Set your page template from the Template dropdown list. To create a One Page website please select > One Page Template
3. Publish the page

WPBakery Page Builder

As you can see in the image below click on Backend Editor just above your WP classic visual editor to start designing your page using the WPBakery Visual Composer tools: it’s an intuitive tool you just need to pick, drop and customize your page sections.

After clicking on the Backend Editor button you will see the WPBacker Page Builder section appear. Use the button + Add Element and sect Row as you see in the image below.

Edit the row and locate the Row ID field. Assign a unique ID for each main row as displayed in the following image. For example first row: home, second row: about, etc.

1. Click on the pen icon
2. In the Row ID field add your unique ID. Repeat this for all main rows.

Note: Each section of your website needs to be inside one unique row of WPBakery Visual Composer. Example: First row > Home section. Second row > About section, etc.

Creating the One Page menu

Navigate to Appearance > Menus section of your admin sidebar.

1. Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu button
2. To add a menu item for One Page Website, use the Custom Links to add a new link on the menu
3. In the URL field add the row ID you previously added in Visual Composer. Example: If you added in Visual Composer Row ID > about, in URL field add in this way #about
4. In the field, LInk Text adds the name of your menu link. Example: About
5. Click on Add to Menu
6. Repeat the same procedure for all your menu links following the ID sections you have added in Visual Composer Row ID
7. Save menu