Create One Page Parallax Layout like this page https://hair-beauty.vamtam.com/parallax/ in several steps:


Please note that this page comes with the quick demo import! It's always easier to use this page as a starting point. If you've deleted it by accident you can ask for the page's code on the Vamtam Support Center.



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"





In order to have the vertical navigation like on the screenshot below:





You have to add a specific CSS class "vamtam-scroll-snap" in each of the general columns (the columns you've filled an ID in)






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 Manage Locations > and Select "One Page Menu" 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) go to Dashboard > Pages > Parallax > edit the content 


You can edit the column's content and background images using the Vamtam Builder: Guide to VamTam Drag and Drop Builder / Visual Composer Hair Beauty Theme (please check the screenshots below).


Please also check this guide for more reference: Guide to Parallax effect in Hair Beauty Theme



and



4) go to Dashboard > Slider Revolution > Parallax Intro





Please go to the Parallax Intro slider settings to change: the arrow's link, the background image with the girl and the text layers  (please check the screenshot below)