This article describes how to create a page divided into sections with anchors and a menu which scrolls the page to the chosen section.

  1. Let's say we have Home page.

  2. Add desired number of Section controls to the page. This control has an ID field that will be used for our OnePage Template example.
    You can add a new Section with the desired content or use one of Section presets available.

    add-section-html.png

  3. Add Section ID, e.g. "home", "about-us", etc.

    html-section-id.png

  4. Add Horizontal Menu control if needed.

  5. Add "Fix on Scroll" and "Smooth Scrolling" extensions to the Horizontal Menu control:

    menu-fix-in-scroll.png

  6. Now go to the Pages&Posts tab and add new pages. Each page will be a link to the appropriate section. Under the Page Attributes configure the title of the menu item and Custom URL parameter where you need to enter the # symbol and section ID:

    add-page-html.png

  7. Do the same for all other Sections and Save changes.

That's it!

This article describes how to create a page divided into sections with anchors and a menu which scrolls the page to the chosen section. 1. Let's say we have Home page. 2. Add desired number of **Section** controls to the page. This control has an **ID** field that will be used for our OnePage Template example. You can add a new Section with the desired content or use one of Section presets available. !add-section-html.png! 3. Add Section ID, e.g. "home", "about-us", etc. !html-section-id.png! 4. Add **Horizontal Menu** control if needed. 5. Add "Fix on Scroll" and "Smooth Scrolling" extensions to the Horizontal Menu control: !menu-fix-in-scroll.png! 6. Now go to the **Pages&Posts** tab and add new pages. Each page will be a link to the appropriate section. Under the **Page Attributes** configure the title of the menu item and **Custom URL** parameter where you need to enter the `#` symbol and `section ID`: !add-page-html.png! 7. Do the same for all other Sections and **Save** changes. That's it!