Create One Page Layout in several steps:



Step 1:


Create a new page from Dashboard > Pages > Add new or edit an existing page using the Vamtam Beaver Builder


Go to Page Attributes, in the right column of the page, and choose from the drop-down menu the page template "One Page Menu".






Step 2:


Each section in the layout is called Row and you can edit it by using the Vamtam Beaver Builder

 

Fill in the ID field of each Row (see the screenshots below). Copy the unique ID - you will need it in Step 3


Make sure you click on "Save" to save the Row's changes and at the end on "Done" > "Publish" to save the page's changes.





and






Step 3:


Create a new custom menu from Dashboard > Appearance > Menus > Create a new menu or edit the existing Main menu


Use the "Custom Links" option to add each menu item. 



Create menu item for each Row section of your page. 


Fill in the URL field the full page's URL, next # and the Row's ID, that you have copied in Step 1.


Example: 

http://consulting.demo.vamtam.com/test-one-page/#column1



Please note that in order for this to work properly (as in, avoiding false positives), you must use the full absolute url including the page's title.




and





Step 4: 


After creating the One Page Menu and added the menu items, please go to select "Menu Header" in the Menu Settings > Display location





Step 5: 


In order to have a smooth scroll animation please add the code below in the CSS Classes field


vamtam-animated-page-scroll





If you don't see the CSS Classes field: 

Click Screen Options, in the right upper part of the page. There is a section "Show advanced properties", put a tick on CSS Classes.