Create One Page Layout in 3 easy steps:



Step 1:

Create new page from Dashboard > Pages > Add new

Each section in the layout is called column and you can insert it by using the Vamtam Drag & Drop Editor

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

Fill in the Title field (optional)

Make sure you click on "Save Changes"





Step 2:

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 3:

Create new custom menu from Dashboard > Appearance > Menus > Create a new menu


Please use "Links" option to add each menu item. 




Create menu item for each column section of your page. Title of the column can be used as the Link Text of the menu item.


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


Example: http://church-event.vamtam.com/one-page/#trainers 


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.






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


wpv-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.






Step 4: 

After creating the One Page Menu and added the menu items, please go to Menu Settings > and Select "Menu Header" for the One Page Menu location





Tip:


If you have imported the dummy content, all you need to do in order to have the One page layout for your landing page is:


1) go to Dashboard > Settings > Reading > Front page displays > change the Static home page (please check this guide)

2) go to Dashboard > Appearance > Menus > Select the One Page Menu > edit menu items, if needed

3) do to Dashboard > Pages > One page > edit the content